Tab 导航 css 样式 应用备份

实例效果图：

 

 

 html代码：

<ul class="nav clearfix" id="nav">
    <li><a href="/index.php?c=main&a=gift&m=default" class="a4" id="gift">&nbsp;</a></li>
    <li><a href="/index.php?c=main&a=index&m=default" class="a1 selected" id="play">&nbsp;</a></li>
    <li><a href="/index.php?c=main&a=invite&m=default" class="a2" id="invite">&nbsp;</a></li>
    <li><a href="/index.php?c=main&a=recharge&m=default" class="a3" id="pay">&nbsp;</a></li>
    <li><a href="/index.php?c=main&a=earn&m=default" class="a5" id="earn">&nbsp;</a></li>
    <li><a href="/index.php?c=main&a=logout&m=default" class="a6" id="help" target="_blank">&nbsp;</a></li>
</ul>

 css代码：

.nav{width:760px;margin:0 auto;}
.nav li{float:left;overflow:hidden;list-style-type:none;cursor:pointer;}
.nav li a{width:80px;height:28px;display:block;text-decoration:none;background:url("navbtn.png") 0 0;cursor:pointer;}
.nav li .a1{width:65px;background-position:0 0;}
.nav li .a1:hover{background-position:0 -28px;}
.nav li .a1.selected{background-position:0 -56px;}
.nav li .a2{width:114px;background-position:-65px 0;}
.nav li .a2:hover{background-position:-65px -28px;}
.nav li .a2.selected{background-position:-65px -56px;}
.nav li .a3{width:122px;background-position:-179px 0;}
.nav li .a3:hover{background-position:-179px -28px;}
.nav li .a3.selected{background-position:-179px -56px;}
.nav li .a4{width:95px;background-position:-301px 0;}
.nav li .a4:hover{background-position:-301px -28px;}
.nav li .a4.selected{background-position:-301px -56px;}
.nav li .a5{width:65px;background-position:-396px 0;}
.nav li .a5:hover{background-position:-396px -28px;}
.nav li .a5.selected{background-position:-396px -56px;}
.nav li .a6{width:64px;background-position:-461px 0;}
.nav li .a6:hover{background-position:-461px -28px;}
.nav li .a6.selected{background-position:-461px -56px;}

 

其中"navbtn.png"为一张（为切割的）大图，通过控制其位置达到显示不同图标的效果，如下：