css基础:一张图片做导航

作者: 来源: 更新时间:2013-03-26 11:22:36 点击:

<html xmlns="/upload/201303/2013326112236t91.png) no-repeat 0 0;}
#mini_nav li {width:65px; height:38px; float:left;}
#mini_nav li a {display:block; width:65px; height:38px; padding-top:40px; overflow:hidden;}
#mini_nav li a:hover {background:url(nav.png) no-repeat;}

#mini_nav li.nav1 a:hover {background-position:0 -38px;}
#mini_nav li.nav2 a:hover {background-position:-65px -38px;}
#mini_nav li.nav3 a:hover {background-position:-130px -38px;}
#mini_nav li.nav4 a:hover {background-position:-195px -38px;}
#mini_nav li.nav5 a:hover {background-position:-260px -38px;}
#mini_nav li.nav6 a:hover {background-position:-325px -38px;}
</style>
</head>
 
<body>
<ul id="mini_nav">
 <li class="nav1"><a href="#" title="财经">财经</a></li>
 <li class="nav2"><a href="#" title="商业">商业</a></li>
 <li class="nav3"><a href="#" title="管理">管理</a></li>
 <li class="nav4"><a href="#" title="领袖">领袖</a></li>
 <li class="nav5"><a href="#" title="协会">协会</a></li>
 <li class="nav6"><a href="#" title="博客">博客</a></li>
</ul>
</body>
</html>

 请获取下面图片 并命名为:nav.png