六狼论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

新浪微博账号登陆

只需一步,快速开始

搜索
查看: 248|回复: 0

底部固定导航条

[复制链接]

升级  6%

62

主题

62

主题

62

主题

举人

Rank: 3Rank: 3

积分
218
 楼主| 发表于 2013-2-8 00:45:32 | 显示全部楼层 |阅读模式
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8" /><title>无标题文档</title><style>.footbar_wrap{ position:fixed; bottom:0; left:0;width:100%;}.footbar{ width:96%; height:26px; line-height:26px; margin:0 auto; background:url(http://filer.blogbus.com/1490833/resource_14908331264066940z.jpg) repeat-x 0 0; border-left:1px solid #b4b4b4; border-right:1px solid #b4b4b4;}* html .footbar_wrap{ position:absolute; left:0; width:101.4%;top: expression(documentElement.scrollTop + documentElement.clientHeight-this.offsetHeight);} //IE6hack,提出来写比用_来区分会舒服些ul{ margin:0; padding:0; }li{ width:100px; text-align:center; float:left;position:relative;margin-left:1px;}.thespan{ position:absolute; top:-100px; left:-1px; font-size:12px;  display:none; width:100px;height:100px; border:1px solid #ccc; border-bottom:none;}.clear{ clear:both;}li:hover{ border:1px solid #ccc; border-top:none; background:#fff}li:hover span{ display:block;}li p{ margin:0 0 2px 0;}</style><!--[if IE 6]><script type="text/javascript" src="http://www.blogbus.com/user/js/jquery.js"></script><script>$(function(){  $(".footbar li:eq(0)").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","");      })     $(".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(1)").css("display","block");  },  function(){    $(this).css({ border: "none", background: "none"});    $(this).css("border-top", "none");        $(".thespan:eq(1)").css("display","");  })})</script><![endif]--> </head><body><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><div class="footbar_wrap"><div class="footbar"><ul><li><a href="#">about</a><span class="thespan"><p>关于我们</p><p>联系我们</p></span></li><li><a href="#">contct</a><span class="thespan">联系我们</span></li></ul><div class="clear"></div></div></div></body></html>
您需要登录后才可以回帖 登录 | 立即注册 新浪微博账号登陆

本版积分规则

快速回复 返回顶部 返回列表