精彩专题推荐:建站之入门课 建站之必修课 建站之关键课 网站价值所在 流量提高专题 css+div 标准 个人网站打造全过程
  • 让你的网站产生收益赚钱,有博客和网站的绝对不能错过
  • 将指定的流量带到你的网站,为你站增加有效的访客,为你提升业绩
  • 用CSS建设网站的实例

    来源:网络翻译 时间:08-01-09 点击: 点击这里收藏本文

    第十步:解决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="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>
    <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: 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,
    body.contact li#contact a,
    body.contact li#contact a:hover {
    background-position: 0 -100px;
    }
    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对原文的理解,译文中有很多非原作者的话),请查看原文。

    9 7 3 1 2 3 4 5 6 7 8 9 10 4 8 :

    用户评论

    广而告之