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="#">更多»</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 元素)的元素单独应用标签

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