精美而实用的网站，关注web编程技术、网站运营、SEO推广，让您轻松愉快的学习

本例主要实现了各类Tab模块样式，样式默认居左，Tab不定宽， “标题”和“更多”可删，扩展类可以自由组合，适用于网站Tab模块制作。

div+css之Tab含标题和Tab标签模块头部效果图


<header class="m-hd">
    <h2 class="u-tt">标题</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>
</header>
<header class="m-hd m-hd-bg">
    <h2 class="u-tt">标题</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>
</header>
<header class="m-hd m-hd-rt m-hd-sl">
    <h2 class="u-tt">标题</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>
</header>
<header class="m-hd m-hd-sm">
    <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>
</header>
<header class="m-hd m-hd-rt m-hd-sm">
    <h2 class="u-tt">标题</h2>
    <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>
</header>
<header class="m-hd m-hd-fw m-hd-ra">
    <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>
</header>

div+css之Tab含标题和Tab标签模块头部CSS代码部分

/* 含标题和Tab的模块头部-默认不定宽 */
.m-hd{height:35px;line-height:35px;padding:1px 0 0;border-bottom:1px solid #ddd;}
.m-hd h2,.m-hd ul,.m-hd li{float:left;}
.m-hd h2{margin:0 20px 0 0;font-size:16px;}
.m-hd li{position:relative;margin:-1px 0 0 2px;}
.m-hd li:first-child{margin-left:0;}
.m-hd li a,.m-hd li a:hover{text-decoration:none;color:#666;}
.m-hd li a{display:block;padding:0 15px;border:1px solid #ddd;border-bottom:0;border-radius:5px 5px 0 0;text-align:center;font-size:14px;background:#f8f8f8;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{background:#fff;}
.m-hd li.z-crt a{padding-bottom:1px;margin-bottom:-1px;background:#fff;}
.m-hd .more{float:right;margin-left:10px;}
/* 有背景 */
.m-hd-bg{padding:11px 10px 0;border-radius:5px 5px 0 0;background:#f7f7f7;}
/* tab无缝 */
.m-hd-sl li{margin-left:-1px;}
.m-hd-sl li a{border-radius:0;}
.m-hd-sl li:first-child a{border-top-left-radius:5px;}
.m-hd-sl li:last-child a{border-top-right-radius:5px;}
/* tab居右 */
.m-hd-rt h2{margin-right:0;}
.m-hd-rt ul{float:right;}
/* tab较小 */
.m-hd-sm{height:25px;line-height:25px;}
.m-hd-sm h2{font-size:14px;}
.m-hd-sm li a{padding:0 10px;font-size:12px;}
/* tab定宽 */
.m-hd-fw li{width:80px;}
.m-hd-fw li a{padding:0;}
/* tab直角 */
.m-hd-ra,.m-hd-ra li a,.m-hd-ra li:first-child a,.m-hd-ra li:last-child a{border-radius:0;}
/*清除浮动*/
.f-cb:after,.f-cbli li:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.f-cb,.f-cbli li{zoom:1;}

在线Demo预览

Tags：div+css tab HTML CSS