首页 诗词 字典 板报 句子 名言 友答 励志 学校 网站地图
当前位置: 首页 > 教程频道 > 网站开发 > Web前端 >

工具条/导航栏式样

2012-10-24 
工具条/导航栏样式源于http://wallimn.iteye.com/blog/780822,分享下自己的想法,方案一、素材:html结构:.li

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

热点排行