如果我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为：

body.about #header { height: 150px; background: #db6d16 url(../images/headers/about.jpg); }

至此就完成了"About"网页的制作,依此类推，修改html中body的类为services/portfolio/contact制作相应html文件并分别保存。
在css文件中添加各个网页相应的头部背景图片路径(如services网页的头部背景图片为services.jpg,在css中添加如下代码)：

body.services #header { height: 150px; background: #db6d16 url(../images/headers/services.jpg); }

然后用超级链接将这些网页连接起来，就组成了一个小网站了。

第十步：解决IE浏览器的显示BUG

要继续此教程需要IE的以前的版本进行测试，你可以在这里下载到。绝大部分中国用户使用的是ie6.0，因此您几乎不需要看下去了。

IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：

body { font-family: Arial, Helvetica, Verdana, Sans-serif; font-size: 12px; color: #666666; text-align: center; }

但是这样设置之后，网站的content层的文本也变成中间对齐了，我们需要让其向左对齐，加入：

#page-container { width: 760px; margin: auto; text-align: left;}

关于页脚的BUG，将版权内容加入新的#copyright层中，在html中加入：

<div id="copyright"> Copyright © Enlighten Designs<br /> Powered by <a xhref="http://www.enlightenhosting.com/" mce_href="http://www.enlightenhosting.com/">Enlighten Hosting</a> and <a xhref="http://www.vadmin.co.nz/" mce_href="http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a> </div>

在css文件中加入，并将#footer的padding-top: 13px;移除：

#footer #altnav { clear: both; width: 350px; float: right; text-align: right; padding-top: 13px; } #footer #copyright { padding-top: 13px; }

最后要解决的BUG是当光标在导航条的被选列表项目链接上悬停时(如在about的网页，body的类为about，但我们将光标移到导航条的about图片上时)，背景图片消失了，这就需要加入：

body.about li#about, body.about li#about a, body.about dt#about a:hover, body.services li#services, body.services li#services a, body.services li#services a:hover, body.portfolio li#portfolio, body.portfolio li#portfolio a, body.portfolio li#portfolio a:hover, body.contact li#contact, body.contact li#contact a, body.contact li#contact a:hover { background-position: 0 -100px; }

 << 上一页  [11]