用css网站布局之十步实录！（十）

2020-03-22 19:22:51

字体：大中小

来源：转载

供稿：网友

要继续此教程需要IE的以前的版本进行测试，绝大部分用户使用的是IE6.0，因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto，要实现层的中间对齐，需加入：Example Source Code
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}
但是这样设置之后，网站的content层的文本也变成中间对齐了，我们需要让其向左对齐，加入：Example Source Code
#page-container {
width: 760px;
margin: auto;
text-align: left;}
关于页脚的BUG，将版权内容加入新的#copyright层中，在html中加入：Example Source Code
div id= copyright
Copyright Enlighten Designs br /
Powered by a xhref= # Enlighten Hosting /a and
a xhref= # Vadmin 3.0 /a
/div
在css文件中加入，并将#footer的padding-top: 13px;移除：Example Source Code
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}
最后要解决的BUG是当光标在导航条的被选列表项目链接上悬停时(如在about的网页，body的类为about，但我们将光标移到导航条的about图片上时)，背景图片消失了，这就需要加入：Example Source Code
body.about li#about,
body.about li#about a,
body.about li#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;
}
本教程到此结束。感谢原作者Steve Dennis，感谢Jorux的精心翻译！本文作者:html教程

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。

上一篇：用CSS3伪类target如何制作tab选项卡效果

下一篇：CSS里的min-height和max-height怎么使用