TPR*_*TPR 9 css background-image
这两个网站都有一个背景标题在页面上展开,而内容居中并覆盖宽度的80%,并且与布局的其余部分完全一致.
我对这两个网站特别感兴趣,因为标题有两种背景颜色,而不仅仅是一种.
我确信网上有很多教程,但我没有要搜索的关键字.
它被background-image设置为body属性background-repeat:
background-repeat: repeat-x;
更多:http://www.w3schools.com/css/pr_background-repeat.asp
编辑:至于你的内容居中 - 我这样做:
<body>
<div id="wrapper">
<!-- here is wrapper *everything* else -->
</div>
</body>
然后设置width包装器到值(大多数960px).然后,当你设置它的边距时0 auto,它会居中.
#wrapper{
margin: 0 auto;
}
分析stumbleupon.com:
"标题"实际上包含两个 div:wrapperHeader和wrapperNav.这两个有不同的背景颜色.这些div只有一个具有CSS属性的子节点
margin: 0 auto
这导致水平居中.
此属性也分配给内容div,因此标题,导航和内容始终居中.当然,这需要为这些元素设置一些宽度.
结构如下所示:
<div id="wrapperHeader">
<div class="" id="header">
<!-- mnore stuff here, like logo -->
</div> <!-- end header -->
</div>
<div id="wrapperNav">
<ul id="navMain">
<li class="discover first"><a href="/discover/toprated/">Discover</a></li>
<li class="favorites"><a href="/favorites/">Favorites</a></li>
<li class="stumblers"><a href="/stumblers/onlinenow/">Stumblers</a></li>
</ul> <!-- end navMain -->
</div>
<div id="wrapperContent">
<div class="clearfix" id="content">
</div> <!-- end content -->
</div>
如果你使用Firebug for Firefox,你可以自己轻松地分析这些元素.