可扩展的Tab页效果

最新推荐文章于 2024-09-19 21:34:33 发布

Alien

最新推荐文章于 2024-09-19 21:34:33 发布

阅读量1.9k

点赞数

分类专栏： WEB前端那些事儿文章标签：扩展 class div firefox 文档 chrome

本文链接：https://blog.csdn.net/ymmc001/article/details/6070314

版权

WEB前端那些事儿专栏收录该内容

3 篇文章 0 订阅

订阅专栏

项目中写到的，拿出来跟大家分享一下：

可扩展的Tab标签

介绍

啥也不说，先看效果：

也可以点击这里(http://fe.baidu.com/~zhaoxianlie/tab/space-tab.html)查看

每个Tab标签的宽度可以自适应，也可以在CSS中指定！

HTML片段

<div class="mod-space-tab">
  <div class="tab-left-corner tab-on"><div class="tab-right-corner"><div class="tab-center">个人资料</div></div></div>
  <div class="tab-left-corner"><div class="tab-right-corner"><div class="tab-center">空间资料</div></div></div>
  <div class="tab-left-corner"><div class="tab-right-corner"><div class="tab-center">黑名单</div></div></div>
</div>
<div class="clear"></div>

CSS片段

/**************************************************************
 * 可扩展的Tab
 *************************************************************/
.mod-space-tab {
    font-size:12px;
    height:25px;
    border-bottom:2px solid #bed730;
    padding-left:10px;
}
.mod-space-tab .tab-left-corner,
.mod-space-tab .tab-right-corner,
.mod-space-tab .tab-center {
    background:url(http://img.baidu.com/hi/img/ihome/space-tab-bg.gif) no-repeat 0 0;
}
/*******************************普通状态**************************************/
.mod-space-tab .tab-left-corner {
    background-position:left -53px;
    margin-right:5px;
    padding-left: 4px;
    line-height:25px;
    cursor:pointer;
    float:left;
    _position:relative;
    _top:3px;
}
.mod-space-tab .tab-left-corner .tab-right-corner {
    background-position:right -107px;
    padding-right:4px;
}
.mod-space-tab .tab-left-corner .tab-right-corner .tab-center {
    background-position:center -80px;
    background-repeat:repeat-x;
    height:25px;
    text-align:center;
    overflow:hidden;
}
/*******************************开启状态**************************************/
.mod-space-tab .tab-on {
    background-position:left top;
    border-bottom:2px solid #fff;
}
.mod-space-tab .tab-on .tab-right-corner {
    background-position:right -27px;
}
.mod-space-tab .tab-on .tab-right-corner .tab-center {
    background:#fff;
    border-top:1px solid #bed730;
    font-weight:bold;
}

.clear {
    clear:both;
}

/*******************************这里更改每个Tab的宽度******不设定宽度时，自适应********************/
.mod-space-tab .tab-left-corner .tab-right-corner .tab-center {
    width:66px; /*真实宽度=width+8*/
}