工具条/导航栏式样

工具条/导航栏样式
源于http://wallimn.iteye.com/blog/780822，分享下自己的想法，
方案一、
素材：



html结构：

<div class="linkbar">
    <a href="#" class="cur"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>|<a href="#"><span>最新动态</span></a>
</div>

css：

.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的结构更精简，图片使用更小巧
缺点：灵活性欠佳，此处使用的图片圆角弧度较小（仅一个像素），对使用环境没有太大要求，但当圆角增大时，使用场合将受到制约，不适宜用于背景复杂的环境。