用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; }

相关文章:

1、CSS样式编写的规范和常见问题
https://www.onexin.net/latest/css-styles-to-prepare-specifications-and-frequently-asked-questions/

2、最优秀的css样式reset.css
https://www.onexin.net/latest/the-best-css-style-reset/

3、经典DIV + CSS Layout
https://www.onexin.net/web-design/div_css/classic-div-css-layout/

4、DIV+CSS布局解决IE6、IE7、IE8样式不兼容问题
https://www.onexin.net/web-design/xhtml-w3c/divcss-layout-solution-ie6-ie7-ie8-style-incompatibility-issues/

5、CSS如何让图片垂直并水平居中等比缩放?
https://www.onexin.net/web-design/div_css/div-css-how-to-make-image-vertical-and-align-center-geometric-scaling/

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

Leave a Reply

Your email address will not be published. Required fields are marked *