源于http://wallimn.iteye.com/blog/780822,分享下自己的想法,
方案一、
素材:
[img]http://dl.iteye.com/upload/attachment/330924/44a7cf2c-7d30-3ae0-aaba-0106d3b33bf9.png[/img]
html结构:
css:
优点:比[url]http://wallimn.iteye.com/blog/780822[/url]的结构更精简,图片使用更小巧
缺点:灵活性欠佳,此处使用的图片圆角弧度较小(仅一个像素),对使用环境没有太大要求,但当圆角增大时,使用场合将受到制约,不适宜用于背景复杂的环境。
方案一、
素材:
[img]http://dl.iteye.com/upload/attachment/330924/44a7cf2c-7d30-3ae0-aaba-0106d3b33bf9.png[/img]
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%;
}
优点:比[url]http://wallimn.iteye.com/blog/780822[/url]的结构更精简,图片使用更小巧
缺点:灵活性欠佳,此处使用的图片圆角弧度较小(仅一个像素),对使用环境没有太大要求,但当圆角增大时,使用场合将受到制约,不适宜用于背景复杂的环境。