工具条/导航栏样式
源于http://wallimn.iteye.com/blog/780822,分享下自己的想法,
方案一、
素材:
html结构:
.linkbar{ color: #000; font-size: 12px; line-height: 16px;}.linkbar a, .linkbar span{ display: inline-block; height: 16px;}.linkbar a{ margin: 0 5px; padding: 0 0 0 1px; color: #F00; text-decoration: none; cursor: pointer;}.linkbar a:hover, .linkbar a.cur{ background: #999 url(bg.png) no-repeat 0 0; color: #FFF;}.linkbar a:hover span, .linkbar a.cur span{ padding: 0 1px 0 0; background: #999 url(bg.png) no-repeat 100% 100%;}优点:比http://wallimn.iteye.com/blog/780822的结构更精简,图片使用更小巧
缺点:灵活性欠佳,此处使用的图片圆角弧度较小(仅一个像素),对使用环境没有太大要求,但当圆角增大时,使用场合将受到制约,不适宜用于背景复杂的环境。