底部固定导航条

最新推荐文章于 2022-08-29 17:41:49 发布

nanyswing

最新推荐文章于 2022-08-29 17:41:49 发布

阅读量906

点赞数

分类专栏： css + jquery 文章标签： CSS jQuery IE JavaScript XHTML ViewUI

css + jquery 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

<!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>