用CSS实现的一张图完成的导航条

<div id="info">
<ul>
<li id="car"><a href="http://homepage.yesky.com/" target="_blank"><span> 游 戏</span></a></li>
<li id="job"><a href="http://homepage.yesky.com/" target="_blank"><span> 娱 乐</span></a></li>
<li id="eve"><a href="http://homepage.yesky.com/" target="_blank"><span> 菜 单</span></a></li>
<li id="oth"><a href="http://homepage.yesky.com/" target="_blank"><span> 好 玩</span></a></li>
</ul>
</div>

ul, li { list-style:none; float:left; }
body { font-size:12px; line-height:1.6; font-family:Verdana, "宋体", Arial; text-align:center; }
#info li { margin-left:4px; margin-top:15px; }
#info a { display:block; text-align:center; padding-left:15px; padding-top:2px; padding-bottom:1px; background-image: url(http://www.jscode.cn/Uploadfile/200682494749491.GIF); background-repeat: no-repeat; color: #000; width:47px; cursor:hand; text-decoration: none; }
#job a:link, #job a:visited { background-position: -62px 0px; }
#eve a:link, #eve a:visited { background-position: -124px 0px; }
#oth a:link, #oth a:visited { background-position: -186px 0px; }
#car a:hover, #car a:active { background-position: 0px -22px; color:#fff; }
#job a:hover, #car a:active { background-position: -62px -22px; color:#fff; }
#eve a:hover, #car a:active { background-position: -124px -22px; color:#fff; }
#oth a:hover, #car a:active { background-position: -186px -22px; color:#fff; }

相关文章：

转载请注明出处：https://www.onexin.net/web-design/div_css/photo-with-css-to-achieve-the-completion-of-the-navigation-bar/