工具条/导航栏样式

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

你可能感兴趣的:(html,css,Blog)