借用腾讯空间页面底部的效果图:
默认文档声明为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©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;}