http://www.stumbleupon.com/
这两个网站都有一个背景标题在页面上延伸,而内容居中并覆盖宽度的80％,并且与布局的其余部分完全一致.
我对这两个网站特别感兴趣,因为标题有两种背景颜色,而不仅仅是一种.
我确信网上有很多教程,但我没有搜索的关键字.
解决方法
分析stumbleupon.com：
“header”实际上包含两个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>
如果你为Firefox获得Firebug,你可以自己轻松地分析这些元素.
