页面底部实例

2010年05月13日 14:42

借用腾讯空间页面底部的效果图:

默认文档声明为xhtml1.0过渡型。
<title>页面底部</title>
<style type="text/css">
*{margin:0;padding:0;}
body{width:950px;margin:0 auto;font:12px/1.5 "宋体",Arial;}
#footer{width:950px;margin:20px auto;/*内部内容居中*/text-align:center;}
.contact{/*标准浏览器浮动居中和ie浮动居中的兼容*/display:inline-block;line-height:1;list-style:none;}
.contact{*display:inline;zoom:1;}
.contact:after{/*清除浮动闭合*/content:".";height:0;clear:both;display:block;
}
.contact li{float:left;border-left:1px solid gray;}
.contact .first{border-left:0;}
.contact li a{padding:0 8px 0 4px;line-height:1;color:gray;text-decoration:none;}
.contact li a:hover{text-decoration:underline;color:red;}
#footer p{color:gray;}
#footer p a{text-decoration:none;color:gray;}
#footer p a:hover{text-decoration:underline;color:red;}
</style>
</head>

<body>
     <div id="footer">
          <ul class="contact">
              <li class="first"><a href="#">空间社区</a></li>
              <li><a href="#">黄钻贵族</a></li>
              <li><a href="#">官方Qzone</a></li>
              <li><a href="#">腾讯博客</a></li>
              <li><a href="#">日志归档</a></li>
              <li><a href="#">帮助中心</a></li>
              <li><a href="#">腾讯客服</a></li>
              <li><a href="#">合作洽谈</a></li>
          </ul>
          <p>Copyright&copy;1998 - 2010 Tencent.All Rights Reserved.</p>
          <p>腾讯公司 <a href="#">版权所有</a></p>
     </div>

</body>

版权部分的字符没弄好,哎...

实现需要考虑的问题:

1.利用边框实现分割条,避免直接在html中写入,这符合内容与表现分离;

2.浮动居中需要一定的兼容技巧,具体见14px空间:http://www.14px.com/?tag=float

3.inline-block的兼容技巧:http://bbs.blueidea.com/thread-2726100-1-1.html

4.注意对浏览器默认行高的重置;

5.如果不想添加多余的类first来去除左边框,可以采用负边距的方法,这时需要考虑重新清除浮动闭合的方法,使代码简洁。即改动:

.contact{/*标准浏览器浮动居中和ie浮动居中的兼容*/display:inline-block;line-height:1;list-style:none;overflow:hidden;zoom:1;}
.contact{*display:inline;zoom:1;}
/*.contact:after{清除浮动闭合content:".";height:0;clear:both;display:block;visibility:hidden;
}*/
.contact li{float:left;border-left:1px solid gray;margin-left:-1px;}

posted @ 2010-12-03 13:55  xmlovecss  阅读(132)  评论(0编辑  收藏  举报