css 一張圖片做導航

來源:互聯網
上載者:User

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title></title>
<style type="text/css">
<!--
* {margin:0; padding:0; font-size:12; list-style-type:none; }
#mini_nav {width:390px; height:38px; overflow:hidden; margin:50px auto; background:url(nav.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

相關文章

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.