标题
×默认固定居中，有遮罩，按钮区标题都可删
内容区：其他模块
转载/NEC:更好的CSS样式解决方案之五/代码库
前言：特色功能Nice+Easy=Better，读规范，让你的代码更具智慧和美丽的方法用框架，选择一份合适的HTML和CSS基础代码找代码，在这里找到她，或给你启发，或她就是你的装插件，帮助你快速有效的使用代码库。
代码库
这里有各种常见布局、模块、技巧等代码，在这里找到她，或给你启发，或她就是你的。为满足产品对不同的平台和设备的要求，NEC代码库中的代码开发使用了三种版本：兼容、优雅、高级，以下为对这三个版本的详细说明。
兼容【1】：支持包括IE6在内的所有主流游览器和设备，UI效果可能有所退化。
优雅【2】：在高级游览器中有“高级”效果，在低级游览器中有“兼容”效果，是高级版的“优雅退化”，也是兼容版的“渐进增强”。
高级【3】：支持IE9+、Chrome、Safari、Firefox等主流游览器，支持移动设备和所有智能系统，具有优越的UI效果。
布局--提供各种常见的页面布局方法，比如定宽布局、自适应布局等
（1）代码展示
①两列右侧自适应布局
左侧定宽
右侧自适应
/*两列右侧自适应布局*/
.g-bd1{margin:0 0 10px;}
.g-sd1{position:relative;float:left;width:190px;margin-right:-190px;}
.g-mn1{float:right;width:200px;}②两列左侧自适应布局
左侧自适应
右侧定宽
.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;}③两列定宽布局
左侧定宽
右侧定宽
/*两列定宽布局*/
.g-bd{width:950px;margin:0 auto;}
.g-sd{float:right;width:230px;}
.g-mn{float:left;width:710px;}④三列中间自适应布局
左侧定宽
中间自适应
右侧定宽
/*三列中间自适应布局*/
.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;}⑤三列左侧自适应布局
左侧自适应
右侧定宽
右侧定宽
/*三列左侧自适应布局*/
.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;}⑥三列右侧自适应布局
左侧定宽
左侧定宽
右侧自适应
/*三列右侧自适应布局*/
.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）代码展示
①文本型圆角背景导航
②多行式面包屑导航
/* 多行式面包屑导航-默认竖线分隔 */
.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的模块头部⑨简易表单⑩简易数据表格
⑪简易翻页器
/*普通翻页器-默认居中*/
.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;}⑫单片式幻灯
/*单片式幻灯--默认淡入淡出*/
.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%;}
⑬操作性弹出浮层
/*操作型弹出浮层*/
.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）代码展示
①通用自定义按钮②通用自定义按钮组合③标题文字④简易单行文本输入框⑤下拉式菜单
⑥水平进度条
/*水平进度条--默认蓝色*/
.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);
}⑦无边图片容器（可定宽定高、图片拉伸或高度自动等）
/*无边图片容器--默认定宽定高*/
.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;}⑧有边图片容器（可定宽定高、图片拉伸或高度自动等）
/*多点式幻灯指示控制器--默认底部居中*/
.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）代码展示
①两栏三栏自适应布局--常见两栏三栏自适应布局
主栏1内容区
侧栏1内容区
主栏2内容区
侧栏2内容区
主栏5内容区
侧栏5内容区
侧栏4内容区
主栏3内容区
侧栏a内容区
侧栏b内容区
/*两栏三栏自适应布局*/
/*两栏布局 主栏左 侧栏右*/
.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;}②全屏自适应布局--全屏自适应布局，适用于管理或工具类型页面
/*全局自适应布局*/
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;}③底部自适应文档和窗口--底部自适应文档和窗口，当文档较短时在窗口底部
请增加或减少内容，或改变窗口大小，以便查看效果。
请增加或减少内容，或改变窗口大小，以便查看效果。
请增加或减少内容，或改变窗口大小，以便查看效果。
请增加或减少内容，或改变窗口大小，以便查看效果。
请增加或减少内容，或改变窗口大小，以便查看效果。
底部始终在文档末尾，当文档较长时跟随在文档末尾，当文档较短时在窗口底部。
/*底部自适应文档和窗口*/
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;}④图片居中溢出隐藏--实现不同尺寸的图片水平垂直居中，且溢出隐藏
/*图片居中溢出隐藏*/
.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
- this is content
title
title- aaaa
- bbbbb
cccccc
title
title- aaaaaaaaaaaaaaaaa
title- bbbbbbb
cccccccc
ddddddddddddd
/*底部对齐列表*/
.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
这是一段长度未知的文本，自动换行，且不会把右边的时间挤掉，修改这段文字长度或改变窗口宽度试试。
2009-08-08
/*前自适应后跟随*/
.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
.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与文本对齐
单选框line-height:18px;
复选框line-height:18px;
单选框line-height:20px;
复选框line-height:20px;
单选框line-height:30px;
复选框line-height:30px;
单选框line-height:18px;height:30px;
复选框line-height:18px;height:30px;
单选框line-height:20px;height:30px;
复选框line-height:20px;height:30px;
单选框line-height:30px;height:30px;
复选框line-height:30px;height:30px;
单选框line-height:18px;font-size:14px;
复选框line-height:18px;font-size:14px;;
单选框line-height:20px;font-size:16px;
复选框line-height:20px;font-size:16px;
单选框line-height:30px;font-size:16px;
复选框line-height:30px;font-size:16px;
/*选框与文本对齐*/
input{position:relative;*top:1px;margin:0 4px 0 0;*margin:0 0 0 -4px;}⑨定制文件上传按钮--定制文件上传(type=file)按钮
/*定制文件上传按钮*/
.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
定宽a 定宽b 定宽c 最后列不定宽d
定宽a 定宽b 定宽c 最后列不定宽d 定宽a 定宽b 定宽c 最后列不定宽d 定宽a 定宽b 定宽c 最后列不定宽d 定宽a 定宽b 定宽c 最后列不定宽d 定宽a 定宽b 定宽c 最后列不定宽d 定宽a 定宽b 定宽c 最后列不定宽d
/*表头固定内容滚动的表格*/
.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
/*纯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
/*纯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）代码展示
①淡入淡出;②从下淡入效果;③从上淡入效果；④从左淡入效果；⑤从右淡入效果；⑥淡出效果；⑦向下淡出效果；⑧向上淡出效果；⑨向左淡出效果；⑩向右淡出效果；⑪弹入效果；⑫从下弹入效果；⑬从上弹入效果；⑭从左弹入效果；⑮从右弹入效果；⑯弹出效果；⑰向上弹出效果；⑱向下弹出效果；⑲向左弹出效果；⑳向右弹出效果；转入效果；从左下方转入效果；从左上方转入效果；从右下方转入效果；从右上方转入效果；转出效果；从左上方转出效果；从左下方转出效果；从右上方转出效果；从右上方转出效果；翻转效果；沿横轴翻入效果；沿横轴翻出效果；沿纵轴翻入效果；沿纵轴翻出效果；闪烁效果；弹跳效果；震颤效果；摇摆效果；摇晃效果；震铃效果。