仿Facebook底部工具栏的实现

底部工具栏可以带来很多好处，高度集中网站资源，提供用户更加便捷的操作通道，信息也更加及时有效，底部工具栏已经被广泛应用在包括开心网，校内网等诸多SNS社区领域，也被应用在包括榕树下，csdn等特殊群体的网站，本篇博客将实现它，底部工具栏的实现主要解决IE6不支持fixed属性，线上效果图：

?

?

首先定义HTML代码片段：

?

?

?
?
CSS定义：
?
?
.footbar_wrap{ position:fixed; bottom:0; left:0;width:100%;}.footbar{ width:100%; height:24px;line-height:24px; font-size:14px; margin:0 auto; background:url(bg.jpg) repeat-x 0 0; border-left:1px solid #b4b4b4; border-right:1px solid #b4b4b4;}/*a:link, a:visited {*/.footbar a {color: #333;text-decoration: none;}/*a:hover, a:active {*/.footbar a:hover {}* html .footbar_wrap{ position:absolute; left:0; width:101.4%;top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);}ul{ margin:0; padding:0; }.lxr{background: url(chat_icon_5.gif) no-repeat scroll 12px -125px transparent;}.shang{background: url(chat_icon_5.gif) no-repeat scroll 20px -1180px transparent;}.xia{background: url(chat_icon_5.gif) no-repeat scroll 20px -1215px transparent;}.chat{background: url(chat_icon_5.gif) no-repeat scroll 12px -1136px transparent;}.footbar li{ width:140px; text-align:center; float:left;position:relative;margin-left:1px;list-style: none;}.thespan{ position:absolute; top:-110px; left:-1px; font-size:12px;text-align:center;display:none; width:140px;height:110px; border:1px solid #ccc; border-bottom:none;}.clear{ clear:both;}.footbar li.shang:hover{ border:1px solid #ccc; border-top:none; background:url(chat_icon_5.gif) no-repeat scroll 20px -1215px transparent;background-color:#FFF;}.footbar li.lxr:hover{ border:1px solid #ccc; border-top:none; background:url(chat_icon_5.gif) no-repeat scroll 12px -170px transparent;background-color:#FFF;}.footbar li.chat:hover{ border:1px solid #ccc; border-top:none; background-colojavascript:mctmp(0);r:#FFF;}.footbar li:hover span{ display:block;}.footbar li p{ margin:0 0 2px 0;}
?
最终效果可查看：http://www.faqee.com
?
所有的代码打包见附件！