中国设计秀欢迎投稿
联网
Dreamweaver Flash Photoshop 其它周边 web标准 asp php .net CSS WAP网站攻略 专题
域名注册 虚拟主机 广州网站设计 域名注册 广州网站建设 上海网站建设 虚拟主机 广州网页设计 签名设计 虚拟主机 域名注册 acg王国 ACG玩家
求创科技
上海网麒科技
中国福网
数字引擎
招聘求职
中国互联
时代互联
中资源
当前位置:网络学院首页 >> 设计教程 >> web标准 >> 十步学会用css建站第十步

十步学会用css建站第十步

来源:中国设计秀    作者:jorux    点击:819     加入收藏
关键字:css建站 布局
中国品牌设计网

第十步:解决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;
}

本教程到此结束,如果您觉得不错,请留言支持Jorux
当然,如果您不满意Jorux的翻译或是理解(与其说是翻译,还不如说是Jorux对原文的理解,译文中有很多非原作者的话),请查看原文。

0
顶一下
2007-12-29 14:45:19    出处:Jorux.com
网站地图 | 关于我们 | 联系我们 | 网站建设 | 广告服务 | 版权声明 | 免责声明 | 网站公告 | 友情链接 | 留言 | 旧版入口