[英]Wordpress, Roots theme, header
一个人为我建立了一个网站,我正在努力了解它。 在这里: 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)。 我还看到header标头也被赋予了“ banner”的“角色”。 这样做有什么直接目的,还是对于屏幕阅读器而言?
我们还可以看到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;
}
.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;
}
尽管这不一定是答案,因为Veelen的回答完全了解每个元素的作用,但是下面是Google Chrome浏览器的Web检查器(或Firefox的 Firebug )的屏幕截图。 将鼠标悬停在任何DOM元素上,它将告诉您所有相关信息,单击CSS规则并即时修改任何内容。
尝试一下,看看事物的外观和感觉以及它的构造。 这是大多数开发人员测试并查看更改外观的方式,而无需进行代码/重新上传,并且您在Web Inspector期间进行的任何触摸和更改都不会保存=)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.