正在阅读:CSS教程:十步学会用css建站CSS教程:十步学会用css建站

2008-12-09 09:59 出处: 作者:中国教程网 Jorux 责任编辑:zengxiaolan

  解决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="#"">Enlighten Hosting</a> and
  <a xhref="#">Vadmin 3.0</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 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的精心翻译!

键盘也能翻页,试试“← →”键

相关文章

关注我们

最新资讯离线随时看 聊天吐槽赢奖品