#main-nav li#portfolio,
#main-nav li#portfolio a { width: 95px; background-image: url(../images/nav/portfolio.gif); }
#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
最后我们要做的就是，当列表项目被选时，显示背景图片的下部。为此我们需要增加一些css代码对原有的css表现作一些修改：
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}
body.about li#about,
body.about li#about a,
body.services li#services,
body.services li#services a,
body.portfolio li#portfolio,
body.portfolio li#portfolio a,
body.contact li#contact,
body.contact li#contact a {
background-position: 0 -100px;
}
以上看似庞大的css选择器可以识别body标签的类(class)，如html中为：
<body class="about">
<body class="about">
以上css选择器就让li#about,li#about a,的背景向上移动100px，使其显示背景图片的下部。
如果我们希望网站头部背景图片也根据body标签的类进行变换，就需修改css的#header为：
body.about #header {
height: 150px;
background: #db6d16
url(../images/headers/about.jpg);
}
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);
}
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;
}
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
上一篇:不规则文字排版的CSS样式的定义参考方法
下一篇:DIV CSS网页技巧：网页布局中border断线现象
|
精品推荐