工具条/导航栏样式

源于http://wallimn.iteye.com/blog/780822,分享下自己的想法,
方案一、
素材:

[img]http://dl.iteye.com/upload/attachment/330924/44a7cf2c-7d30-3ae0-aaba-0106d3b33bf9.png[/img]

html结构:



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

优点:比[url]http://wallimn.iteye.com/blog/780822[/url]的结构更精简,图片使用更小巧
缺点:灵活性欠佳,此处使用的图片圆角弧度较小(仅一个像素),对使用环境没有太大要求,但当圆角增大时,使用场合将受到制约,不适宜用于背景复杂的环境。

你可能感兴趣的:(工具条/导航栏样式)