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:0;/*设置边框*/

    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 元素)的元素单独应用标签

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