'NEC各种标签的写法'

2017-02-14

NEC

NEC（nice easy css）是一种规定了规范的css写法，包括遵循一定的命名/分类等规范，比如布局样式类名以.g开头，模块.m开头，功能模块用.f开头等等。同时，nec则希望通过引入代码框架更简单和统一的实现页面的基础功能。

NEC下的标签框架

NEC下，所有标签可能涉及到的大众功能均作为框架，引用只需添加类名即可。规定几个常用带tab的标题头,请暂时忽略已经写好的类名，下一部分将做说明

html

<header class="m-hd">
    <h2 class="u-tt">标题</h2>
    <div class="more"><a href="#">more&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="#">mroe&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="#">more&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="#">more&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="#">more&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>

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;}