底部导航栏

[css]代码库

<div id="ft">
<a class="a" href="index.php" ><span><em class="n1"></em>首页</span></a>
<a href="search.php"><span><em class="n2"></em>搜索</span></a>
<a href="allcate.php"><span><em class="n3"></em>分类</span></a>
<a href="flow.php"><span><em class="n4"></em>购物车</span></a>
<a href="user.php" ><span><em class="n5"></em>我的</span></a>
</div>
<style type="text/css">
body{ padding-bottom:57px;}
#ft{ position:fixed; bottom:0;height:57px; width:100%; text-align:center;background:#343434; z-index:9999;}
#ft a{ width:20%; display:block; float:left;text-align:center; font-size:14px;color:#b0b0b0; text-decoration:none;}
#ft a:hover,.ft a.a{ background:#1e1e1e;}
#ft a span{ display:block; width:50px; height:57px; margin:0 auto;}
#ft a em{ display:block; width:34px; height:34px; margin:0 auto;background:url(./themes/default/images/nav.png) no-repeat 0 0;}
#ft a .n2{ background-position:0 -44px;}
#ft a .n3{ background-position:0 -88px;}
#ft a .n4{ background-position:0 -132px; position:relative;}
#ft a .n5{ background-position:0 -176px;}
#ft a .n4 b{ position:absolute; top:5px; right:-18px; display:block;height:18px; width:18px; text-align:center;line-height: 18px; border-radius: 10px; background: #C70600; color:#fff; font-style:normal; text-indent:1px; font-size:12px; font-weight:400;}
</style>