可擴展的Tab頁效果

項目中寫到的，拿出來跟大家分享一下：

 

可擴展的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*/
}

兼容性

已經通過：IE6/7/8、Firefox、Chrome、搜狗瀏覽器

反饋

點擊這裏拍磚！

 

Power By Space-Fe © 2010