NEC学习 ---- 模块 - tab[含标题]

简要介绍, 默认居左, Tab不定宽,  “标题”和“更多”可删, 扩展类可以自由组合, 依赖于reset.css(之前的模块以及布局都依赖这个css)

那么这个效果是怎么实现的呢?

CSS代码:

.container {
    width:800px;
    margin:45px auto;
}
.m-hd {/*定义行高和高, 且子元素都继承之*/
    height:35px;line-height:35px;
    padding:1px 0 0 0;
    border-bottom:1px solid #ddd;
}
.m-hd ul, .m-hd li, .m-hd h2, .m-hd li a {
    float:left;display:inline;
}
.m-hd h2 {/*标题样式*/
    margin: 0 20px 0 0;font-size:16px;font-family:"Microsoft Yahei",sans-serif;
}
.m-hd ul {/*tab容器左移2px*/
    margin-left:-2px;
}
.m-hd li {/*调整tab元素子容器li的 前后左右的 位置 */
    position:relative;
    margin:-1px 0 0 2px;
}
.m-hd li a {/*用tab元素--->就是这里的a标签来进一步控制每一个tab*/padding:0 15px;/*不定宽, 所以这里使用padding*/
    border:1px solid #ddd;
    border-bottom:;/*设置边框*/
    border-radius:5px 5px 0 0;/*设置圆角ie7, i8无效*/
    text-align:center;/*设置字体居中*/
    font-size:14px;/*设置tab中的字体大小*/
    background:#f8f8f8;/*设置背景色*/
    color:#666;/*设置字体的颜色*/
    /* css3 -- 设置渐变背景色, ie10及以上才有用, 本人对css3不熟 */
    background:-webkit-gradient(linear,0% 0%,0% 100%,from(#fdfdfd),to(#f8f8f8));
    background:-webkit-linear-gradient(#fdfdfd,#f8f8f8);
    background:-moz-linear-gradient(#fdfdfd,#f8f8f8);
    background:-ms-linear-gradient(#fdfdfd,#f8f8f8);
    background:linear-gradient(#fdfdfd,#f8f8f8);
}
.m-hd li a:hover{/*设置放上去的样式*/
    text-decoration:none;
    background:#fff;
}
.m-hd li.z-crt a{/*设置当前选中的样式*/
    position:relative;
    padding-bottom:1px;
    margin-bottom:-1px;/*利用padding-bottom, margin-bottom来抵消选中时下方的边框, 这个边框是前面设置的 .m-hd 的边框 border-bottom*/
    background:#fff;/*设置当前选中时背景色*/
}
.m-hd .more{/*使更多居右, 且可根据实际需要删除*/
    float:right;
    margin-right:10px;
}
.m-hd .more a:hover{
    text-decoration:underline;
}
/*有背景*/
.m-hd-bg{/*如果tab 有背景设置该项*/
    padding:11px 10px 0 10px;
    background:#f7f7f7;
    border-radius:5px 5px 0 0;
}

html代码:

<div class="container">
    <div class="m-hd m-hd-bg">
        <h2>标题</h2>
        <div class="more"><a href="#">更多&raquo;</a></div>
        <ul>
            <li class="z-crt"><a href="#">居左, 不定宽</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
            <li><a href="#">标签</a></li>
        </ul>
    </div>
</div>

这个例子中, 学习到了tab的css的设置, 很多时候, 对我启发时, 标签元素放在ul>li中, 对于可变(可删除的元素, 单独使用标签, 比如本例的 h2, .more 元素)的元素单独应用标签

方便删除, 而不会影响到标签本身布局.