底部工具栏可以带来很多好处，高度集中网站资源，提供用户更加便捷的操作通道，信息也更加及时有效，底部工具栏已经被广泛应用在包括开心网，校内网等诸多SNS社区领域，也被应用在包括榕树下，csdn等特殊群体的网站，本篇博客将实现它，底部工具栏的实现主要解决IE6不支持fixed属性，线上效果图：
?
?
首先定义HTML代码片段：
?
?
<div class="footbar_wrap"> <div class="footbar"> <ul> <li style="width:100px;color:#666;"><a href="http://www.faqee.com" target="_blank">发起网络</a>：</li> <li class="shang"><a href="#">免费接口</a><span class="thespan"> <p><a href="http://bbs.faqee.com/read.php?tid-6-toread-1.html" target="_blank">天气预报整合</a></p> <p><a href="http://bbs.faqee.com/read.php?tid-1242-toread-1.html" target="_blank">视频会议整合</a></p> <p><a href="http://bbs.faqee.com/read.php?tid-28-toread-1.html" target="_blank">聊天室整合</a></p> <p><a href="http://bbs.faqee.com/read.php?tid-10-toread-1.html" target="_blank">网站客服整合</a></p> </span></li> <li class="shang"><a href="#">开源项目</a><span class="thespan"> <p><a href="http://code.google.com/p/luguo/" target="_blank">随机聊天</a></p> <p><a href="http://code.google.com/p/luguo/" target="_blank">视频随机聊天</a></p> <p><a href="http://code.google.com/p/vms4android/" target="_blank">视频会议Android版</a></p> </span></li> </ul> <div class="clear"></div> </div> </div>
?
?IE6的特殊处理：
?
?
<!--[if IE 6]>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<script>
$(function(){
$(".footbar li:eq(1)").hover(function(){
$(this).css({ border: "1px solid #ccc", background: "#fff"});
$(this).css("border-top", "none");
$(this).css("border-bottom", "none");
$(".thespan:eq(0)").css("display","block");
},
function(){
$(this).css({ border: "none", background: "none"});
$(this).css("border-top", "none");
$(".thespan:eq(0)").css("display","");
})
})
</script>
<![endif]-->
?
?
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
?
所有的代码打包见附件！