日期:2013-07-15 浏览次数:21145 次
看看怎样用 background-position 处理这个问题,实现快速"切换",这里只用到一张图片
至于代码中的font:10px/1也是不常见的用法
可以参考这里:http://www.w3.org/Style/CSS/Test/CSS1/current/sec5526c.htm
这种用法放在网站地图或者导航条上的效果:
<style type="text/css">#menu a {display:block;width:150px;margin:6px; padding:10px 0 10px 32px;font:10px/1 sans-serif;color:#f90;background: url("http://nb001722.sosoo.net/btn.gif") top left no-repeat;text-decoration: none;}#menu a:hover {background-position: 0 -39px;color:red;}#menu a:active {background: url("http://nb001722.sosoo.net/btn.gif") 0 -78px no-repeat;color:black;}</style></head><body><div id="menu"><a href="###">Menu link 1</a><a href="###">Menu link 2</a><a href="###">Menu link 3</a><a href="###">Menu link 4</a><a href="###">Menu link 5</a></div>
[Ctrl+A 全部选择 提示:你可先修正部分代码,再按运转]