DIV CSS网页布局实例:十步学会用CSS建站(7)

2008-02-23 08:43:53来源:互联网 阅读 ()

新老客户大回馈,云服务器低至5折


#main-nav li#contact,
#main-nav li#contact a { width: 106px; background-image: url(../images/nav/contact.gif); }
#main-nav li#about,
#main-nav li#about a { width: 71px; background-image: url(../images/nav/about.gif); }
#main-nav li#services,
#main-nav li#services a { width: 84px; background-image: url(../images/nav/services.gif); }
#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;
font-size: 12px;
color: #666666;
text-align: center;
}

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

#page-container {
width: 760px;
margin: auto;
text-align: left;}
#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="Enlighten'>http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a xhref="http://www.vadmin.co.nz/" mce_href="Vadmin'>http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>
<div id="copyright">
Copyright © Enlighten Designs<br />
Powered by <a xhref="http://www.enlightenhosting.com/" mce_href="Enlighten'>http://www.enlightenhosting.com/">Enlighten Hosting</a> and
<a xhref="http://www.vadmin.co.nz/" mce_href="Vadmin'>http://www.vadmin.co.nz/">Vadmin 3.0 CMS</a>
</div>

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

#footer #altnav {
clear: both;
width: 350px;
float: rightright;
text-align: rightright;
padding-top: 13px;
}
#footer #copyright {
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,

标签:

版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有

上一篇:DIV CSS标准制作网页学习之学习DTD的元素

下一篇:不规则文字排版的CSS样式的定义参考方法