0

一个人为我做了一个网站，我正在努力理解它。它在这里： http ://www.brilliantzenaudio.com

请注意，左上角有一个徽标图像。我试图了解这是从哪里来的。相关代码似乎部分在 header.php 中，部分在 app.css 中。从 header.php，

<header class="banner" role="banner">
  <div class="container">

    <div class="row">
      <div class="col-xs-12 col-lg-2">
        <h1 class="logo"><a href="<?php echo home_url(); ?>/"><?php bloginfo('name'); ?>">Brilliant Zen Audio</a></h1>
          ... stuff removed here, other items in header ...             
      </div>
    </div>
  </div>
</header>

app.css 包含如下几行。查看上面的 php，我看到有一个类“banner”的元素，很明显有 css 代码解决了这个问题（给它一个颜色、一个位置、边框和 z-index）。我还看到标题标签也被赋予了“横幅”的“角色”。这是否有任何直接目的，或者是否适用于屏幕阅读器？

我们还可以看到 php 包含 h1 元素，以及 'h1' 元素中的 'a' 元素。CSS 条目是为那些东西准备的。我不清楚他们的目的是什么。一方面，徽标是图像。为什么要放在 h1 标签中？我理解对标签的需求，因为徽标应该是可点击的（返回主页）。但是作为链接文本的内容是接下来的（我不清楚如何在那里解析PHP。聪明的是图像被放在那里，因为它是“h1.logo a”css条目中的背景.

我在下面的评论中添加了一些一般性问题。

.banner { }

header.banner {
   background:#603913;
   position:relative; // question: what does this mean and how will it effect the position of things if I start moving or changing elements?
   border-bottom:solid 1px #fff;  // question: is this bottom border important for some reason?
   z-index:9999; // what does this do?
}
h1.logo {
   margin:0;  // is there a need to define these on h1.logo?
   padding:0;
}
h1.logo a {
   display:block; // what is display:block and how does it affect appearance? How would it affect changes if I change the size or location of the logo?
   text-indent:-9999px;  // what is this?
   background:url(../img/sm-logo.png) no-repeat 0 0;
   width:101px;    // what does it mean when you set the width and height of an <a>
   height:103px;
   margin:0 auto;
}
4

2 回答 2

3 
.banner { }

header.banner {
   background:#603913;
   position:relative; // This is set, so that the position:absolute of h1.logo a will work, and is also needed in order to make the z-index work.
   border-bottom:solid 1px #fff;  // Is responsible for the white line at the bottom of the header. It 's not important, but looks nice...
   z-index:9999; // The z-index property specifies the stack order of an element. An element with greater stack order is always in front of an element with a lower stack order.
}
h1.logo {
   margin:0;  // Yes, because normally an h1 has a top and bottom margin defined, with this setting, you set it to 0.
   padding:0;
}
h1.logo a {
   display:block; // Normally an a element has inline properties. By setting this to block you can use width, margin and other properties which aren't available for inline elements
   text-indent:-9999px;  // The text-indent property specifies the indentation of the first line in a text-block.
   background:url(../img/sm-logo.png) no-repeat 0 0;
   width:101px;    // Sets the width of this a, because it is a block element.
   height:103px;
   margin:0 auto;
}
于 2013-10-18T12:23:19.000 回答
1

虽然这不一定是答案，因为Veelen的回答完美地说明了每个元素的作用，但下面是Google Chrome的 Web 检查器（或Firefox的Firebug ）的屏幕截图。将鼠标悬停在任何 DOM 元素上，它会告诉您有关它的所有信息，单击 CSS 规则并即时修改任何内容。

尝试一下，看看事物的外观和感觉以及它是如何构造的。这是大多数开发人员在无需编码/重新上传的情况下测试和查看更改的外观的方式，并且您在 Web Inspector 期间触摸和更改的任何内容都不会保存 =)

谷歌浏览器检查器

然后

于 2013-10-18T12:44:27.973 回答