前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。
代码库
这里有各种常见布局、模块、技巧等代码，在这里找到她，或给你启发，或她就是你的。为满足产品对不同的平台和设备的要求，NEC代码库中的代码开发使用了三种版本：兼容、优雅、高级，以下为对这三个版本的详细说明。
兼容【1】：支持包括IE6在内的所有主流游览器和设备，UI效果可能有所退化。
优雅【2】：在高级游览器中有“高级”效果，在低级游览器中有“兼容”效果，是高级版的“优雅退化”，也是兼容版的“渐进增强”。
高级【3】：支持IE9+、Chrome、Safari、Firefox等主流游览器，支持移动设备和所有智能系统，具有优越的UI效果。
布局--提供各种常见的页面布局方法，比如定宽布局、自适应布局等
（1）代码展示
①两列右侧自适应布局
<div class="g-bd1 f-cb">
<div class="g-sd1">
<p>左侧定宽</p>
</div>
<div class="g-mn1">
<div class="g-mn1c">
<p>右侧自适应</p>
</div>
</div>
</div>/*两列右侧自适应布局*/
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:200px;}②两列左侧自适应布局
<div class="g-bd-2 f-cb">
<div class="g-mn2">
<div class="g-mn2c">
<p>左侧自适应</p>
</div>
</div>
<div class="g-sd2">
<p>右侧定宽</p>
</div>
</div>.g-bd2{margin:0 0 10px;}
.g-sd2{position:relative;float:right;width:230px;margin-left:-230px;}
.g-mn2{float:left;width:100%;}
.g-mn2c{margin-right:240px;}③两列定宽布局
<div class="g-bd f-cb">
<div class="g-mn">
<p>左侧定宽</p>
</div>
<div class="g-sd">
<p>右侧定宽</p>
</div>
</div>/*两列定宽布局*/
.g-bd{width:950px;margin:0 auto;}
.g-sd{float:right;width:230px;}
.g-mn{float:left;width:710px;}④三列中间自适应布局
<div class="g-bd5 f-cb">
<div class="g-sd51">
<p>左侧定宽</p>
</div>
<div class="g-mn5">
<p>中间自适应</p>
</div>
<div class="g-sd52">
<p>右侧定宽</p>
</div>
</div>/*三列中间自适应布局*/
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin: 0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5{margin:0 200px 0 240px;}⑤三列左侧自适应布局
<div class="g-bd4 f-cb">
<div class="g-mn4">
<div class="g-mn4c">
<p>左侧自适应</p>
</div>
</div>
<div class="g-sd41">
<p>右侧定宽</p>
</div>
<div class="g-sd42">
<p>右侧定宽</p>
</div>
</div>/*三列左侧自适应布局*/
.g-bd4{margin:0 0 10px;}
.g-sd41,.g-sd42{position:relative;float:right;width:190px;}
.g-sd41{width:230px;margin-left:10px;}
.g-mn4{float:left;width:100%;margin-right:-430px;}
.g-mn4{margin-right:440px;}⑥三列右侧自适应布局
<div class="g-bd3 f-cb">
<div class="g-sd31">
<p>左侧定宽</p>
</div>
<div class="g-sd32">
<p>左侧定宽</p>
</div>
<div class="g-mn3">
<p>右侧自适应</p>
</div>
</div>/*三列右侧自适应布局*/
.g-bd3{margin:0 0 10px;}
.g-sd31,.g-sd32{position:relative;float:left;width:230px;}
.g-sd31{width:190px;margin-right:10px;}
.g-mn3{float:right;width:100%;margin-left:-430px;}
.g-mn3{margin-left:440px;}模块--提供各种常见的网页内容模块，比如导航、菜单、幻灯片、图文列表等
（1）代码展示
①文本型圆角背景导航
②多行式面包屑导航
<nav class="m-crumb">
<ul class="f-cb">
<li><a href="#">面包屑导航，竖线分隔</a></li>
<li><a href="#">面包屑，可多行</a></li>
<li><a href="#">面包屑</a></li>
<li>文字</li>
</ul>
</nav>
<nav class="m-crumb m-crumb-arr">
<ul class="f-cb">
<li><a href="#">面包屑导航，箭头分隔</a></li>
<li><a href="#">面包屑，可多行</a></li>
<li><a href="#">面包屑</a></li>
<li>文字</li>
</ul>
</nav>
<nav class="m-crumb m-crumb-blank">
<ul class="f-cb">
<li><a href="#">面包屑导航，空白分隔</a></li>
<li><a href="#">面包屑，可多行</a></li>
<li><a href="#">面包屑</a></li>
<li>文字</li>
</ul>
</nav>/* 多行式面包屑导航-默认竖线分隔 */
.m-crumb{overflow:hidden;line-height:1.5;}
.m-crumb ul{margin-left:-20px;}
.m-crumb li{float:left;word-wrap:normal;white-space:nowrap;}
.m-crumb li:before{display:inline-block;width:20px;text-align:center;content:'|';font-size:12px;color:#ccc;font-family:\5b8b\4f53;}
/* 箭头分隔 */
.m-crumb-arr li:before{content:'\3E';}
/* 空白分隔 */
.m-crumb-blank ul{margin-left:-10px;}
.m-crumb-blank li:before{width:10px;content:'';}③简易文字链接列表④水平文字链接列表⑤带点文字链接⑥左图右文图文列表⑦上图下文图列表⑧含标题和Tab的模块头部⑨简易表单⑩简易数据表格
⑪简易翻页器
<nav class="m-page">
<a href="#" class="pageprv z-dis"></a>
<a href="#">1</a>
<a href="#" class="z-crt">2</a>
<a href="#">3</a>
<a href="#">4</a>
<i>...</i>
<a href="#">10</a>
<a href="#" class="pagenxt"></a>
</nav>
<nav class="m-page">
<a href="#">1</a>
<a href="#" class="z-crt">2</a>
<a href="#">3</a>
<a href="#">4</a>
<i>...</i>
<a href="#">10</a>
</nav>
<nav class="m-page">
<a href="#" class="pageprv z-dis">上一页</a>
<a href="#" class="pagenxt">下一页</a>
</nav>
<nav class="m-page m-page-lt">
<a href="#" class="pageprv">上一页</a>
<a href="#">1</a>
<a href="#" class="z-crt">2</a>
<a href="#">3</a>
<a href="#">4</a>
<i>...</i>
<a href="#">10</a>
<a href="#" class="pagenxt z-dis">下一页</a>
</nav>
<nav class="m-page m-page-rt">
<a href="#" class="pageprv z-dis">上一页</a>
<a href="#">1</a>
<a href="#" class="z-crt">2</a>
<a href="#">3</a>
<a href="#">4</a>
<i></i>
<a href="#">10</a>
<a href="#" class="pagenxt">下一页</a>
</nav>
<nav class="m-page m-page-sr m-page-sm">
<a href="#" class="pageprv z-dis">上一页</a>
<a href="#">1</a>
<a href="#" class="z-crt">2</a>
<a href="#">3</a>
<a href="#">4</a>
<i>...</i>
<a href="#">10</a>
<a href="#" class="pagenxt">下一页</a>
</nav>/*普通翻页器-默认居中*/
.m-page{margin:10px 0 0;text-align:center;line-height:32px;font-size:0;letter-spacing:-0.307em;word-wrap:normal;white-space:nowrap;color:#999;}
.m-page a,.m-page i{display:inline-block;vertical-align:top;padding:0 12px;margin-left:-1px;border:1px solid #ddd;font-size:12px;letter-spacing:normal;text-shadow:0 1px #fff;background:#fff;-webkit-transition:background-color 0.3s;-moz-transition:background-color 0.3s;-ms-transition:background-color 0.3s;transition:background-color 0.3s;}
.m-page a,.m-page a:hover{text-decoration:none;color:#39c;}
.m-page a:first-child{margin-left:0;border-top-left-radius:5px;border-bottom-left-radius:5px;}
.m-page a:last-child{margin-right:0;border-top-right-radius:5px;border-bottom-right-radius:5px;}
.m-page a.pageprv:before,.m-page a.pagenxt:after{font-weight:bold;font-family:\5b8b\4f53;vertical-align:top;}
.m-page a.pageprv:before{margin-right:3px;content:'\3C';}
.m-page a.pagenxt:after{margin-left:3px;content:'\3E';}
.m-page a:hover{background:#f5f5f5;}
.m-page a:active{background:#f0f0f0;}
.m-page a.z-crt,.m-page a.z-crt:hover,.m-page a.z-crt:active{cursor:default;color:#999;background:#f5f5f5;}
.m-page a.z-dis,.m-page a.z-dis:hover,.m-page a.z-dis:active{cursor:default;color:#ccc;background:#fff;}
/*居左*/
.m-page-lt{text-align:left;}
/*居右*/
.m-page-rt{text-align:right;}
/*较小*/
.m-page-sm{line-height:22px;}
.m-page-sm a,.m-page-sm i{padding:0 8px;}
/*分离*/
.m-page-sr a,.m-page-sr i{margin:0;border-radius:5px;}
.m-page-sr i{border:0;}
.m-page-sr a:first-child,.m-page-sr a:last-child{border-radius:5px;}⑫单片式幻灯
<div class="m-slide">
<ol>
<li class="z-crt"><a href="#"><img src="img/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""/></a></li>
</ol>
<span class="u-pointer"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>
<div class="m-slide m-slide-x">
<ol>
<li class="z-crt"><a href="#"><img src="img/1.jpg" alt=""></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""></a></li>
<li><a href="#"><img src="img/3jpg" alt=""></a></li>
<li><a href="#"><img src="img/4jpg" alt=""></a></li>
<li><a href="#"><img src="img/5jpg" alt=""></a></li>
</ol>
<span class="u-pointer u-pointer-rt"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>
<div class="m-slide m-slide-y">
<ol>
<li class="z-crt"><a href="#"><img src="img/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/5.jpg" alt=""/></a></li>
</ol>
<span class="u-pointer u-pointer-rt"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
</div>/*单片式幻灯--默认淡入淡出*/
.m-slide{position:relative;width:400px;height:250px;overflow:hidden;}
.m-slide ol,.m-slide li{position:absolute;top:0;left;width:100%;height:100%;z-index:20;}
.m-slide li{opacity:0;-webkit-transition:0.5s ease-out;-moz-transition:0.5s ease-out;-ms-transition:0.5s ease-out;transition:0.5s ease-out;-webkit-transition-property:opacity,left,top;transition-property:opacity,left,top;}
.m-slide li.z-crt{z-index:21;opacity:1;}
/*水平滚动*/
.m-slide-x li{left:-100%;}
.m-slide-x li.z-crt{left:0;}
.m-slide-x li.z-crt ~ li{left:100%;}
/*垂直滚动*/
.m-slide-y li{top:-100%;}
.m-slide-y li.z-crt{top:0;}
.m-slide-y li.z-crt ~ li{top:100%;}<!--JS只需改变className（以下示例仅作参考）：-->
<script type="text/javascript">
(function(_slides){
each(_slides,function(_slide,i){
var _ctrls = _slide.getElementsByTagName('i');
var _lists = _slide.getElementsByTagName('li');
each(_ctrls,function(_ctrl,i){
_ctrl.onclick=function(){
each(_lists,function(_list,i){
delClass(_list,"z-crt");
});
each(_ctrls,function(_ctrl,i){
delClass(_ctrl,"z-crt");
});
addClass(_lists[i],"z-crt");
addClass(_ctrls[i],"z-crt");
}
});
});
function hasClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
var _sCls = "" + (_object.className)+"";
return (_sCls.indexOf(""+_clsname+"") != -1) ? true : false;
}
function toClass(_str){
var _str = _str.toString();
_str = _str.replace(/(^\s*)|(\s*$)/g,"");
_str = _str.replace(/\s{2,}/g,"");
return _str;
}
function addClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
if(!hasClass(_object,_clsname)){
_object.className = toClass(_object.className+(""+_clsname));
}
}
function delClass(_object,_clsname){
var _clsname = _clsname.replace(".","");
if(hasClass(_object,_clsname)){
_object.className = toClass(_object.className.replace(new RegExp("(?:^|\\s)"+_classname+"(?=\\s|$)","g"),""));
}
}
function each(_objects,_fn){
for(var i=0,len=_objects.length;i<len;i++){
_fn(_objects[i],i);
}
}
})(document.getElementsByTagName('div'));
</script>⑬操作性弹出浮层
<div class="m-layer z-show">
<table>
<tbody>
<tr>
<td>
<article class="lywrap">
<header class="lytt">
<h2 class="u-tt">标题</h2>
<span class="lyclose">×</span>
</header>
<section class="lyct">
<p>默认固定居中，有遮罩，按钮区标题都可删</p>
<p>内容区：其他模块</p>
</section>
<footer class="lybt">
<div class="lyother">
<p>其他信息，比如提示</p>
</div>
<div class="lybtns">
<button type="button" class="u-btn">确定</button>
<button type="button" class="u-btn u-btn-c4">取消</button>
</div>
</footer>
</article>
</td>
</tr>
</tbody>
</table>
</div>/*操作型弹出浮层*/
.m-layer{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,0.6);}
.m-layer > table{table-layout:fixed;width:100%;height:100%;}
.m-layer > table > tbody > tr > td{vertical-align:middle;}
.m-layer .lywrap{position:relative;width:400px;margin: 0 auto;border:5px solid rgba(0,0,0,0.3);border-radius:10px;box-shadow:0 2px 10px rgba(0,0,0,0.2);}
.m-layer .lytt{position:relative;padding:10px;height:20px;margin:0 0 -1px;line-height:20px;border-bottom:1px solid #ddd;border-radius:5px 5px 0 0;background:#fafafa;}
.m-layer .lytt h2{float:left;font-size:16px;}
.m-layer .lyclose{float:right;font-weight:bold;font-family:arial;font-size:24px;color:#ccc;text-shadow:0 1px #fff;cursor:pointer;}
.m-layer .lyclose:hover{color:#aaa;}
.m-layer .lyct:last-child,.m-layer .lybt{border-bottom-right-radius:5px;border-bottom-left-radius:5px;}
.m-layer .lyct:first-child{border-top-left-radius:5px;border-top-right-radius:5px;}
.m-layer .lyct{padding:20px;background:#fff;}
.m-layer .lybt{height:30px;line-height:30px;padding:10px;margin:-1px 0 0;border-top:1px solid #ddd;background:#f7f7f7;}
.m-layer .lyother{float:left;color:#999;}
.m-layer .lybtns{float:right;}
.m-layer .lybtns button{float:left;margin-left:10px;}
/*显示*/
.m-layer.z-show{display:block;}元件--提供各种常见的网页内容元件，比如按钮、标题、输入框等
（1）代码展示
①通用自定义按钮②通用自定义按钮组合③标题文字④简易单行文本输入框⑤下拉式菜单
⑥水平进度条
<div class="u-progress"><span class="pgbar" style="width:50%;"></span></div>
<div class="u-progress u-progress-c1"><span class="pgbar" style="width:30%;"></span></div>
<div class="u-progress u-progress-c2"><span class="pgbar" style="width:60%;"></span></div>
<div class="u-progress u-progress-c3"><span class="pgbar" style="width:90%;"></span></div>
<div class="u-progress u-progress-c3"><span class="pgbar" style="width:20%;"><span class="pging"></span></span></div>
<div class="u-progress"><span class="pgbar"><span class="pging"></span></span></div>/*水平进度条--默认蓝色*/
.u-progress{
width:200px;
height:12px;
overflow:hidden;
border-radius:3px;
box-shadow:inset 0 1px 1px rgba(0,0,0,0.2);
background:#f7f7f7;
}
.u-progress .pgbar,.u-progress .pging{
display:block;
width:100%;
height:100%;
}
.u-progress .pgbar{
background:#3a9ed8;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#6fbee5),to(#3a9ed8));
background:-webkit-linear-gradient(#6fbee5,#3a9ed8);
background:-moz-linear-gradient(#6fbee5,#3a9ed8);
background:-ms-linear-gradient(#6fbee5,#3a9ed8);
background:linear-gradient(#6fbee5,#3a9ed8);
-webkit-transition:width 0.5s linear;
-moz-transition:width 0.5s linear;
-ms-transition:width 0.5s linear;
transition:width 0.5s linear;
}
.u-progress .pging{
background:-webkit-gradient(linear,0% 0%,100% 100%,from(rgba(0,0,0,0)),to(rgba(255,255,255,0.2)),color-stop(25%,rgba(0,0,0,0)),color-stop(25%,rgba(255,255,255,0.2)),color-stop(50%,rgba(0,0,0,0)),color-stop(75%,rgba(0,0,0,0)),color-stop(75%,rgba(255,255,255,0.2)));
background:-webkit-linear-gradient(-45deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 75%,rgba(255,255,255,0.2) 75%,rgba(255,255,255,255,0.2));
background:-moz-linear-gradient(-45deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(255,255,255,255,0.2) 25%,rgba(255,255,255,255,0.2) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 75%,rgba(255,255,255,255,0.2) 75%,rgba(255,255,255,255,0.2));
background:-ms-linear-gradient(-45deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(255,255,255,0.2) 25%,rgba(255,255,255,0.2) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 75%,rgba(255,255,255,255,0.2) 75%,rgba(255,255,255,0.2));
background:linear-gradient(-45deg,rgba(0,0,0,0) 0,rgba(0,0,0,0) 25%,rgba(255,255,255,255,0.2) 25%,rgba(255,255,255,255,0.2) 50%,rgba(0,0,0,0) 50%,rgba(0,0,0,0) 75%,rgba(255,255,255,255,0.2) 75%,rgba(255,255,255,255,0.2));
-webkit-background-size:30px 30px;
-moz-background-size:30px 30px;
-ms-background-size:30px 30px;
background-size:30px 30px;
-webkit-animation:pging 1s linear infinite;
-moz-animation:pging 1s linear infinite;
-ms-animation:pging 1s linear infinite;
animation:pging 1s linear infinite;
}
@-webkit-keyframes pging{0%{background-position:0 0;}100%{background-position:30px 0;}}
@-moz-keyframes pging{0%{background-position:0 0;}100%{background-position:30px 0;}}
@-ms-keyframes pging{0%{background-position:0 0;}100%{background-position:30px 0;}}
@keyframes pging{0%{background-position:0 0;}100%{background-position:30px 0;}}
/*较佳，绿色*/
.u-progress-c1 .pgbar{
background:#50b050;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#69c769),to(#50b050));
background:-webkit-linear-gradient(#69c769,#50b050);
background:-moz-linear-gradient(#69c769,#50b050);
background:-ms-linear-gradient(#69c769,#50b050);
background:linear-gradient(#69c769,#50b050);
}
/*中等，黄色*/
.u-progress-c2 .pgbar{
background:#f8960b;
background:-webkit-gradient(linear,0% 0%,0% 100%,from(#fbb24c),to(#f8960b));
background:-webkit-linear-gradient(#fbb24c,#f8960b);
background:-moz-linear-gradient(#fbb24c,#f8960b);
background:-ms-linear-gradient(#fbb24c,#f8960b);
background:linear-gradient(#fbb24c,#f8960b);
}
/*较差，红色*/
.u-progress-c3 .pgbar{
background:#cc1c23;
background:-webkit-linear-gradient(linear,0% 0%,0% 100%,from(#f0232b),to(#cc1c23));
background:-webkit-linear-gradient(#f0232b,#cc1c23);
background:-moz-linear-gradient(#f0232b,#cc1c23);
background:-ms-linear-gradient(#f0232b,#cc1c23);
background:linear-gradient(#f0232b,#cc1c23);
}⑦无边图片容器（可定宽定高、图片拉伸或高度自动等）
<span class="u-img"><a href="#"><img src="img/1.jpg" alt=""></a></span>
<a href="#" class="u-img"><img src="img/1.jpg" alt=""></a>
<span class="u-img u-img-ha"><a href="#"><img src="img/1.jpg" alt=""></a></span>/*无边图片容器--默认定宽定高*/
.u-img{display:block;position:relative;width:110px;height:110px;}
.u-img,.u-img img{border-radius:5px;}
.u-img img{display:block;width:100%;height:100%;}
/*图片高适应*/
.u-img-ha,.u-img-ha img{height:auto;}⑧有边图片容器（可定宽定高、图片拉伸或高度自动等）
<span class="u-pointer"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>
<span class="u-pointer u-pointer-rt"><i class="z-crt"></i><i></i><i></i><i></i><i></i></span>/*多点式幻灯指示控制器--默认底部居中*/
.u-pointer{position:absolute;bottom:10px;left:0;right:0;z-index:50;text-align:center;line-height:0;}
.u-pointer i{display:inline-block;width:10px;height:10px;margin:0 0 0 5px;border-radius:50%;box-shadow:inset 0 1px 0 rgba(0,0,0,0.5);cursor:pointer;background:#ccc;}
.u-pointer i:first-child{margin-left:0;}
.u-pointer i:hover{background:#999;}
.u-pointer i.crt{background:#40a1d9;}
/*居右*/
.u-pointer-rt{right:10px;left:auto;}BUG--展示了游览器的BUG及其解决方案，比如IE双倍边距、3像素问题等
（1）代码展示
①通用自定义按钮②IE67中定位元素溢出不动③IE6中绝对定位1像素偏差④IE6中定位元素消失⑤IE6中浮动双边距⑥IE6中浮动3像素空隙⑦IE67中表单元素偏离⑧IE67中图片链接无效
技巧--提供各种较难或特殊设计的解决技巧，比如垂直居中、自适应等
（1）代码展示
①两栏三栏自适应布局--常见两栏三栏自适应布局
<!--两栏布局 主栏左 侧栏右-->
<div class="g-hd">
<div class="g-mn1">
<div class="g-mnc1">
<p>主栏1内容区</p>
</div>
</div>
<div class="g-sd1">
<p>侧栏1内容区</p>
</div>
</div>
<!-- 两栏布局 主栏右 侧栏左-->
<div class="g-bd">
<div class="g-mn2">
<div class="g-mnc2">
<p>主栏2内容区</p>
</div>
</div>
<div class="g-sd2">
<p>侧栏2内容区</p>
</div>
</div>
<!--三栏布局 主栏右 两侧栏左-->
<div class="g-bd">
<div class="g-mn4">
<div class="g-mnc4">
<div class="g-mn5">
<div class="g-mnc5">
<p>主栏5内容区</p>
</div>
</div>
<div class="g-sd5">
<p>侧栏5内容区</p>
</div>
</div>
</div>
<div class="g-sd4">
<p>侧栏4内容区</p>
</div>
</div>
<!--三栏布局 主栏中 两侧栏分居左右-->
<div class="g-bd">
<div class="g-mn3">
<div class="g-mnc3">
<p>主栏3内容区</p>
</div>
</div>
<div class="g-sd3a">
<p>侧栏a内容区</p>
</div>
<div class="g-sd3b">
<p>侧栏b内容区</p>
</div>
</div>/*两栏三栏自适应布局*/
/*两栏布局 主栏左 侧栏右*/
.g-mn1{float:left;width:100%;margin-right:-200px;}
.g-mnc1{margin-right:210px;}
.g-sd1{float:right;width:200px;}
/*两栏布局 主栏右 侧栏左*/
.g-mn2{float:right;width:100%;margin-left:-200px;}
.g-mnc2{margin-left:210px;}
.g-sd2{float:left;width:200px;}
/*三栏布局 主栏右 两侧栏左*/
.g-mn3{float:right;width:100%;margin-left:-520px;}
.g-mnc3{margin-left:520px;}
.g-sd3a{float:left;width:300px;margin-right:10px;}
.g-sd3b{float:left;width:200px;}
/*三栏布局 主栏中 两侧栏分居左右*/
.g-mn4{float:right;width:100%;margin-left:-200px;}
.g-mnc4{margin-left:210px;}
.g-sd4{float:left;width:200px;}
.g-mn5{float:left;width:100%;margin-right:-200px;}
.g-mnc5{margin-right:210px;}
.g-sd5{float:right;width:200px;}②全屏自适应布局--全屏自适应布局，适用于管理或工具类型页面
<div class="g-hd">
</div>
<div class="g-sd">
</div>
<div class="g-mn">
</div>
<div class="g-ft">
</div>/*全局自适应布局*/
html,body{width:100%;height:100%;overflow:hidden;margin:0;}
html{_height:auto;_padding:100px 0 50px;}
.g-hd,.g-sd,.g-mn,.g-ft{position:absolute;left:0;}
.g-hd,.g-ft{width:100%;}
.g-sd,.g-mn{top:100px;bottom:50px;_height:100%;overflow:auto;}
.g-hd{top:0;height:100px;}
.g-sd{width:300px;}
.g-mn{_position:relative;left:300px;right:0;_top:0;_left:0;_margin-left:300px;}
.g-ft{bottom:0;height：50px;}③底部自适应文档和窗口--底部自适应文档和窗口，当文档较短时在窗口底部
<div class="g-doc">
<div class="g-bd">
<p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
<p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
<p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
<p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
<p>请增加或减少内容，或改变窗口大小，以便查看效果。</p>
</div>
</div>
<div class="g-ft">
<p>底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。</p>
</div>/*底部自适应文档和窗口*/
html,body{width:100%;height:100%;margin:0;}
.g-doc{position:relative;min-height:100%;_height:100%;}
.g-bd{padding:0 0 60px;zoom:1;}
.g-ft{height:50px;margin:-50px 0 0;background:#ddd;}④图片居中溢出隐藏--实现不同尺寸的图片水平垂直居中，且溢出隐藏
<div class="m-demo">
<p>
<img src="img/1.jpg" class="hidden"/>
<img src="img/1.jpg" alt=""/>
</p>
</div>
<div class="m-demo">
<p>
<img src="img/1.jpg" class="hidden"/>
<img src="img/1.jpg" alt=""/>
</p>
</div>
<div class="m-demo">
<p>
<img src="img/1.jpg" class="hidden"/>
<img src="img/1.jpg" alt=""/>
</p>
</div>/*图片居中溢出隐藏*/
.m-demo{position:relative;width:300px;height:300px;overflow:hidden;border:1px solid #ddd;}
.m-demo p{position:absolute;top:50%;left:50%;margin:0;padding:0;}
.m-demo img{position:absolute;top:-50%;left:-50%;display:block;}
.m-demo img.hidden{visibility:hidden;position:static;}⑤底部对齐列表--未知每项宽高的水平列表底部对齐，依赖reset
<ul class="m-demo">
<li>this is content</li>
<li><img style="width:50px;height:50px;" src="img/1.jpg"/><br>title</li>
<li><img style="width:70px;height:30px;" src="img/1.jpg"/><br>title</li>
<li>aaaa</li>
<li>bbbbb<br>cccccc</li>
<li><img style="width:70px;height:80px;" src="img/1.jpg"/><br>title</li>
<li><img style="width:60px;height:30px;" src="img/1.jpg"/><br>title</li>
<li>aaaaaaaaaaaaaaaaa</li>
<li><img style="width:100px;height:70px;" src="img/1.jpg"/><br>title</li>
<li>bbbbbbb<br>cccccccc<br>ddddddddddddd</li>
</ul>/*底部对齐列表*/
.m-demo{width:510px;background:#dfedf0;margin:0;padding:0;font-size:0;letter-spacing:-0.307em;*letter-spacing:normal;*word-spacing:-1px;}
.m-demo li{display:inline-block;*zoom:1;*display:inline;margin:10px;vertical-align:bottom;font-size:12px;letter-spacing:normal;word-spacing:normal;color:#333;border:1px solid #ccc;}⑥前自适应后跟随--文本自动换行，且不会把右边的时间挤掉，修改这段文字长度或改变窗口宽度试试，依赖于function
<div class="m-demo f-cb">
<div class="cnt">这是一段长度未知的文本，自动换行，且不会把右边的时间挤掉，修改这段文字长度或改变窗口宽度试试。</div>
<div class="date">2009-08-08</div>
</div>/*前自适应后跟随*/
.m-demo{padding:5px 0;border-bottom:1px solid #ddd;font-size:12px;}
.m-demo .cnt{float:left;margin-right:80px;}
.m-demo .date{display:inline;float:left;margin-left:-70px;}⑦四周不留白列表--四周不留白列表，依赖于reset
<div class="m-demo">
<ul>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"/></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
</ul>
</div>
<div class="m-demo m-demo-1">
<ul>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
</ul>
</div>
<div class="m-demo m-demo-2">
<ul>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
<li>
<div class="cnt">
<div class="img"><a href="#"><img src="img/3.jpg"></a></div>
<div class="txt">
<h3><a href="#">标题标题标题</a></h3>
<p>内容说明内容说明内容说明内容说明内容说明</p>
</div>
</div>
</li>
</ul>
</div>.m-demo:after,.m-demo li .cnt:after{display:block;clear:both;visibility:hidden;height:0;overflow:hidden;content:".";}
.m-demo,.m-demo li .cnt{zoom:1;}
.m-demo{width:640px;margin:0 0 1em;overflow:hidden;background:#dfedf0;}
.m-demo ul{padding:0;margin:0 0 1em;overflow:hidden;background:#dfedf0;}
.m-demo li{padding:10px 0;border-top:1px dashed #999;}
.m-demo .img{float:left;width:100px;height:100px;padding:5px;border:1px solid #ccc;margin-right:-112px;background:#eee;}
.m-demo .img img,.m-demo .img a{display:block;width:100px;height:100px;}
.m-demo .txt{line-height:18px;color:#666;margin-left:122px;}
.m-demo .txt h3{margin:0 0 3px;font-size:14px;}
.m-demo .txt a,.m-demo .txt a:hover{color:#f60;}
.m-demo .txt p{font-size:12px;margin:0;}
/*横向左图右文*/
.m-demo-1 ul{margin:-20px 0 0 -20px;}
.m-demo-1 li{float:left;display:inline;width:200px;overflow:hidden;margin:1px 0 -11px;padding:20px 0 10px 20px;border-top:none;border-bottom:1px dashed #999;}
/*横向上图下文*/
.m-demo-2 ul{margin:-20px 0 0 -20px;}
.m-demo-2 li{float:left;display:inline;width:112px;padding:0;border:none;margin:20px 0 0 20px;overflow:hidden;}
.m-demo-2 .img{float:none;}
.m-demo-2 .txt{margin:6px 0 0 0;}⑧选框与文本对齐--单选框radio和复选框checkbox与文本对齐
<div style="margin-bottom:1em;line-height:18px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:18px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:18px;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:20px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:20px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:30px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:18px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:18px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:18px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:20px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:20px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;">
<div style="background:#dfedf0;height:30px;"><input type="radio">单选框line-height:30px;height:30px;</div>
<div style="background:#ddd;height:30px;"><input type="checkbox">复选框line-height:30px;height:30px;</div>
</div>
<div style="margin-bottom:1em;line-height:18px;font-size:14px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:18px;font-size:14px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:18px;font-size:14px;;</div>
</div>
<div style="margin-bottom:1em;line-height:20px;font-size:16px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:20px;font-size:16px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:20px;font-size:16px;</div>
</div>
<div style="margin-bottom:1em;line-height:30px;font-size:16px;">
<div style="background:#dfedf0;"><input type="radio">单选框line-height:30px;font-size:16px;</div>
<div style="background:#ddd;"><input type="checkbox">复选框line-height:30px;font-size:16px;</div>
</div> /*选框与文本对齐*/
input{position:relative;*top:1px;margin:0 4px 0 0;*margin:0 0 0 -4px;}⑨定制文件上传按钮--定制文件上传(type=file)按钮
<div class="u-upload">
<button type="button">上传文件</button>
<input type="file"/>
</div>
<span class="u-upload">
<button type="button">上传文件</button>
<input type="file"/>
</span>
<a href="#" class="u-upload">
<button type="button">上传文件</button>
<input type="file"/>
</a>
<a href="#" class="u-upload">
<button type="button">上传</button>
<input type="file"/>
</a>/*定制文件上传按钮*/
.u-upload{display:inline-block;*display:inline;*zoom:1;position:relative;overflow:hidden;}
.u-upload button{height:32px;padding:0 10px;border:1px solid #ccc;overflow:visible;font-size:14px;color:#666;background:#ddd;}
.u-upload input{position:absolute;top:0;right:-1px;font-size:100px;cursor:pointer;opacity:0;filter:alpha(opacity=0);}
.u-upload:hover button{border-color:#bbb;color:#333;background:#ccc;}
a.u-upload,a.u-upload:hover{text-decoration:none;}⑩表头固定内容滚动的表格--无缝边框，仅内容区可滚动，最后列需宽度自动，依赖于reset
<div class="m-demo">
<table>
<thead>
<tr><th>定宽a</th><th>定宽b</th><th>定宽c</th><th class="last">最后列不定宽d</th></tr>
</thead>
</table>
<div class="scroll">
<table>
<tbody>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
<tr class="first"><td class="first">定宽a</td><td>定宽b</td><td>定宽c</td><td>最后列不定宽d</td></tr>
</tbody>
</table>
</div>
</div>/*表头固定内容滚动的表格*/
.m-demo{margin:0 0 20px;line-height:18px;}
.m-demo .scroll{max-height:116px;border:1px solid #ddd;border-top:0;overflow-y:auto;}
.m-demo table{width:100%;table-layout:fixed;}
.m-demo th,.m-demo td{width:100px;padding:10px;border:1px solid #ddd;}
.m-demo th{font-weight:bold;background:#eee;}
.m-demo thead th:last-child,.m-demo tbody td:last-child{width:auto;}
.m-demo tbody tr:nth-child(2n){background:#fafafa;}
.m-demo tbody tr:first-child td{border-top:0;}
.m-demo tbody tr:last-child td{border-bottom:0;}
.m-demo tbody tr td:first-child{border-left:0;}
.m-demo tbody tr td:last-child{border-right:0;}⑪纯CSS3幻灯手风琴效果hover切换【高级】--可选择是否初始展开某项，依赖于reset
<ul class="m-demo">
<li><a href="#"><img src="img/m/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/5.jpg" alt=""/></a></li>
</ul>
<ul class="m-demo m-demo-1">
<li><a href="#"><img src="img/m/1.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/2.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/3.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/4.jpg" alt=""/></a></li>
<li><a href="#"><img src="img/m/5.jpg" alt=""/></a></li>
</ul>/*纯CSS3幻灯手风琴效果hover切换，默认初始收起*/
.m-demo{width:600px;height:250px;overflow:hidden;}
.m-demo li{float:left;width:120px;height:100%;box-shadow:0 0 5px rgba(0,0,0,0.5);-webkit-transition:width 0.5s ease-out;-moz-transition:width 0.5s ease-out;-ms-transition:width 0.5s ease-out;transition:width 0.5s ease-out;}
.m-demo:hover li:not(:hover){width:50px;}
.m-demo li:hover{width:400px;}
/*初始展开*/
.m-demo-1 li{width:50px;}
.m-demo-1 li:first-child{width:400px;}⑫纯CSS3点控式幻灯hover切换【高级】--通过点式控制器hover切换，依赖于reset
<ul class="m-demo">
<li></li>
<li><a href="#"><img src="img/1.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="img/2.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="img/3.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="img/4.jpg" alt=""/></a></li>
<li></li>
<li></li>
<li><a href="#"><img src="img/5.jpg" alt=""/></a></li>
</ul>/*纯CSS3点控式幻灯hover切换*/
.m-demo{position:relative;width:400px;height:250px;overflow:hidden;}
.m-demo li:nth-child(3n-1){position:absolute;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);
-webkit-transition:transform 0.5s ease-out,opacity 0.5s ease-out;-moz-transition:transfrom 0.5s ease-out,opacity 0.5s ease-out;-ms-transition:transform 0.5s ease-out,opacity 0.5s ease-out;}
.m-demo:hover li:nth-child(3n-1){opacity:0;-webkit-transform:scale(1.2);-moz-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2);}
.m-demo li:nth-child(2),
.m-demo li:nth-child(3n-1):hover,
.m-demo li:nth-child(3n+1):hover + li {z-index:2;opacity:1;-webkit-transform:scale(1);-moz-transform:scale(1);-ms-transform:scale(1);transform:scale(1);}
.m-demo li:nth-child(3n+1),
.m-demo li:nth-child(3n){position:relative;z-index:5;float:left;width:10px;height:10px;margin:235px 0 0 5px;border-radius:50%;}
.m-demo li:nth-child(3n+1),
.m-demo:hover li:nth-child(3n+1){box-shadow:inset 0 1px 1px rgba(0,0,0,0.5);background:rgba(0,0,0,0.2);}
.m-demo li:nth-child(3n){z-index:4;margin-left:-10px;}
.m-demo li:first-child{margin-left:325px;}
.m-demo li:first-child,
.m-demo li:nth-child(3n+1):hover,
.m-demo li:nth-child(3n-1):hover + li {box-shadow:inset 0 1px 1px rgba(0,0,0,0.5);background:rgba(255,255,0,0.8);}
.m-demo li:nth-child(3n-1):hover + li {z-index:6;}动画--使用CSS实现的各种常见动画效果，比如淡入淡出、弹出等
（1）代码展示
①淡入淡出;②从下淡入效果;③从上淡入效果；④从左淡入效果；⑤从右淡入效果；⑥淡出效果；⑦向下淡出效果；⑧向上淡出效果；⑨向左淡出效果；⑩向右淡出效果；⑪弹入效果；⑫从下弹入效果；⑬从上弹入效果；⑭从左弹入效果；⑮从右弹入效果；⑯弹出效果；⑰向上弹出效果；⑱向下弹出效果；⑲向左弹出效果；⑳向右弹出效果；转入效果；从左下方转入效果；从左上方转入效果；从右下方转入效果；从右上方转入效果；转出效果；从左上方转出效果；从左下方转出效果；从右上方转出效果；从右上方转出效果；翻转效果；沿横轴翻入效果；沿横轴翻出效果；沿纵轴翻入效果；沿纵轴翻出效果；闪烁效果；弹跳效果；震颤效果；摇摆效果；摇晃效果；震铃效果。