论坛交流
首页办公自动化| 网页制作| 平面设计| 动画制作| 数据库开发| 程序设计| 全部视频教程
应用视频: Windows | Word2007 | Excel2007 | PowerPoint2007 | Dreamweaver 8 | Fireworks 8 | Flash 8 | Photoshop cs | CorelDraw 12
编程视频: C语言视频教程 | HTML | Div+Css布局 | Javascript | Access数据库 | Asp | Sql Server数据库Asp.net  | Flash AS
当前位置 > 文字教程 > div+css布局教程
Tag:css,入门,技巧,div,实例,示例,菜单,布局,web2.0,ul,li,经验,列表,web标准,xhtml,web标准,浏览器,兼容,css hack,表格,视频教程

用css网站布局之十步实录!(十)

文章类别:div+css布局 | 发表日期:2008-9-26 11:27:33

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

  要继续此教程需要IE的以前的版本进行测试,绝大部分用户使用的是IE6.0,因此您几乎不需要看下去了。IE中主要出问题的是IE5和IE5.5,如其不能识别css中margin值为auto,要实现层的中间对齐,需加入:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
body {
font-family: Arial, Helvetica, Verdana, Sans-serif;
font-size: 12px;
color: #666666;
text-align: center;
}

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#page-container {
width: 760px;
margin: auto;
text-align: left;}

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
<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;移除:

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
#footer #altnav {
clear: both;
width: 350px;
float: right;
text-align: right;
padding-top: 13px;
}
#footer #copyright {
padding-top: 13px;
}

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

div css xhtml xml Example Source Code Example Source Code [www.21shipin.com]
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的精心翻译!

视频教程列表
文章教程搜索
 
div+css推荐教程
div+css热门教程
看全部视频教程
购买方式/价格
购买视频教程: 咨询客服
tel:15972130058