CSS3与页面布局学习总结（二）——Box Model、边距折叠、内联与块标签、CSSReset

一、盒子模型（Box Model）

盒子模型也有人称为框模型，HTML中的多数元素都会在浏览器中生成一个矩形的区域，每个区域包含四个组成部分，从外向内依次是：外边距（Margin）、边框（Border）、内边距（Padding）和内容（Content），其实盒子模型有两种，分别是 ie 盒子模型和标准 w3c 盒子模型，加上了doctype声明，让所有浏览器都会采用标准 w3c 盒子模型去解释你的盒子。当设置一个元素的样式如下：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型</title>
<styletype="text/css">#box{width:100px;height:100px;margin:20px;padding:20px;border:10px solid blue;
}
</style>
</head>
<body>
<divid="box">Box Model</div>
</body>
</html>

运行结果：

1.1、宽度测试

计算最大宽度，示例如下：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型</title>
<styletype="text/css">#box{width:800px;padding:10px;border:5px solid blue;margin:10px;
}.sbox{display:inline-block;padding:10px;  margin:10px;   border:solid 10px coral;background:lightblue;width:?;
}
</style>
</head>
<body>
<divid="box">
<divclass="sbox">Left</div><divclass="sbox">Right</div>
</div>
</body>
</html>

要达到如下效果，请求?处最大可以设置为多少像素？

答案：

340px

View Code

1.2、溢出测试

代码如下：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型</title>
<styletype="text/css">#box{width:800px;padding:10px;border:5px solid blue;margin:10px;height:100px;
}#box #innerBox{background:lightblue;height:50px;width:100%;padding:10px;margin:10px;border:10px solid lightcoral;
}
</style>
</head>
<body>
<divid="box">
<divid="innerBox">innerBox</div>
</div>
</body>
</html>

请问运行时innerBox是否会超出box，如果会，超出多少？

可见部分=850-815=35，还有10个margin不可见，45px

View Code

如果不想让innerBox超出，则应该删除其100%的宽度设置，去掉width:100%，一般不要设置，多此一举。

1.3、box-sizing属性

设置或检索对象的盒模型组成模式

content-box： padding和border不被包含在定义的width和height之内。对象的实际宽度等于设置的width值和border、padding之和，即 ( Element width = width + border + padding，但占有页面位置还要加上margin ) 此属性表现为标准模式下的盒模型。

示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型</title>
<styletype="text/css">#box{width:100px;height:100px;padding:10px;border:10px solid blue;margin:10px;
}
</style>
</head>
<body>
<divid="box">Box Model</div>
</body>
</html>

运行结果：

因为默认就是为content-box所以这里没有直接设置，占用宽度为160px;

border-box： padding和border被包含在定义的width和height之内。对象的实际宽度就等于设置的width值，即使定义有border和padding也不会改变对象的实际宽度，即 ( Element width = width ) 此属性表现为怪异模式下的盒模型。

示例代码：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型</title>
<styletype="text/css">#box{width:100px;height:100px;padding:10px;border:10px solid blue;margin:10px;box-sizing:border-box;  /*在上一个例子中添加的*/
}
</style>
</head>
<body>
<divid="box">Box Model</div>
</body>
</html>

运行结果：

当box-sizing: border-box时的宽度设置会包含border与padding，但不包含margin，但margin也会占用位置。

1.4、利用CSS画图

示例代码：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>盒子模型 - 三角形</title>
<styletype="text/css">#box{width:0;height:0;border:100px solid blue;border-color:blue transparent transparent transparent;
/*设置边线的颜色，transparent表示透明的颜色，按上右下左的顺时钟方向*/
}
</style>
</head>
<body>
<divid="box">
</div>
</body>
</html>

运行结果：

心形：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<style>#heart{position:relative;width:100px;height:90px;
}#heart:after,#heart:before{position:absolute;content:"";left:50px;top:0;width:50px;height:80px;background:red;border-radius:50px 50px 0px 0px;transform:rotate(-45deg);transform-origin:0 100%;
}#heart:after{left:0;transform:rotate(45deg);transform-origin:100% 100%;
}
</style>
</head>
<body>
<divid="heart">
</div>
</body>
</html>

运行结果：

二、边距折叠

2.1、概要

外边距折叠：相邻的两个或多个外边距 (margin) 在垂直方向会合并成一个外边距（margin）
相邻：没有被非空内容、padding、border 或 clear 分隔开的margin特性. 非空内容就是说这元素之间要么是兄弟关系或者父子关系，如：

示例代码：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">#div1{border:3px solid blue;height:200px;background:lightcoral;
}#div2{height:100px;background:lightgreen;margin-top:20px;
}#div3{height:50px;width:50%;background:lightblue;margin-top:20px;
}
</style>
</head>
<body>
<divid="div1">
<divid="div2">
<divid="div3">
</div>
</div>
</div>
</body>
</html>

运行结果：

因为div2与div3的外边距是相邻的（是父子关系的相邻），当div2 margin-top为20,div3的margin-top也为20,此时div2与div3的外边距会合并，就是折叠。

如果想让div3的margin-top生效，可以破坏相邻的限制，示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title></title>
<styletype="text/css">#div1{border:3px solid blue;height:200px;background:lightcoral;
}#div2{height:100px;background:lightgreen;margin-top:20px;border:1px solid green;
}#div3{height:50px;width:50%;background:lightblue;margin-top:20px;
}
</style>
</head>
<body>
<divid="div1">
<divid="div2">
<divid="div3">
</div>
</div>
</div>
</body>
</html>

View Code

运行结果：

2.2、垂直方向外边距合并计算

a)、参加折叠的margin都是正值：取其中 margin 较大的值为最终 margin 值。

示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>边距折叠</title>
</head>
<body>
<divstyle="height:90px; margin-bottom:99px; width:90px; background-color: red;">X</div>
<divstyle="height:90px; margin-top:100px; width:90px; background-color: blue;">Y</div>
</body>
</html>

运行结果：

b)、参与折叠的 margin 都是负值：取的是其中绝对值较大的，然后，从 0 位置，负向位移。
示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>边距折叠</title>
</head>
<body>
<divstyle="height:90px; margin-bottom:-10px; width:90px; background-color: red;">X</div>
<divstyle="height:90px; margin-top:-30px;width:70px; background-color: blue;">Y</div>
</body>
</html>

结果：

c)、参与折叠的 margin 中有正值，有负值：先取出负 margin 中绝对值中最大的，然后，和正 margin 值中最大的 margin 相加。
示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>参与折叠的 margin 中有正值，有负值</title>
</head>
<body>
<divstyle="height:90px; margin-bottom:-30px; width:90px; background-color: red;">X</div>
<divstyle="height:90px; margin-top:30px;width:70px; background-color: blue;">Y</div>
</body>
</html>

运行结果：

三、内联与块级标签

3.1、行内标签与块标签区别

html中的标签默认主要分为两大类型，一类为块级元素，另一类是行内元素，许多人也把行内称为内联，所以叫内联元素，其实就是一个意思。为了很好的布局，必须理解它们间的区别，区别如下：

常用块级与内联元素：

内联元素（行内元素）内联元素(inline element)
a-超链接
abbr-缩写
acronym-首字
bdo-bidi override
big-大字体
br-换行
cite-引用
code-计算机代码(在引用源码的时候需要)
dfn-定义字段
em-强调
i-斜体
img-图片
input-输入框
kbd-定义键盘文本
label-表格标签
q-短引用
samp-定义范例计算机代码
select-项目选择
small-小字体文本
span-常用内联容器，定义文本内区块
strike-中划线
strong-粗体强调
sub-下标
sup-上标
textarea-多行文本输入框
tt-电传文本
u-下划线var -定义变量
块元素(block element)
address-地址
blockquote-块引用
center-举中对齐块
dir-目录列表
div-常用块级容易，也是css layout的主要标签
dl-定义列表
fieldset-form控制组
form-交互表单
h1-大标题
h2-副标题
h3-3级标题
h4-4级标题
h5-5级标题
h6-6级标题
hr-水平分隔线
isindex-input prompt
menu-菜单列表
noframes-frames可选内容，（对于不支持frame的浏览器显示此区块内容
noscript-）可选脚本内容（对于不支持script的浏览器显示此内容）
ol-排序表单
p-段落
pre-格式化文本
table-表格
ul-非排序列表
可变元素，可变元素为根据上下文语境决定该元素为块元素或者内联元素。
applet-java applet
button-按钮
del-删除文本
iframe-inline frame
ins-插入的文本
map-图片区块(map)
object-object对象
script- 客户端脚本

View Code

行内标签与块标签特性示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>块级标签与行内标签</title>
<styletype="text/css">#div1,
#div2{background:lightblue;
}span{width:100px;
/*无效*/height:20px;
/*无效*/margin:20px;
/*水平方向有效，垂直方向无效*/padding:20px;
/*水平方向有效，垂直方向无效*/
}#div3{width:500px;border:1px solid #ADD8E6;word-break:break-all;
}
</style>
</head>
<body>
<h2>块级标签与行内标签</h2>
<divid="div1">div1</div>
<divid="div2">div2</div>
<divid="div3">
<spanid="span1">span1</span>
<spanid="span2">span2</span>
<spanid="span3">span3</span>
<spanid="span4">spanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspanspan4</span>
</div>
</body>
</html>

运行结果：

使用display设置元素的显示方式

语法如下：

none：隐藏对象。与visibility属性的hidden值不同，其不为被隐藏的对象保留其物理空间
inline：指定对象为内联元素。
block：指定对象为块元素。
list-item：指定对象为列表项目。
inline-block：指定对象为内联块元素。（CSS2）
table：指定对象作为块元素级的表格。类同于html标签<table>（CSS2）
inline-table：指定对象作为内联元素级的表格。类同于html标签<table>（CSS2）
table-caption：指定对象作为表格标题。类同于html标签<caption>（CSS2）
table-cell：指定对象作为表格单元格。类同于html标签<td>（CSS2）
table-row：指定对象作为表格行。类同于html标签<tr>（CSS2）
table-row-group：指定对象作为表格行组。类同于html标签<tbody>（CSS2）
table-column：指定对象作为表格列。类同于html标签<col>（CSS2）
table-column-group：指定对象作为表格列组显示。类同于html标签<colgroup>（CSS2）
table-header-group：指定对象作为表格标题组。类同于html标签<thead>（CSS2）
table-footer-group：指定对象作为表格脚注组。类同于html标签<tfoot>（CSS2）
run-in：根据上下文决定对象是内联对象还是块级对象。（CSS3）
box：将对象作为弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
inline-box：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最老版本）（CSS3）
flexbox：将对象作为弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
inline-flexbox：将对象作为内联块级弹性伸缩盒显示。（伸缩盒过渡版本）（CSS3）
flex：将对象作为弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）
inline-flex：将对象作为内联块级弹性伸缩盒显示。（伸缩盒最新版本）（CSS3）

如果display设置为none，float及position属性定义将不生效；
如果position既不是static也不是relative或者float不是none或者元素是根元素，当display:inline-table时，display的计算值为table；当display:inline | inline-block | run-in | table-* 系时，display的计算值为block，其它情况为指定值；
IE6,7支持inline元素转换成inline-block，但不支持block元素转换成inline-block，所以非inline元素在IE6,7下要转换成inline-block，需先转换成inline，然后触发hasLayout，以此来获得和inline-block类似的效果；你可以这样：
全兼容的inline-block：

div {
display: inline-block;
*display: inline;
*zoom: 1;
}

3.2、隐藏

可以使用3种办法让元素隐藏：

a)、使用CSS的display:none，不会占有原来的位置

b)、使用CSS的visibility:hidden，会占有原来的位置

c)、使用HTML5中的新增属性hidden="hidden"，不会占有原来的位置

示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>隐藏</title>
<styletype="text/css">div{width:100px;height:100px;border:2px solid blue;margin:10px;font-size:30px;
}#div1{display:none;
}#div2{visibility:hidden;
}
</style>
</head>
<body>
<divid="div0">div0</div>
<divid="div1">div1</div>
<divid="div2">div2</div>
<divid="div3"hidden="hidden">div3</div>
<divid="div4">div4</div>
</body>
</html>

运行结果：

3.3、行内块标签

当元素的样式display为inline-block属性时就被设置成了行内块标签，同时拥有行内标签与块标签的特性，不再占整行；可以设置宽度，高度；padding与margin都有效。

示例：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>inline-block</title>
<styletype="text/css">div,span{width:100px;height:100px;border:2px solid blue;font-size:30px;display:inline-block;margin:10px;padding:10px;
}
</style>
</head>
<body>
<divid="div0">div0</div><divid="div1">div1</div><divid="div2">div2</div><divid="div3">div3</div><divid="div4">div4</div>
<p>
<span>span1</span><span>span2</span><span>span3</span>
</p>
</body>
</html>

运行结果：

3.4、菜单示例

使用display属性结合图片实现网页中的图片菜单：

<!DOCTYPE html>
<html>
<head>
<metacharset="UTF-8">
<title>menu</title>
<styletype="text/css">*{margin:0;padding:0;
}#menu{width:1004px;margin:0 auto;margin:10px;background:#348200;font-size:0px;background:url(img/menubg.jpg) repeat-x;height:49px;line-height:49px;
}#menu a{display:inline-block;width:96px;height:49px;line-height:49px;background:url(img/menu.jpg) no-repeat;color:white;font-size:13px;text-decoration:none;text-align:center;margin-right:1px;
}#menu a:hover{background-image:url(img/menunow.jpg);
}#divLeft{width:25px;height:49px;line-height:49px;background:url(img/menuleft.jpg) no-repeat;float:left;
}#divRight{width:25px;height:49px;background:url(img/menuright.jpg) no-repeat;float:right;
}#divTime{width:260px;height:49px;font-size:14px;text-align:center;float:left;
}#divMenu{float:right;
}
</style>
</head>
<body>
<divid="menu">
<divid="divLeft"class="iDiv"></div>
<divid="divTime"class="iDiv">
<div>时间：2016/11/24 下午2:49:56</div>
</div>
<divid="divRight"class="iDiv">
</div>
<divclass="iDiv"id="divMenu">
<ahref='index.html'>网站首页</a>
<ahref='articleList/15.html'>公司简介</a>
<ahref='productList/11.html'>产品展示</a>
<ahref='articleList/17.html'>养殖技术</a>
<ahref='articleList/18.html'>娃娃鱼介绍</a>
<ahref='productList/18.html'>企业资质</a>
<ahref='productList/19.html'>友情链接</a>
</div>
</div>
</body>
</html>

View Code

运行效果：

四、重置浏览器默认样式

下图是同一段HTML在3个不同内核的浏览器中打开的效果，你发现有不一样吗？很明显有区别，这就是浏览器的默认样式，每一个浏览器会设置user agent stylesheet，比如默认字体大小为16px。浏览器的默认样式会给我们带一定的麻烦，比如在计算元素的大小时默认样式会设置padding与margin值，不同的浏览器可能设置的不一样，就会出现误差，重置浏览器样式就是让您可以在一张白纸上写字。

最开始会使用一个简单的办法，如：

*{margin:0;padding:0;
}

虽然能全部重置，但由于性能较低，不推荐使用。因为*需要遍历整个DOM树，当页面节点较多时，会影响页面的渲染性能。

4.1、CSSReset

每种浏览器都有一套默认的样式表，即user agent stylesheet，网页在没有指定的样式时，按浏览器内置的样式表来渲染。这是合理的，像word中也有一些预留样式，可以让我们的排版更美观整齐。不同浏览器甚至同一浏览器不同版本的默认样式是不同的。但这样会有很多兼容问题，CSSReset可以将所有浏览器默认样式设置成一样。

4.1.1、MT css reset

/*MT css reset*/body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}h1,h2,h3,h4,h5,h6{font-size:100%}   /*继承body设定的字体大小*/
/*根据屏幕大小改变文字大小*/html{font-size:20px;}  /*chorme下设置为10px无效，推荐设置为20px，1rem=20px*/@media screen and (max-width:768px){    /*手机屏幕*/html{font-size:15px;}}
@media screen and (min-width: 768px) and (max-width:992px){  /*平板屏幕*/html{font-size:20px;}}
@media screen and (min-width: 992px){   /*电脑屏幕*/html{font-size:25px;}}
body{font-family:"Droid Sans Fallback","Heiti SC","Droid Sans",Helvetica,"Helvetica Neue",sans-self;color:#555;background-color:#F7F7F7;}.clearfix:after{content:".";display:block;visibility:hidden;height:0;clear:both;}   /*除去浮动*/a:hover{text-decoration:none;}ul,ol{list-style:none;margin:0;padding:0;}img{max-width:100%;height:auto;} /*图片自适应*/em,i{font-style:normal}  /*如需默认样式可修改*/button,input,select,textarea{vertical-align:middle;outline:none;}  /*出去获得焦点下的蓝色边框*/input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}  /*修改placeholder文字颜色*/

View Code

4.1.2、PC css reset

/*PC css reset*/body,dl,dd,p,h1,h2,h3,h4,h5,h6{margin:0;}h1,h2,h3,h4,h5,h6{font-size:100%}   /*继承body设定的字体大小*/body{font-family:"Microsoft YaHei",Tahoma,Arial,Simsun,sans-self;}.clearfix:after{content:".";display:block;visibility:hidden;height:0;clear:both;} /*除去浮动*/.clearfix{zoom:1;}a:hover{text-decoration:none;}ul,ol{list-style:none;margin:0;padding:0;}    /*当要添加小图标时可修改*/img{vertical-align:middle;border:0;-ms-interpolation-mode:bicubic;} /*在IE下除去边框和底部空白*/em,i{font-style:normal}  /*如需默认样式可修改*/input,select,textarea{vertical-align:middle;outline:none;}  /*出去获得焦点下的蓝色边框*/textarea{resize:none;}  /*禁止用户缩放文本框*/table{border-collapse:collapse;border-spacing:0;}button,input[type="button"],input[type="reset"],input[type="submit"]{cursor:pointer;-webkit-appearance:button;-moz-appearance:button;} /*按钮初始化*/input::-moz-placeholder,textarea::-moz-placeholder{color:#ccc;}   /*修改placeholder文字颜色*/input:-ms-input-placeholder,textarea:-ms-input-placeholder{color:#ccc;}input::-webkit-input-placeholder,textarea::-webkit-input-placeholder{color:#ccc;}

View Code

4.1.3、PPTV css reset

@charset "utf-8";
body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,button,textarea,table,tbody,tfoot,thead,th,td,article,aside,dialog,figure,footer,header,hgroup,menu,nav,section,time,mark,audio,video{margin:0;padding:0;outline:0;background:transparent;}article,aside,dialog,figure,footer,header,hgroup,nav,section{display:block;}body,button,input,select,textarea{font:12px/1.5 arial,\5b8b\4f53,sans-serif;}h1,h2,h3,h4,h5,h6,button,input,select,textarea{font-size:100%;}address,cite,dfn,em,var{font-style:normal;}code,kbd,pre,samp{font-family:courier new,courier,monospace;}small{font-size:12px;}ul,ol,li{list-style:none;}img{border:none;}a{text-decoration:none;outline:thin none;}a:hover{text-decoration:underline;}table{border-collapse:collapse;border-spacing:0;}.clear{clear:both;}.clearfix:after{visibility:hidden;display:block;font-size:0;content:" ";clear:both;height:0;}html{-webkit-text-size-adjust:none;}body{font:12px/1.5 \5FAE\8F6F\96C5\9ED1,tahoma,arial,\5b8b\4f53,sans-serif;}

View Code

4.1.4 YUI css reset

/*YUI 3.4.1 (build 4118)
Copyright 2011 Yahoo! Inc. All rights reserved.
Licensed under the BSD License.
http://yuilibrary.com/license/*/html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit}input,textarea,select{*font-size:100%}legend{color:#000}

View Code

4.1.5、marx css reset

/*! sanitize.css v3.3.0 | CC0 1.0 Public Domain | github.com/10up/sanitize.css*/
/** Normalization*/abbr[title]{text-decoration:underline;text-decoration:underline dotted; }audio:not([controls]){display:none; }b,
strong{font-weight:bolder; }button{-webkit-appearance:button;overflow:visible; }button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0; }button:-moz-focusring,
input:-moz-focusring{outline:1px dotted ButtonText; }button,
select{text-transform:none; }details{display:block; }hr{overflow:visible; }html{-ms-overflow-style:-ms-autohiding-scrollbar;overflow-y:scroll;-webkit-text-size-adjust:100%; }input{-webkit-border-radius:0; }input[type="button"], input[type="reset"], input[type="submit"]{-webkit-appearance:button; }input[type="number"]{width:auto; }input[type="search"]{-webkit-appearance:textfield; }input[type="search"]::-webkit-search-cancel-button, input[type="search"]::-webkit-search-decoration{-webkit-appearance:none; }main{display:block; }pre{overflow:auto; }progress{display:inline-block; }summary{display:block; }svg:not(:root){overflow:hidden; }template{display:none; }textarea{overflow:auto; }[hidden]{display:none; }
/** Universal inheritance*/*,
::before,
::after{box-sizing:inherit; }*{font-size:inherit;line-height:inherit; }::before,
::after{text-decoration:inherit;vertical-align:inherit; }button,
input,
select,
textarea{font-family:inherit;font-style:inherit;font-weight:inherit; }
/** Opinionated defaults*/*{margin:0;padding:0; }*,
::before,
::after{border-style:solid;border-width:0; }a,
area,
button,
input,
label,
select,
textarea,
[tabindex]{-ms-touch-action:manipulation;touch-action:manipulation; }select{-moz-appearance:none;-webkit-appearance:none; }select::-ms-expand{display:none; }select::-ms-value{color:currentColor; }svg{fill:currentColor; }[aria-busy="true"]{cursor:progress; }[aria-controls]{cursor:pointer; }[aria-disabled]{cursor:default; }[hidden][aria-hidden="false"]{clip:rect(0 0 0 0);display:inherit;position:absolute; }[hidden][aria-hidden="false"]:focus{clip:auto; }
/** Configurable defaults*/*{background-repeat:no-repeat; }:root{background-color:#ffffff;box-sizing:border-box;color:#000000;cursor:default;font:66.66667% sans-serif; }a{text-decoration:none; }audio,
canvas,
iframe,
img,
svg,
video{vertical-align:middle; }button,
input,
select,
textarea{background-color:transparent;color:inherit; }button,
[type="button"],
[type="date"],
[type="datetime"],
[type="datetime-local"],
[type="email"],
[type="month"],
[type="number"],
[type="password"],
[type="reset"],
[type="search"],
[type="submit"],
[type="tel"],
[type="text"],
[type="time"],
[type="url"],
[type="week"],
select,
textarea{min-height:1.5em; }code,
kbd,
pre,
samp{font-family:monospace, monospace; }nav ol,
nav ul{list-style:none; }small{font-size:75%; }table{border-collapse:collapse;border-spacing:0; }textarea{resize:vertical; }::-moz-selection{background-color:#b3d4fc;color:#ffffff;text-shadow:none; }::selection{background-color:#b3d4fc;color:#ffffff;text-shadow:none; }main,
header,
footer,
article,
section,
aside,
details,
summary{margin:0 auto;margin-bottom:16px;width:100%; }main{display:block;margin:0 auto;max-width:768px;padding:0 16px 16px; }footer{border-top:1px solid rgba(0, 0, 0, 0.12);clear:both;display:inline-block;float:left;max-width:100%;padding:16px 0;text-align:center; }footer p{margin-bottom:0; }hr{border-top:1px solid rgba(0, 0, 0, 0.12);display:block;margin-bottom:16px;width:100%; }img{height:auto;max-width:100%;vertical-align:baseline; }@media screen and (max-width: 400px){article,
section,
aside {
clear:both;display:block;max-width:100%; }img{margin-right:16px; }}
body{color:rgba(0, 0, 0, 0.8);font-family:"Helvetica Neue", Helvetica, "Lucida Grande", sans-serif;font-size:16px;line-height:1.4; }p{margin:0;margin-bottom:16px; }h1,
h2,
h3,
h4,
h5,
h6{color:inherit;font-family:inherit;line-height:inherit; }h1{border-bottom:1px solid rgba(0, 0, 0, 0.12);font-size:36px;font-weight:500;margin:20px 0 16px; }h2{font-size:30px;font-weight:500;margin:20px 0 16px; }h3{font-size:24px;font-weight:500;margin:16px 0 4px; }h4{font-size:18px;font-weight:600;margin:16px 0 4px; }h5{font-size:16px;font-weight:600;margin:16px 0 4px; }h6{color:rgba(0, 0, 0, 0.54);font-size:14px;font-weight:600;margin:16px 0 4px; }small{color:rgba(0, 0, 0, 0.54);vertical-align:bottom; }pre{background:#efefef;color:rgba(0, 0, 0, 0.8);display:block;font-family:Menlo, Monaco, Consolas, "Courier New", monospace;font-size:16px;margin:16px 0;padding:16px;white-space:pre-wrap; }code{color:rgba(0, 0, 0, 0.8);font-family:Menlo, Monaco, Consolas, "Courier New", monospace;font-size:16px;line-height:inherit;margin:0;padding:0;vertical-align:baseline;word-break:break-all;word-wrap:break-word; }a{color:#2196f3; }a:hover, a:focus{color:#2196f3;text-decoration:underline; }dl{margin-bottom:16px; }dd{margin-left:40px; }ul,
ol{margin-bottom:8px;padding-left:40px;vertical-align:baseline; }blockquote{border-left:2px solid #2196f3;font-family:Georgia, Times, "Times New Roman", serif;font-style:italic;margin:16px 0;padding-left:16px; }figcaption{font-family:Georgia, Times, "Times New Roman", serif; }u{text-decoration:underline; }s{text-decoration:line-through; }sup{font-size:14px;vertical-align:super; }sub{font-size:14px;vertical-align:sub; }mark{background:#ffeb3b; }input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="datetime"],
input[type="datetime-local"],
input[type="week"],
input[type="number"],
input[type="search"],
input[type="tel"],
select{background:#fff;border:1px solid rgba(0, 0, 0, 0.12);border-radius:4px;color:rgba(0, 0, 0, 0.8);display:inline-block;padding:4px;vertical-align:middle; }input[type="color"]{background:#fff;border:1px solid rgba(0, 0, 0, 0.12);border-radius:4px;display:inline-block;vertical-align:middle; }input:not([type]){-webkit-appearance:none;background-clip:padding-box;border:1px solid rgba(0, 0, 0, 0.12);border-radius:4px;display:inline-block;padding:8px;text-align:left; }input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="date"]:focus,
input[type="month"]:focus,
input[type="time"]:focus,
input[type="datetime"]:focus,
input[type="datetime-local"]:focus,
input[type="week"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
input[type="tel"]:focus,
input[type="color"]:focus,
select:focus,
textarea:focus{border-color:#2196f3; }input:not([type]):focus{border-color:#2196f3; }input[type="file"]:focus,
input[type="radio"]:focus,
input[type="checkbox"]:focus{outline:1px thin rgba(0, 0, 0, 0.12); }input[type="text"][disabled],
input[type="password"][disabled],
input[type="email"][disabled],
input[type="url"][disabled],
input[type="date"][disabled],
input[type="month"][disabled],
input[type="time"][disabled],
input[type="datetime"][disabled],
input[type="datetime-local"][disabled],
input[type="week"][disabled],
input[type="number"][disabled],
input[type="search"][disabled],
input[type="tel"][disabled],
input[type="color"][disabled],
select[disabled],
textarea[disabled]{background-color:rgba(0, 0, 0, 0.12);color:rgba(0, 0, 0, 0.54);cursor:not-allowed; }input:not([type])[disabled]{background-color:rgba(0, 0, 0, 0.12);color:rgba(0, 0, 0, 0.54);cursor:not-allowed; }input[readonly],
select[readonly],
textarea[readonly]{border-color:rgba(0, 0, 0, 0.12);color:rgba(0, 0, 0, 0.54); }input:focus:invalid,
textarea:focus:invalid,
select:focus:invalid{border-color:#ea1c0d;color:#f44336; }input[type="file"]:focus:invalid:focus,
input[type="radio"]:focus:invalid:focus,
input[type="checkbox"]:focus:invalid:focus{outline-color:#f44336; }select{-webkit-appearance:menulist-button;border:1px solid rgba(0, 0, 0, 0.12);vertical-align:sub; }select[multiple]{height:auto; }label{line-height:2; }fieldset{border:0;margin:0;padding:8px 0; }legend{border-bottom:1px solid rgba(0, 0, 0, 0.12);color:rgba(0, 0, 0, 0.8);display:block;margin-bottom:8px;padding:8px 0;width:100%; }textarea{background:#fff;border:1px solid rgba(0, 0, 0, 0.12);border-radius:4px;display:block;margin-bottom:8px;max-width:100%;padding:8px;vertical-align:middle; }input[type=submit],
input[type=reset],
button{background:#2196f3;border:1px solid rgba(0, 0, 0, 0.12);border-radius:4px;color:#fff;cursor:pointer;display:inline-block;margin:0;padding:8px 16px;text-align:center;vertical-align:middle;white-space:nowrap; }input[type=submit]::-moz-focus-inner,
input[type=reset]::-moz-focus-inner,
button::-moz-focus-inner{padding:0; }input[type=submit]:hover,
input[type=reset]:hover,
button:hover{background:#0c7cd5;border-color:1px solid rgba(0, 0, 0, 0.54); }input[type=submit]:active,
input[type=reset]:active,
button:active{background:#0c7cd5;border-color:1px solid rgba(0, 0, 0, 0.54);box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.2);outline-offset:-2px; }input[type=submit]:focus,
input[type=reset]:focus,
button:focus{background:#0c7cd5;border-color:1px solid rgba(0, 0, 0, 0.54);box-shadow:inset 0 0 4px 0 rgba(0, 0, 0, 0.2);outline:0; }input[type=submit]:disabled,
button:disabled{background:rgba(0, 0, 0, 0.12);color:rgba(0, 0, 0, 0.38);cursor:not-allowed; }table{border-top:1px solid rgba(0, 0, 0, 0.12);margin-bottom:16px; }caption{padding:8px 0; }thead th{border:0;border-bottom:2px solid rgba(0, 0, 0, 0.12);text-align:left; }tr{margin-bottom:8px; }th,
td{border-bottom:1px solid rgba(0, 0, 0, 0.12);padding:16px;vertical-align:inherit; }tfoot tr{text-align:left; }tfoot td{color:rgba(0, 0, 0, 0.54);font-size:8px;font-style:italic;padding:16px 4px; }

View Code

示例：

<!DOCTYPE html>
<htmllang="en">
<head>
<metacharset="utf-8">
<metahttp-equiv="X-UA-Compatible"content="IE=edge">
<metaname="viewport"content="width=device-width, initial-scale=1">
<title>Marx Template</title>
<!--Marx CSS-->
<linkrel="stylesheet"type="text/css"href="css/marx_cssreset.css"/>
</head>
<body>
<!--main is the container-->
<main>
<!--Navigation-->
<nav>
<ul>
<li><ahref="#"><b>First</b></a></li>
<li><ahref="#">Second</a></li>
<li><ahref="#">Third</a></li>
<li><ahref="#">Fourth</a></li>
</ul>
</nav>
<p>
<button>Add Item</button>
</p>
<!--article-->
<article>
<h1>Article</h1>
</article>
<!--aside-->
<aside>
<h1>Aside</h1>
</aside>
<!--section-->
<section>
<h1>Section</h1>
</section>
<!--footer-->
<footer>
<p>&copy; Matthew Blode 2016</p>
</footer>
</main>
</body>
</html>

运行结果：

这一个是github上点赞最多的一个，github地址，它除了css reset还有一些base css内容。

4.1.6、EricMeyer css reset

/*http://meyerweb.com/eric/tools/css/reset/
v2.0 | 20110126
License: none (public domain)*/html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;
}
/*HTML5 display-role reset for older browsers*/article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block;
}body{line-height:1;
}ol, ul{list-style:none;
}blockquote, q{quotes:none;
}blockquote:before, blockquote:after,
q:before, q:after{content:'';content:none;
}table{border-collapse:collapse;border-spacing:0;
}

View Code

4.1.7、天猫 css reset

@charset "gb2312";
body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, dl, dt, dd, ul, ol, li, pre, form, fieldset, legend, button, input, textarea, th, td{margin:0;padding:0}body, button, input, select, textarea{font:12px "microsoft yahei";line-height:1.5;-ms-overflow-style:scrollbar}h1, h2, h3, h4, h5, h6{font-size:100%}ul, ol{list-style:none}a{text-decoration:none;cursor:pointer}a:hover{text-decoration:underline}img{border:0}button, input, select, textarea{font-size:100%}table{border-collapse:collapse;border-spacing:0}.clear{clear:both}.fr{float:right}.fl{float:left}.block{display:block;text-indent:-999em}

View Code

4.1.8、ress css reset

/*!
* ress.css • v1.1.2
* MIT License
* github.com/filipelinhares/ress*/
/*# =================================================================
# Global selectors
# =================================================================*/html{box-sizing:border-box;overflow-y:scroll; /*All browsers without overlaying scrollbars*/-webkit-text-size-adjust:100%; /*iOS 8+*/
}*,
::before,
::after{box-sizing:inherit;
}::before,
::after{text-decoration:inherit; /*Inherit text-decoration and vertical align to ::before and ::after pseudo elements*/vertical-align:inherit;
}
/*Remove margin, padding of all elements and set background-no-repeat as default*/*{background-repeat:no-repeat; /*Set `background-repeat: no-repeat` to all elements*/padding:0; /*Reset `padding` and `margin` of all elements*/margin:0;
}
/*# =================================================================
# General elements
# =================================================================*/
/*Add the correct display in iOS 4-7.*/audio:not([controls]){display:none;height:0;
}hr{overflow:visible; /*Show the overflow in Edge and IE*/
}
/** Correct `block` display not defined for any HTML5 element in IE 8/9
* Correct `block` display not defined for `details` or `summary` in IE 10/11
* and Firefox
* Correct `block` display not defined for `main` in IE 11*/article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
menu,
nav,
section,
summary{display:block;
}summary{display:list-item; /*Add the correct display in all browsers*/
}small{font-size:80%; /*Set font-size to 80% in `small` elements*/
}[hidden],
template{display:none; /*Add the correct display in IE*/
}abbr[title]{border-bottom:1px dotted; /*Add a bordered underline effect in all browsers*/text-decoration:none; /*Remove text decoration in Firefox 40+*/
}a{background-color:transparent; /*Remove the gray background on active links in IE 10*/-webkit-text-decoration-skip:objects; /*Remove gaps in links underline in iOS 8+ and Safari 8+*/
}a:active,
a:hover{outline-width:0; /*Remove the outline when hovering in all browsers*/
}code,
kbd,
pre,
samp{font-family:monospace, monospace; /*Specify the font family of code elements*/
}b,
strong{font-weight:bolder; /*Correct style set to `bold` in Edge 12+, Safari 6.2+, and Chrome 18+*/
}dfn{font-style:italic; /*Address styling not present in Safari and Chrome*/
}
/*Address styling not present in IE 8/9*/mark{background-color:#ff0;color:#000;
}
/*https://gist.github.com/unruthless/413930*/sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;
}sub{bottom:-0.25em;
}sup{top:-0.5em;
}
/*# =================================================================
# Forms
# =================================================================*/input{border-radius:0;
}
/*Apply cursor pointer to button elements*/button,
[type="button"],
[type="reset"],
[type="submit"],
[role="button"]{cursor:pointer;
}
/*Replace pointer cursor in disabled elements*/[disabled]{cursor:default;
}[type="number"]{width:auto; /*Firefox 36+*/
}[type="search"]{-webkit-appearance:textfield; /*Safari 8+*/
}[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration{-webkit-appearance:none; /*Safari 8*/
}textarea{overflow:auto; /*Internet Explorer 11+*/resize:vertical; /*Specify textarea resizability*/
}button,
input,
optgroup,
select,
textarea{font:inherit; /*Specify font inheritance of form elements*/
}optgroup{font-weight:bold; /*Restore the font weight unset by the previous rule.*/
}button{overflow:visible; /*Address `overflow` set to `hidden` in IE 8/9/10/11*/
}
/*Remove inner padding and border in Firefox 4+*/button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{border-style:0;padding:0;
}
/*Replace focus style removed in the border reset above*/button:-moz-focusring,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{outline:1px dotted ButtonText;
}button,
html [type="button"],/*Prevent a WebKit bug where (2) destroys native `audio` and `video`controls in Android 4*/[type="reset"],
[type="submit"]{-webkit-appearance:button; /*Correct the inability to style clickable types in iOS*/
}button,
select{text-transform:none; /*Firefox 40+, Internet Explorer 11-*/
}
/*Remove the default button styling in all browsers*/button,
input,
select,
textarea{background-color:transparent;border-style:none;color:inherit;
}
/*Style select like a standard input*/select{-moz-appearance:none; /*Firefox 36+*/-webkit-appearance:none; /*Chrome 41+*/
}select::-ms-expand{display:none; /*Internet Explorer 11+*/
}select::-ms-value{color:currentColor; /*Internet Explorer 11+*/
}legend{border:0; /*Correct `color` not being inherited in IE 8/9/10/11*/color:inherit; /*Correct the color inheritance from `fieldset` elements in IE*/display:table; /*Correct the text wrapping in Edge and IE*/max-width:100%; /*Correct the text wrapping in Edge and IE*/white-space:normal; /*Correct the text wrapping in Edge and IE*/
}::-webkit-file-upload-button{-webkit-appearance:button; /*Correct the inability to style clickable types in iOS and Safari*/font:inherit; /*Change font properties to `inherit` in Chrome and Safari*/
}[type="search"]{-webkit-appearance:textfield; /*Correct the odd appearance in Chrome and Safari*/outline-offset:-2px; /*Correct the outline style in Safari*/
}
/*# =================================================================
# Specify media element style
# =================================================================*/img{border-style:none; /*Remove border when inside `a` element in IE 8/9/10*/
}
/*Add the correct vertical alignment in Chrome, Firefox, and Opera*/progress{vertical-align:baseline;
}svg:not(:root){overflow:hidden; /*Internet Explorer 11-*/
}audio,
canvas,
progress,
video{display:inline-block; /*Internet Explorer 11+, Windows Phone 8.1+*/
}
/*# =================================================================
# Accessibility
# =================================================================*/
/*Hide content from screens but not screenreaders*/@media screen{[hidden~="screen"] {
display:inherit;
}[hidden~="screen"]:not(:active):not(:focus):not(:target){position:absolute !important;clip:rect(0 0 0 0) !important;
}}/*Specify the progress cursor of updating elements*/[aria-busy="true"]{cursor:progress;
}
/*Specify the pointer cursor of trigger elements*/[aria-controls]{cursor:pointer;
}
/*Specify the unstyled cursor of disabled, not-editable, or otherwise inoperable elements*/[aria-disabled]{cursor:default;
}
/*# =================================================================
# Selection
# =================================================================*/
/*Specify text selection background color and omit drop shadow*/::-moz-selection{background-color:#b3d4fc; /*Required when declaring ::selection*/color:#000;text-shadow:none;
}::selection{background-color:#b3d4fc; /*Required when declaring ::selection*/color:#000;text-shadow:none;
}

View Code

github上css reset点赞排名第2

https://github.com/filipelinhares/ress/

4.2、normalize

也许有些cssreset过于简单粗暴，有点伤及无辜，normalize是另一个选择。bootstrap已经引用该css来重置浏览器默认样式，比普通的cssreset要精细一些，保留浏览器有用的默认样式，支持包括手机浏览器在内的超多浏览器，同时对HTML5元素、排版、列表、嵌入的内容、表单和表格都进行了一般化。

Normalize.css和传统Reset的区别：
a)、Normalize.css 保护了有价值的默认值
Reset通过为几乎所有的元素施加默认样式，强行使得元素有相同的视觉效果。相比之下，Normalize.css保持了许多默认的浏览器样式。这就意味着你不用再为所有公共的排版元素重新设置样式。当一个元素在不同的浏览器中有不同的默认值时，Normalize.css会力求让这些样式保持一致并尽可能与现代标准相符合。

b)、Normalize.css 修复了浏览器的bug
它修复了常见的桌面端和移动端浏览器的bug。这往往超出了Reset所能做到的范畴。关于这一点，Normalize.css修复的问题包含了HTML5元素的显示设置、预格式化文字的font-size问题、在IE9中SVG的溢出、许多出现在各浏览器和操作系统中的与表单相关的bug。

github的下载地址：https://github.com/necolas/normalize.css

/*! normalize.css v5.0.0 | MIT License | github.com/necolas/normalize.css*/
/*Document
==========================================================================*/
/**
* 1. Change the default font family in all browsers (opinionated).
* 2. Correct the line height in all browsers.
* 3. Prevent adjustments of font size after orientation changes in
*    IE on Windows Phone and in iOS.*/html{font-family:sans-serif; /*1*/line-height:1.15; /*2*/-ms-text-size-adjust:100%; /*3*/-webkit-text-size-adjust:100%; /*3*/
}
/*Sections
==========================================================================*/
/**
* Remove the margin in all browsers (opinionated).*/body{margin:0;
}
/**
* Add the correct display in IE 9-.*/article,
aside,
footer,
header,
nav,
section{display:block;
}
/**
* Correct the font size and margin on `h1` elements within `section` and
* `article` contexts in Chrome, Firefox, and Safari.*/h1{font-size:2em;margin:0.67em 0;
}
/*Grouping content
==========================================================================*/
/**
* Add the correct display in IE 9-.
* 1. Add the correct display in IE.*/figcaption,
figure,
main{ /*1*/display:block;
}
/**
* Add the correct margin in IE 8.*/figure{margin:1em 40px;
}
/**
* 1. Add the correct box sizing in Firefox.
* 2. Show the overflow in Edge and IE.*/hr{box-sizing:content-box; /*1*/height:0; /*1*/overflow:visible; /*2*/
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.*/pre{font-family:monospace, monospace; /*1*/font-size:1em; /*2*/
}
/*Text-level semantics
==========================================================================*/
/**
* 1. Remove the gray background on active links in IE 10.
* 2. Remove gaps in links underline in iOS 8+ and Safari 8+.*/a{background-color:transparent; /*1*/-webkit-text-decoration-skip:objects; /*2*/
}
/**
* Remove the outline on focused links when they are also active or hovered
* in all browsers (opinionated).*/a:active,
a:hover{outline-width:0;
}
/**
* 1. Remove the bottom border in Firefox 39-.
* 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.*/abbr[title]{border-bottom:none; /*1*/text-decoration:underline; /*2*/text-decoration:underline dotted; /*2*/
}
/**
* Prevent the duplicate application of `bolder` by the next rule in Safari 6.*/b,
strong{font-weight:inherit;
}
/**
* Add the correct font weight in Chrome, Edge, and Safari.*/b,
strong{font-weight:bolder;
}
/**
* 1. Correct the inheritance and scaling of font size in all browsers.
* 2. Correct the odd `em` font sizing in all browsers.*/code,
kbd,
samp{font-family:monospace, monospace; /*1*/font-size:1em; /*2*/
}
/**
* Add the correct font style in Android 4.3-.*/dfn{font-style:italic;
}
/**
* Add the correct background and color in IE 9-.*/mark{background-color:#ff0;color:#000;
}
/**
* Add the correct font size in all browsers.*/small{font-size:80%;
}
/**
* Prevent `sub` and `sup` elements from affecting the line height in
* all browsers.*/sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;
}sub{bottom:-0.25em;
}sup{top:-0.5em;
}
/*Embedded content
==========================================================================*/
/**
* Add the correct display in IE 9-.*/audio,
video{display:inline-block;
}
/**
* Add the correct display in iOS 4-7.*/audio:not([controls]){display:none;height:0;
}
/**
* Remove the border on images inside links in IE 10-.*/img{border-style:none;
}
/**
* Hide the overflow in IE.*/svg:not(:root){overflow:hidden;
}
/*Forms
==========================================================================*/
/**
* 1. Change the font styles in all browsers (opinionated).
* 2. Remove the margin in Firefox and Safari.*/button,
input,
optgroup,
select,
textarea{font-family:sans-serif; /*1*/font-size:100%; /*1*/line-height:1.15; /*1*/margin:0; /*2*/
}
/**
* Show the overflow in IE.
* 1. Show the overflow in Edge.*/button,
input{ /*1*/overflow:visible;
}
/**
* Remove the inheritance of text transform in Edge, Firefox, and IE.
* 1. Remove the inheritance of text transform in Firefox.*/button,
select{ /*1*/text-transform:none;
}
/**
* 1. Prevent a WebKit bug where (2) destroys native `audio` and `video`
*    controls in Android 4.
* 2. Correct the inability to style clickable types in iOS and Safari.*/button,
html [type="button"],/*1*/[type="reset"],
[type="submit"]{-webkit-appearance:button; /*2*/
}
/**
* Remove the inner border and padding in Firefox.*/button::-moz-focus-inner,
[type="button"]::-moz-focus-inner,
[type="reset"]::-moz-focus-inner,
[type="submit"]::-moz-focus-inner{border-style:none;padding:0;
}
/**
* Restore the focus styles unset by the previous rule.*/button:-moz-focusring,
[type="button"]:-moz-focusring,
[type="reset"]:-moz-focusring,
[type="submit"]:-moz-focusring{outline:1px dotted ButtonText;
}
/**
* Change the border, margin, and padding in all browsers (opinionated).*/fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em;
}
/**
* 1. Correct the text wrapping in Edge and IE.
* 2. Correct the color inheritance from `fieldset` elements in IE.
* 3. Remove the padding so developers are not caught out when they zero out
*    `fieldset` elements in all browsers.*/legend{box-sizing:border-box; /*1*/color:inherit; /*2*/display:table; /*1*/max-width:100%; /*1*/padding:0; /*3*/white-space:normal; /*1*/
}
/**
* 1. Add the correct display in IE 9-.
* 2. Add the correct vertical alignment in Chrome, Firefox, and Opera.*/progress{display:inline-block; /*1*/vertical-align:baseline; /*2*/
}
/**
* Remove the default vertical scrollbar in IE.*/textarea{overflow:auto;
}
/**
* 1. Add the correct box sizing in IE 10-.
* 2. Remove the padding in IE 10-.*/[type="checkbox"],
[type="radio"]{box-sizing:border-box; /*1*/padding:0; /*2*/
}
/**
* Correct the cursor style of increment and decrement buttons in Chrome.*/[type="number"]::-webkit-inner-spin-button,
[type="number"]::-webkit-outer-spin-button{height:auto;
}
/**
* 1. Correct the odd appearance in Chrome and Safari.
* 2. Correct the outline style in Safari.*/[type="search"]{-webkit-appearance:textfield; /*1*/outline-offset:-2px; /*2*/
}
/**
* Remove the inner padding and cancel buttons in Chrome and Safari on macOS.*/[type="search"]::-webkit-search-cancel-button,
[type="search"]::-webkit-search-decoration{-webkit-appearance:none;
}
/**
* 1. Correct the inability to style clickable types in iOS and Safari.
* 2. Change font properties to `inherit` in Safari.*/::-webkit-file-upload-button{-webkit-appearance:button; /*1*/font:inherit; /*2*/
}
/*Interactive
==========================================================================*/
/** Add the correct display in IE 9-.
* 1. Add the correct display in Edge, IE, and Firefox.*/details,/*1*/menu{display:block;
}
/** Add the correct display in all browsers.*/summary{display:list-item;
}
/*Scripting
==========================================================================*/
/**
* Add the correct display in IE 9-.*/canvas{display:inline-block;
}
/**
* Add the correct display in IE.*/template{display:none;
}
/*Hidden
==========================================================================*/
/**
* Add the correct display in IE 10-.*/[hidden]{display:none;
}

View Code

4.3、base css

如果说css reset是为了重置浏览器的默认样式，则base css是准备一些通用的css提高开发效率，如.fl表示float left，左浮动，也有人移为common.css，也有把该部分内容与cssreset合并的，这样可以减少http请求，简单的示例如下：

.clear{clear:both}.fr{float:right}.fl{float:left}.block{display:block;text-indent:-999em}.w100{width:100px;};
.w200{width:200px;};
.w300{width:300px;};
.w400{width:400px;};
.w500{width:500px;};/*....*/.wp100{width:100%;};
.wp50{width:50%;};
.wp33{width:33%;};
.wp25{width:25%;};
.wp20{width:20%;};

View Code

示例2：

@charset "utf-8";/*字体*/.n{font-weight:normal;font-style:normal;
}.b{font-weight:bold;}.i{font-style:italic;}.fa{font-family:Arial;}.fs{font-family:'宋体';}.fw{font-family:'microsoft yahei';}.fg{font-family:Georgia;}.ft{font-family:Tahoma;}.fl{font-family:Lucida Console;}.tdl{text-decoration:underline;}.tdn, .tdn:hover, a.tdl:hover{text-decoration:none;}
/*对齐*/.tc{text-align:center;}.tr{text-align:right;}.tl{text-align:left;}.auto{margin-left:auto;margin-right:auto;
}.auto0{margin:0 auto;}.vm{vertical-align:middle;}.vtb{vertical-align:text-bottom;}.vt{vertical-align:top;}.vn{vertical-align:-4px;}.vimg{margin-bottom:-3px;}
/*大小颜色*/.g0{color:#000;}.g3{color:#333;}.g6{color:#666;}.g9{color:#999;}.red{color:red;}.wh{color:white;}.f0{font-size:0;}.f10{font-size:10px;}.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.f24{font-size:24px;}
/*外边距*/.m0{margin:0;}.ml1{margin-left:1px;}.ml2{margin-left:2px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml20{margin-left:20px;}.mr1{margin-right:1px;}.mr2{margin-right:2px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr20{margin-right:20px;}.mt1{margin-top:1px;}.mt2{margin-top:2px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt20{margin-top:20px;}.mb1{margin-bottom:1px;}.mb2{margin-bottom:2px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb20{margin-bottom:20px;}.ml-1{margin-left:-1px;}.mt-1{margin-top:-1px;}
/*内边距*/.p1{padding:1px;}.pl1{padding-left:1px;}.pt1{padding-top:1px;}.pr1{padding-right:1px;}.pb1{padding-bottom:1px;}.p2{padding:2px;}.pl2{padding-left:2px;}.pt2{padding-top:2px;}.pr2{padding-right:2px;}.pb2{padding-bottom:2px;}.pl5{padding-left:5px;}.p5{padding:5px;}.pt5{padding-top:5px;}.pr5{padding-right:5px;}.pb5{padding-bottom:5px;}.p10{padding:10px;}.pl10{padding-left:10px;}.pt10{padding-top:10px;}.pr10{padding-right:10px;}.pb10{padding-bottom:10px;}.p20{padding:20px;}.pl20{padding-left:20px;}.pt20{padding-top:20px;}.pr20{padding-right:20px;}.pb20{padding-bottom:20px;}
/*位置*/.l{float:left;}.r{float:right;}.cl{clear:both;}.rel{position:relative;}.abs{position:absolute;}.zx1{z-index:1;}.zx2{z-index:2;}.dn{display:none;}.db{display:block;}.dib{-moz-inline-stack:inline-block;display:inline-block;}.di{display:inline;}.ovh{overflow:hidden;}.ovs{overflow:scroll;}.vh{visibility:hidden;}.vv{visibility:visible;}
/*高度*/.lh14{line-height:14px;}.lh16{line-height:16px;}.lh18{line-height:18px;}.lh20{line-height:20px;}.lh22{line-height:22px;}.lh24{line-height:24px;}.h14{height:14px;}.h16{height:16px;}.h18{height:18px;}.h20{height:20px;}.h22{height:22px;}.h24{height:24px;}
/*缩放*/.fix{*zoom:1;}.fix:after{display:block;content:"clear";height:0;clear:both;overflow:hidden;visibility:hidden;}.z{_zoom:1;}
/*样子*/.poi{cursor:pointer;}.def{cursor:default;}.ln{list-style:none;}.br4{-moz-border-radius:4px;-webkit-border-radius:4px;border-radius:4px;}.br8{-moz-border-radius:8px;-webkit-border-radius:8px;border-radius:8px;}
/*换行*/.bk{word-wrap:break-word;}
/************************** Reset 样式类  酌情添加 ********************************************/body, ul, form{margin:0;padding:0;}a{margin:0;padding:0;border:0;vertical-align:baseline;}a img{border:none;}table{border-collapse:collapse;}hr{display:block;height:1px;border:0;padding:0;border-top:1px solid #ccc;margin:1em 0;}input, select,textarea{vertical-align:middle/9;letter-spacing:1px;color:#555;}

示例3：

/*base.css*/
/*CSS reset*/body, div, dl, dt, dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,blockquoteth,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,caption, cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal;}ol,ul{list-style:none;}capation,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before, q:after{content:' '}abbr,acronym{border:0;}
/*文字排版*/.f12{font-size:12px;}.f13{font-size:13px;}.f14{font-size:14px;}.f16{font-size:16px;}.f20{font-size:20px;}.fb{font-weight:bold;}.fn{font-weight:normal;}.t2{text-indent:2em;}.lh150{line-height:150%}.lh180{line-height:180%}.lh200{line-height:200%}.unl{text-decoration:underline;}.no_unl{text-decoration:none;}
/*定位*/.tl{text-align:left;}.tc{text-align:center;}.tr{text-align:right;}.bc{margin-left:auto;margin-right:auto;}.fl{float:left;display:inline;}.fr{float:right;display:inline;}.cb{clear:both;}.cl{clear:left;}.cr{clear:right;}.clearfix:after{content:'.';display:block;height:0;clear:both;visibility:hidden}.clearfix{display:inline-block;}*html .clearfix{height:1%}. Clearfix{display:block;}.vm{vertical-align:center;}.pr{position:relative;}.pa{position:absolute;}.abs-right{position:absolute;right:0;}.zoom{zoom:1}.hidden{visibility:hidden;}.none{display:none;}
/*长度高度*/.w10{width:10px;}.w20{width:20px;}.w30{width:30px;}.w40{width:40px;}.w50{width:50px;}.w60{width:60px;}.w70{width:70px;}.w80{width:80px;}.w90{width:90px;}.w100{width:100px;}.w200{width:200px;}.w300{width:300px;}.w400{width:400px;}.w500{width:500px;}.w600{width:600px;}.w700{width:700px;}.w800{width:800px;}.w{width:100%}.h50{width:50px;}.h80{width:80px;}.h100{width:100px;}.h200{width:200px;}.h{height:100%}
/*边距*/.m10{margin:10px;}.m15{margin:15px;}.m30{margin:30px;}.mt5{margin-top:5px;}.mt10{margin-top:10px;}.mt15{margin-top:15px;}.mt20{margin-top:20px;}.mt30{margin-top:30px;}.mt50{margin-top:50px;}.mt100{margin-top:100px;}.mb5{margin-bottom:5px;}.mb10{margin-bottom:10px;}.mb15{margin-bottom:15px;}.mb20{margin-bottom:20px;}.mb30{margin-bottom:30px;}.mb50{margin-bottom:50px;}.mb100{margin-bottom:100px;}.ml5{margin-left:5px;}.ml10{margin-left:10px;}.ml15{margin-left:15px;}.ml20{margin-left:20px;}.ml30{margin-left:30px;}.ml50{margin-left:50px;}.ml100{margin-left:100px;}.mr5{margin-right:5px;}.mr10{margin-right:10px;}.mr15{margin-right:15px;}.mr20{margin-right:20px;}.mr30{margin-right:30px;}.mr50{margin-right:50px;}.mr100{margin-right:100px;}.p10{padding:10px;}.p15{padding:15px;}.p30{padding:30px;}.pt5{padding-top:5px;}.pt10{padding-top:10px;}.pt15{padding-top:15px;}.pt20{padding-top:20px;}.pt30{padding-top:30px;}.pt50{padding-top:50px;}.pt100{padding-top:100px;}.pb5{padding-bottom:5px;}.pb10{padding-bottom:10px;}.pb15{padding-bottom:15px;}.pb20{padding-bottom:20px;}.pb30{padding-bottom:30px;}.pb50{padding-bottom:50px;}.pb100{padding-bottom:100px;}.pl5{padding-left:5px;}.pl10{padding-left:10px;}.pl15{padding-left:15px;}.pl20{padding-left:20px;}.pl30{padding-left:30px;}.pl50{padding-left:50px;}.pl100{padding-left:100px;}.pr5{padding-right:5px;}.pr10{padding-right:10px;}.pr15{padding-right:15px;}.pr20{padding-right:20px;}.pr30{padding-right:30px;}.pr50{padding-right:50px;}.pr100{padding-right:100px;}

View Code

示例4：

@charset "utf-8";/*!
* @名称：base.css
* @功能：1、重设浏览器默认样式
*       2、设置通用原子类*/
/*防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体*/html{background:white;color:black;
}
/*内外边距通常让各个浏览器样式的表现位置不同*/body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section{margin:0;padding:0;
}
/*要注意表单元素并不继承父级 font 的问题*/body,button,input,select,textarea{font:12px \5b8b\4f53,arial,sans-serif;
}input,select,textarea{font-size:100%;
}
/*去掉 table cell 的边距并让其边重合*/table{border-collapse:collapse;border-spacing:0;
}
/*ie bug：th 不继承 text-align*/th{text-align:inherit;
}
/*去除默认边框*/fieldset,img{border:none;
}
/*ie6 7 8(q) bug 显示为行内表现*/iframe{display:block;
}
/*去掉 firefox 下此元素的边框*/abbr,acronym{border:none;font-variant:normal;
}
/*一致的 del 样式*/del{text-decoration:line-through;
}address,caption,cite,code,dfn,em,th,var{font-style:normal;font-weight:500;
}
/*去掉列表前的标识，li 会继承*/ol,ul{list-style:none;
}
/*对齐是排版最重要的因素，别让什么都居中*/caption,th{text-align:left;
}
/*来自yahoo，让标题都自定义，适应多个系统应用*/h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:500;
}q:before,q:after{content:'';
}
/*统一上标和下标*/sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline;
}sup{top:-0.5em;
}sub{bottom:-0.25em;
}
/*让链接在 hover 状态下显示下划线*/a:hover{text-decoration:underline;
}
/*默认不显示下划线，保持页面简洁*/ins,a{text-decoration:none;
}
/*去除 ie6 & ie7 焦点点状线*/a:focus,*:focus{outline:none;
}
/*清除浮动*/.clearfix:before,.clearfix:after{content:"";display:table;
}.clearfix:after{clear:both;overflow:hidden;
}.clearfix{zoom:1; /*for ie6 & ie7*/
}.clear{clear:both;display:block;font-size:0;height:0;line-height:0;overflow:hidden;
}
/*设置显示和隐藏，通常用来与 js 配合*/.hide{display:none;
}.block{display:block;
}
/*设置浮动，减少浮动带来的 bug*/.fl,.fr{display:inline;
}.fl{float:left;
}.fr{float:right;
}

View Code

示例5：

@charset "utf-8";/*CSS Document*/
/*CSS reset
重置浏览器默认css设置*/htm_left{color:#000;background:#FFF;}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pr,code,form,fieldset,legend,input,button,textarea,p,blockquote,th,td{margin:0;padding:0;}table{border-collapse:collapse;border-spacing:0;}fieldset,img{border:0;}address,cap_topion,cite,code,dfn,em,strong,th,var,op_topgroup{font-style:inherit;font-weight:inherit;}del,ins{text-decoration:none;}li{list-style:none;}cap_topion,th{text-align:left;}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal;}q:before,q:after{content:'';}abbr,acronym{border:0;font-variant:normal;}sup{vertical-align:baseline;}sub{vertical-align:baseline;}legend{color:#000;}input,button,textarea,select,op_topgroup,op_topion{font-family:inherit;font-size:inherit;font-style:inherit;}input,button,textarea,select{*font-size:100%;}a{text-decoration:none;}a:hover{text-decoration:underline;}a:focus{outline:none; }.float_l,float_r{display:inline;}
/*color
字体颜色取值*/.color_666{color:#666;
}.write{color:write;
}.red{color:red;
}.green{color:green;
}.blue{color:blue;
}.gray{color:gray;
}.yellow{color:yellow;
}
/*font-size
字号取值*/.font_12{font-size:12px;
}.font_14{font-size:14px;
}.font_16{font-size:16px;
}.font_18{font-size:18px;
}.font_20{font-size:20px;
}.font_24{font-size:24px;
}
/*font-weight
字体宽度取值*/.f_bold{font-weight:bold;
}
/*float
浮动取值*/float_l{float:left;
}float_r{float:right;
}
/*disp_leftay
区块取值*/.hidden{display:none;
}.block{disp_leftay:block;
}.inline{disp_leftay:inline;
}.inline_block{disp_leftay:inline-block;
}
/*position
定位取值*/.position_abs{position:absolute;
}.position_rel{position:relative;
}
/*background-color
背景颜色取值*/.bgc_gray_333{background-color:#333;
}.bgc_gray_666{background-color:#666;
}.bgc_gray_999{background-color:#999;
}.bgc_gray_ccc{background-color:#ccc;
}.bgc_blue{background-color:blue;
}
/*list-style
列表风格取值*/.li_s_none{list-style:none;
}
/*text-align
文本位置取值*/.text_center{text-align:center;
}.text_left{text-align:left;
}.text_right{text-align:right;
}
/*text-decoration
下划线取值*/.text_d_none{text-decoration:none;
}.text_d_under{text-decoration:underline;
}
/*text-indent
首行缩进取值*/.indent_24px{text-indent:24px;
}.indent_2em{text-indent:2em;
}
/*line-height
行高取值*/.line_h_150{line-height:150%;
}.line_h_180{line-height:180%;
}.line_h_200{line-height:200%;
}
/*clear
浮动清除取值*/.clear_b{clear:both;
}.clear_l{clear:left;
}.clear_r{clear:rigth;
}
/*width
宽度取值*/.w10{width:10px;}.w20{width:20px;}.w30{width:30px;}.w40{width:40px;}.w50{width:50px;}.w60{width:60px;}.w70{width:70px;}.w80{width:80px;}.w90{width:90px;}.w100{width:100px;}.w200{width:200px;}.w300{width:300px;}.w400{width:400px;}.w500{width:500px;}.w600{width:600px;}.w700{width:700px;}.w800{width:800px;}.w998{width:998px;}.w1001{width:1001px;}
/*margin
外边距取值*/.m_auto{margin:auto;}.m10{margin:10px;}.m15{margin:15px;}.m30{margin:30px;}.m_top5{margin-top:5px;}.m_top10{margin-top:10px;}.m_top_top15{margin-top:15px;}.m_top20{margin-top:20px;}.m_top30{margin-top:30px;}.m_top50{margin-top:50px;}.m_top100{margin-top:100px;}.m_bottom5{margin-bottom:5px;}.m_bottom10{margin-bottom:10px;}.m_bottom15{margin-bottom:15px;}.m_bottom20{margin-bottom:20px;}.m_bottom30{margin-bottom:30px;}.m_bottom50{margin-bottom:50px;}.m_bottom100{margin-bottom:100px;}.m_left5{margin-left:5px;}.m_left10{margin-left:10px;}.m_left15{margin-left:15px;}.m_left20{margin-left:20px;}.m_left30{margin-left:30px;}.m_left50{margin-left:50px;}.m_left100{margin-left:100px;}.m_right5{margin-right:5px;}.m_right10{margin-right:10px;}.m_right15{margin-right:15px;}.m_right20{margin-right:20px;}.m_right30{margin-right:30px;}.m_right50{margin-right:50px;}.m_right100{margin-right:100px;}
/*padding
内边距取值*/.p10{padding:10px;}.p15{padding:15px;}.p30{padding:30px;}.p_top5{padding-top:5px;}.p_top10{padding-top:10px;}.p_top15{padding-top:15px;}.p_top20{padding-top:20px;}.p_top30{padding-top:30px;}.p_top50{padding-top:50px;}.p_top100{padding-top:100px;}.p_bottom5{padding-bottom:5px;}.p_bottom10{padding-bottom:10px;}.p_bottom15{padding-bottom:15px;}.p_bottom20{padding-bottom:20px;}.p_bottom30{padding-bottom:30px;}.p_bottom50{padding-bottom:50px;}.p_bottom100{padding-bottom:100px;}.p_left5{padding-left:5px;}.p_left10{padding-left:10px;}.p_left15{padding-left:15px;}.p_left20{padding-left:20px;}.p_left30{padding-left:30px;}.p_left50{padding-left:50px;}.p_left100{padding-left:100px;}.p_right5{padding-right:5px;}.p_right10{padding-right:10px;}.p_right15{padding-right:15px;}.p_right20{padding-right:20px;}.p_right30{padding-right:30px;}.p_right50{padding-right:50px;}.p_right100{padding-right:100px;}

View Code

示例6：（来自小米）

article,
aside,
details,
figcaption,
figure,
footer,
header,
main,
nav,
section,
summary{display:block}audio,
canvas,
video{display:inline-block;*display:inline;*zoom:1}audio:not([controls]){display:none;height:0}[hidden]{display:none}html{font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}html,
button,
input,
select,
textarea{font-family:sans-serif}body{margin:0}a:active,
a:hover{outline:0}h1{font-size:2em;margin:0.67em 0}h2{font-size:1.5em;margin:0.83em 0}h3{font-size:1.17em;margin:1em 0}h4{font-size:1em;margin:1.33em 0}h5{font-size:0.83em;margin:1.67em 0}h6{font-size:0.67em;margin:2.33em 0}abbr[title]{border-bottom:1px dotted}b,
strong{font-weight:bold}blockquote{margin:1em 40px}dfn{font-style:italic}hr{-webkit-box-sizing:content-box;box-sizing:content-box;height:0}mark{background:#ff0;color:#000}p,
pre{margin:1em 0}code,
kbd,
pre,
samp{font-family:monospace, serif;_font-family:'courier new', monospace;font-size:1em}pre{white-space:pre;white-space:pre-wrap;word-wrap:break-word}q{quotes:none}q:before,
q:after{content:'';content:none}small{font-size:80%}sub,
sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}dl,
menu,
ol,
ul{margin:1em 0}dd{margin:0 0 0 40px}menu,
ol,
ul{padding:0 0 0 40px}nav ul,
nav ol{list-style:none;list-style-image:none}img{border:0;-ms-interpolation-mode:bicubic}svg:not(:root){overflow:hidden;_zoom:1}figure{margin:0}form{margin:0}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0;white-space:normal;*margin-left:-7px}button,
input,
select,
textarea{font-size:100%;margin:0;vertical-align:baseline;*vertical-align:middle}button,
input{line-height:normal}button,
select{text-transform:none}button,
html input[type="button"],
input[type="reset"],
input[type="submit"]{-webkit-appearance:button;cursor:pointer;*overflow:visible}button[disabled],
html input[disabled]{cursor:default}input[type="checkbox"],
input[type="radio"]{-webkit-box-sizing:border-box;box-sizing:border-box;padding:0;*height:13px;*width:13px}input[type="search"]{-webkit-appearance:textfield;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}button::-moz-focus-inner,
input::-moz-focus-inner{border:0;padding:0}textarea{overflow:auto;vertical-align:top}table{border-collapse:collapse;border-spacing:0}body{font:14px/1.5 "Helvetica Neue", Helvetica, Arial, "Microsoft Yahei", "Hiragino Sans GB", "Heiti SC", "WenQuanYi Micro Hei", sans-serif;color:#333;background-color:#fff;min-width:1226px}a{color:#757575;text-decoration:none}a:hover{color:#ff6700;text-decoration:none}.clearfix{*zoom:1}.clearfix:before,
.clearfix:after{content:" ";display:table}.clearfix:after{clear:both}.hide{display:none !important}.ir{display:block;text-align:left;text-indent:-9999em;overflow:hidden;_zoom:1}.sep,
.ndash{margin:0 .25em;font-family:sans-serif}.container{width:1226px;*zoom:1;margin-right:auto;margin-left:auto}.container:before,
.container:after{content:" ";display:table}.container:after{clear:both}.row{margin-left:-14px;_margin-left:0;*zoom:1}.row:before,
.row:after{content:" ";display:table}.row:after{clear:both}.page-main{background:#f5f5f5}.span1,
.span2,
.span3,
.span4,
.span5,
.span6,
.span7,
.span8,
.span9,
.span10,
.span11,
.span12,
.span13,
.span14,
.span15,
.span16,
.span17,
.span18,
.span19,
.span20{float:left;margin-left:14px;min-height:1px}.span1{width:48px}.span-first{_margin-left:0}.span2{width:110px}.span-first{_margin-left:0}.span3{width:172px}.span-first{_margin-left:0}.span4{width:234px}.span-first{_margin-left:0}.span5{width:296px}.span-first{_margin-left:0}.span6{width:358px}.span-first{_margin-left:0}.span7{width:420px}.span-first{_margin-left:0}.span8{width:482px}.span-first{_margin-left:0}.span9{width:544px}.span-first{_margin-left:0}.span10{width:606px}.span-first{_margin-left:0}.span11{width:668px}.span-first{_margin-left:0}.span12{width:730px}.span-first{_margin-left:0}.span13{width:792px}.span-first{_margin-left:0}.span14{width:854px}.span-first{_margin-left:0}.span15{width:916px}.span-first{_margin-left:0}.span16{width:978px}.span-first{_margin-left:0}.span17{width:1040px}.span-first{_margin-left:0}.span18{width:1102px}.span-first{_margin-left:0}.span19{width:1164px}.span-first{_margin-left:0}.span20{width:1226px}.span-first{_margin-left:0}.offset1{margin-left:48px}.offset2{margin-left:110px}.offset3{margin-left:172px}.offset4{margin-left:234px}.offset5{margin-left:296px}.offset6{margin-left:358px}.offset7{margin-left:420px}.offset8{margin-left:482px}.offset9{margin-left:544px}.offset10{margin-left:606px}.offset11{margin-left:668px}.offset12{margin-left:730px}.offset13{margin-left:792px}.offset14{margin-left:854px}.offset15{margin-left:916px}.offset16{margin-left:978px}.offset17{margin-left:1040px}.offset18{margin-left:1102px}.offset19{margin-left:1164px}.offset20{margin-left:1226px}@font-face{font-family:'iconfont';src:url("/i/font/iconfont.eot");src:url("/i/font/iconfont.eot?#iefix") format("embedded-opentype")}@font-face{font-family:'iconfont';
/*被删除了*/font-weight:normal}.iconfont{font-family:"iconfont" !important;font-style:normal;-webkit-font-smoothing:antialiased;-webkit-text-stroke-width:0.2px;-moz-osx-font-smoothing:grayscale}.btn{display:inline-block;*zoom:1;*display:inline;width:158px;height:38px;padding:0;margin:0;border:1px solid #b0b0b0;font-size:14px;line-height:38px;text-align:center;color:#b0b0b0;cursor:pointer;-webkit-transition:all .4s;transition:all .4s}.btn:hover{text-decoration:none;color:#b0b0b0}.btn:focus{outline:0}.btn:active{-webkit-box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.18);box-shadow:inset 0 2px 4px rgba(0, 0, 0, 0.18)}.btn[disabled]{border-style:dashed !important;border-color:#e0e0e0;background-color:#fff !important;color:#b0b0b0 !important;cursor:default !important}.btn-disabled{background:#e0e0e0 !important;border-color:#e0e0e0 !important;color:#b0b0b0 !important;cursor:default !important}.btn-small{width:118px;height:28px;font-size:12px;line-height:28px}.btn-large{width:178px;height:48px;line-height:48px}.btn-block{display:block;width:100%;padding-left:0;padding-right:0}input.btn,
button.btn{width:160px;height:40px}input.btn-small,
button.btn-small{width:120px;height:30px}input.btn-large,
button.btn-large{width:180px;height:50px}.btn-gray{background:#b0b0b0;border-color:#b0b0b0;color:#fff}.btn-gray:hover{background-color:#757575;border-color:#757575;color:#fff}.btn-primary{background:#ff6700;border-color:#ff6700;color:#fff}.btn-primary:hover{background-color:#f25807;border-color:#f25807;color:#fff}.btn-green{background:#83c44e;border-color:#83c44e;color:#fff}.btn-green:hover{background-color:#71b639;border-color:#71b639;color:#fff}.btn-orange{background:#ffac13;border-color:#ffac13;color:#fff}.btn-orange:hover{background-color:#ff920f;border-color:#ff920f;color:#fff}.btn-gold{background:#ffd600;border-color:#ffd600;color:#fff}.btn-gold:hover{background-color:#fec517;border-color:#fec517;color:#fff}.btn-ocean{background:#2196f3;border-color:#2196f3;color:#fff}.btn-ocean:hover{background-color:#0c80dc;border-color:#0c80dc;color:#fff}.btn-blue{background:#545ad0;border-color:#545ad0;color:#fff}.btn-blue:hover{background-color:#494fc5;border-color:#494fc5;color:#fff}.btn-red{background:#e53935;border-color:#e53935;color:#fff}.btn-red:hover{background-color:#e42a27;border-color:#e42a27;color:#fff}.btn-purple{background:#a31daf;border-color:#a31daf;color:#fff}.btn-purple:hover{background-color:#9715a2;border-color:#9715a2;color:#fff}.btn-pink{background:#f93e7a;border-color:#f93e7a;color:#fff}.btn-pink:hover{background-color:#e9306c;border-color:#e9306c;color:#fff}.btn-cyan{background:#00c0a5;border-color:#00c0a5;color:#fff}.btn-cyan:hover{background-color:#03b3ad;border-color:#03b3ad;color:#fff}.btn-line-gray{border-color:#b0b0b0;background:#fff;color:#757575}.btn-line-gray:hover{color:#fff;background-color:#757575;border-color:#757575}.btn-line-primary{border-color:#ff6700;background:#fff;color:#ff6700}.btn-line-primary:hover{color:#fff;background-color:#f25807;border-color:#f25807}.btn-line-green{border-color:#83c44e;background:#fff;color:#83c44e}.btn-line-green:hover{color:#fff;background-color:#71b639;border-color:#71b639}.btn-line-orange{border-color:#ffac13;background:#fff;color:#ffac13}.btn-line-orange:hover{color:#fff;background-color:#ff920f;border-color:#ff920f}.btn-line-gold{border-color:#ffd600;background:#fff;color:#ffd600}.btn-line-gold:hover{color:#fff;background-color:#fec517;border-color:#fec517}.btn-line-ocean{border-color:#2196f3;background:#fff;color:#2196f3}.btn-line-ocean:hover{color:#fff;background-color:#0c80dc;border-color:#0c80dc}.btn-line-blue{border-color:#545ad0;background:#fff;color:#545ad0}.btn-line-blue:hover{color:#fff;background-color:#494fc5;border-color:#494fc5}.btn-line-red{border-color:#e53935;background:#fff;color:#e53935}.btn-line-red:hover{color:#fff;background-color:#e42a27;border-color:#e42a27}.btn-line-purple{border-color:#a31daf;background:#fff;color:#a31daf}.btn-line-purple:hover{color:#fff;background-color:#9715a2;border-color:#9715a2}.btn-line-pink{border-color:#f93e7a;background:#fff;color:#f93e7a}.btn-line-pink:hover{color:#fff;background-color:#e9306c;border-color:#e9306c}.btn-line-cyan{border-color:#00c0a5;background:#fff;color:#00c0a5}.btn-line-cyan:hover{color:#fff;background-color:#03b3ad;border-color:#03b3ad}.input-label{position:absolute;left:12px;top:11px;z-index:2;padding:0 3px;font-size:14px;line-height:18px;color:#b0b0b0;background:transparent;cursor:text;-webkit-transition:all .2s linear;transition:all .2s linear}.input-text{width:186px;height:18px;padding:10px 16px;border:1px solid #e0e0e0;font-size:14px;line-height:18px;background:#fff;-webkit-transition:border-color .2s linear;transition:border-color .2s linear}.input-text:hover{border-color:#b0b0b0}.input-text:focus{outline:0}textarea.input-text{height:3em;resize:vertical}.xm-select{display:block;width:220px;margin-right:14px}.xm-select label{position:absolute;right:14px;top:11px;z-index:1;width:16px;height:16px;padding:0;font-size:16px;line-height:1;color:#b0b0b0;cursor:pointer;pointer-events:none}.xm-select select{-webkit-box-sizing:border-box;box-sizing:border-box;width:120%;max-width:120%;min-width:120%;height:38px;margin:0;border:0;padding:0 16px;-webkit-appearance:none;-moz-appearance:none;appearance:none;font-size:14px;font-weight:400;line-height:38px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;_zoom:1;vertical-align:middle;background:none;color:#333;outline:none;cursor:pointer}.xm-select .dropdown{position:relative;display:block;overflow:hidden;_zoom:1;width:100%;max-width:100%;height:38px;border:1px solid #e0e0e0;background:#fff;color:#333;-webkit-transition:border-color .2s linear;transition:border-color .2s linear}.xm-select:hover .dropdown{border-color:#b0b0b0}.xm-ie-select label{display:none}.xm-ie-select select{-webkit-box-sizing:content-box;box-sizing:content-box;width:96%;max-width:96%;min-width:96%;height:28px;line-height:28px;padding:0 2%}.xm-ie-select .dropdown{height:33px;*height:32px;padding-top:5px;*padding-top:8px;*border:0}.form-section{position:relative;margin:0 0 14px;padding:0;border:0;text-align:left}.form-section .input-text::-webkit-input-placeholder{color:#fff}.form-section .input-text::-moz-placeholder{color:#fff}.form-section .input-text:-ms-input-placeholder{color:#fff}.form-section .input-text::placeholder{color:#fff}.form-section .input-text[disabled]{background-color:#f5f5f5}.form-section .input-text[disabled]::-webkit-input-placeholder{color:#f5f5f5}.form-section .input-text[disabled]::-moz-placeholder{color:#f5f5f5}.form-section .input-text[disabled]:-ms-input-placeholder{color:#f5f5f5}.form-section .input-text[disabled]::placeholder{color:#f5f5f5}.form-section .msg{position:absolute;left:10px;top:-26px;z-index:5;padding:6px 12px;margin:0;font-size:12px;-webkit-box-shadow:0 3px 4px rgba(0, 0, 0, 0.18);box-shadow:0 3px 4px rgba(0, 0, 0, 0.18)}.form-section .msg-error{visibility:hidden;visibility:visible \9;display:none \9;opacity:0;filter:alpha(opacity=0)\9;background-color:#e53935;color:#fff;-webkit-transform:translate3d(0, 5px, 0);transform:translate3d(0, 5px, 0);-webkit-transition:all .2s;transition:all .2s}.form-section .msg-error:after{position:absolute;top:30px;left:15px;width:12px;height:6px;content:'';background:url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAwAAAAGCAYAAAD37n+BAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyhpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNS1jMDIxIDc5LjE1NTc3MiwgMjAxNC8wMS8xMy0xOTo0NDowMCAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wTU09Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9tbS8iIHhtbG5zOnN0UmVmPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvc1R5cGUvUmVzb3VyY2VSZWYjIiB4bWxuczp4bXA9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC8iIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6MkY4QzZBOTEzMDMyMTFFNTlCQzFDMTI2ODdDRkMyNzciIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6MkY4QzZBOTAzMDMyMTFFNTlCQzFDMTI2ODdDRkMyNzciIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTQgKE1hY2ludG9zaCkiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpBQTZCNDRFMzJFOTAxMUU1OUJDMUMxMjY4N0NGQzI3NyIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpBQTZCNDRFNDJFOTAxMUU1OUJDMUMxMjY4N0NGQzI3NyIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PoqQVgUAAABNSURBVHjaYnxhrlvPwMDQwEAcaGACEo1AXE+EYpCaRiYop4mApnqoGgYmJEGQQB0WxXUwxegaQKAZiGuR+LVQMThgwWJiCw42GAAEGADDKgvj76U41wAAAABJRU5ErkJggg==") no-repeat 50% 50%}.form-section-focus .input-text{border-color:#ff6700}.form-section-focus .input-text::-webkit-input-placeholder{color:#b0b0b0;-webkit-transition:color .2s .2s linear;transition:color .2s .2s linear}.form-section-focus .input-text::-moz-placeholder{color:#b0b0b0;transition:color .2s .2s linear}.form-section-focus .input-text:-ms-input-placeholder{color:#b0b0b0;transition:color .2s .2s linear}.form-section-focus .input-text::placeholder{color:#b0b0b0;-webkit-transition:color .2s .2s linear;transition:color .2s .2s linear}.form-section-focus .input-label{color:#ff6700}.form-section-focus .msg-error{display:block \9;visibility:visible;opacity:1;filter:alpha(opacity=100)\9;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.form-section-active .input-label{top:-7px;font-size:12px;background:#fff}.form-section-error textarea.input-text,
.form-section-error input.input-text{background:url("../i/icon/input-err.png") no-repeat 95% 50%}.loading{padding:20px 0}.loader{position:relative;margin:0 auto;width:4px;height:20px;background:#ff6700;overflow:visible;-webkit-animation-delay:0s;animation-delay:0s;-webkit-transform:scale(1, 1);-ms-transform:scale(1, 1);transform:scale(1, 1)}.loader,
.loader:before,
.loader:after{-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-animation-name:loader;animation-name:loader;-webkit-animation-duration:.3s;animation-duration:.3s;-webkit-animation-timing-function:linear;animation-timing-function:linear;-webkit-animation-iteration-count:infinite;animation-iteration-count:infinite;-webkit-animation-direction:alternate-reverse;animation-direction:alternate-reverse}.loader:before,
.loader:after{position:absolute;left:50%;top:50%;width:4px;height:20px;content:'';background:#ff6700}.loader:before{margin:-10px 0 0 -10px;-webkit-animation-delay:.25s;animation-delay:.25s;-webkit-transform:scale(1, 0.3);-ms-transform:scale(1, 0.3);transform:scale(1, 0.3)}.loader:after{margin:-10px 0 0 6px;-webkit-animation-delay:.5s;animation-delay:.5s;-webkit-transform:scale(1, 0.5);-ms-transform:scale(1, 0.5);transform:scale(1, 0.5)}.loader-white,
.loader-white:before,
.loader-white:after{background:#fff}.loader-gray,
.loader-gray:before,
.loader-gray:after{background:rgba(0, 0, 0, 0.3);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr="#4c000000", endColorstr="#4c000000")\9}@-webkit-keyframes loader{0% {
-webkit-transform:scale(1, 0.5);opacity:.2;filter:alpha(opacity=20)\9}100%{-webkit-transform:scale(1, 1);opacity:1;filter:alpha(opacity=100)\9}}
@keyframes loader{0% {
-webkit-transform:scale(1, 0.5);transform:scale(1, 0.5);opacity:.2;filter:alpha(opacity=20)\9}100%{-webkit-transform:scale(1, 1);transform:scale(1, 1);opacity:1;filter:alpha(opacity=100)\9}}
.fade{opacity:0;filter:alpha(opacity=0)\9;-webkit-transition:opacity .15s linear;transition:opacity .15s linear}.fade.in{opacity:1;filter:alpha(opacity=100)\9}.modal-backdrop{position:fixed !important;_position:absolute;top:0;right:0;bottom:0;left:0;z-index:1040;background-color:#000}.modal-backdrop.fade{opacity:0;filter:alpha(opacity=0)\9}.modal-backdrop,
.modal-backdrop.fade.in{opacity:0.5;filter:alpha(opacity=50)\9}.modal{position:fixed !important;top:50%;left:50%;_position:absolute;_top:15%;_margin-top:0;z-index:1050;width:660px;margin-left:-330px;margin-top:-300px;background-color:#fff;outline:none}.modal.fade{-webkit-transition:opacity .4s linear, top .4s ease-out;transition:opacity .4s linear, top .4s ease-out;top:-25%}.modal.fade.in{top:50%;_top:15%}.modal .close{position:absolute;top:14px;right:14px;width:30px;height:30px;line-height:30px;text-align:center;color:#757575;cursor:pointer;-webkit-transition:all .2s;transition:all .2s;z-index:10;border-radius:15px}.modal .close:hover{color:#fff;background-color:#e53935}.modal .close .iconfont{font-size:24px;font-weight:200;vertical-align:middle}.modal-hide{display:none}.modal-header,
.modal-hd{position:relative;height:32px;padding:14px 20px;background-color:#f5f5f5}.modal-header h3,
.modal-header .title,
.modal-hd h3,
.modal-hd .title{margin:0;font-size:18px;font-weight:400;line-height:32px;color:#424242}.modal-body,
.modal-bd{position:relative;max-height:400px;padding:40px 60px}.modal-footer,
.modal-ft{height:40px;padding:20px 0;border-top:1px solid #e0e0e0;text-align:center;background-color:#f5f5f5;*zoom:1}.modal-footer:before,
.modal-footer:after,
.modal-ft:before,
.modal-ft:after{content:" ";display:table}.modal-footer:after,
.modal-ft:after{clear:both}.modal-footer .btn,
.modal-ft .btn{margin:0 7px}.modal-alert{width:500px;margin-left:-250px}.modal-alert .modal-bd{padding:60px 60px 40px;text-align:center}.modal-alert .text{min-height:130px}.modal-alert h3,
.modal-alert .title{margin:0;font-size:30px;font-weight:400;line-height:50px;color:#424242}.modal-alert p{margin:0;font-size:18px;line-height:30px;color:#b0b0b0}.modal-alert .actions .btn{margin:0 7px}.breadcrumbs{height:40px;font-size:12px;line-height:40px;background:#f5f5f5;color:#616161}.breadcrumbs a{color:#757575}.breadcrumbs a:hover{color:#424242}.breadcrumbs .sep{margin:0 0.5em;color:#b0b0b0}.xm-pagenavi{height:30px;padding:15px 0;text-align:center}.xm-pagenavi .numbers{display:inline-block;*zoom:1;*display:inline;width:48px;height:24px;padding:3px 0;margin:0 7px;font-size:18px;font-weight:200;line-height:24px;color:#b0b0b0}.xm-pagenavi .iconfont{font-size:24px;vertical-align:bottom}.xm-pagenavi a.numbers{-webkit-transition:all .2s linear;transition:all .2s linear}.xm-pagenavi a.numbers:hover{background:#b0b0b0;color:#fff}.xm-pagenavi .current{background-color:#757575;color:#fff}.xm-carousel-list{margin:0;padding:0;list-style-type:none}.xm-carousel-list li{float:left;width:234px;margin-right:14px}.xm-carousel-col-4-list li{width:296px}.xm-carousel-col-5-list li{float:left;width:234px}.xm-controls .control{display:inline-block;*zoom:1;*display:inline;text-align:center;color:#b0b0b0;-webkit-transition:color .5s;transition:color .5s}.xm-controls .control:focus{outline:0}.xm-controls .control:hover,
.xm-controls .control.active{color:#ff6700}.xm-controls-small .control{width:24px;height:16px;padding:16px 0;font-size:16px;line-height:16px}.xm-controls-middle .control{width:48px;height:48px;padding:24px 0;font-size:48px;line-height:48px}.xm-controls-large .control{width:64px;height:64px;padding:16px 0;font-size:64px;line-height:64px}.xm-controls-line-small .control{width:24px;height:16px;padding:3px 5px;border:1px solid #e0e0e0;font-size:16px;line-height:16px}.xm-controls-line-small .control-disabled,
.xm-controls-small .control-disabled,
.xm-controls-middle .control-disabled,
.xm-controls-large .control-disabled{color:#e0e0e0}.xm-controls-line-small .control-disabled:hover,
.xm-controls-line-small .control-disabled.active,
.xm-controls-small .control-disabled:hover,
.xm-controls-small .control-disabled.active,
.xm-controls-middle .control-disabled:hover,
.xm-controls-middle .control-disabled.active,
.xm-controls-large .control-disabled:hover,
.xm-controls-large .control-disabled.active{color:#e0e0e0}.xm-controls-block-small .control,
.xm-controls-block-middle .control{background-color:#b0b0b0;background-color:rgba(66, 66, 66, 0.2);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr="#33424242", endColorstr="#33424242")\9;color:#fff;-webkit-transition:background-color .5s;transition:background-color .5s}.xm-controls-block-small .control:hover,
.xm-controls-block-small .control.active,
.xm-controls-block-middle .control:hover,
.xm-controls-block-middle .control.active{color:#fff;background-color:#757575;background-color:rgba(66, 66, 66, 0.6);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr="#99424242", endColorstr="#99424242")\9}.xm-controls-block-small .control-disabled,
.xm-controls-block-middle .control-disabled{color:#fafafa}.xm-controls-block-small .control-disabled:hover,
.xm-controls-block-small .control-disabled.active,
.xm-controls-block-middle .control-disabled:hover,
.xm-controls-block-middle .control-disabled.active{color:#fafafa}.xm-controls-block-small .control{width:20px;height:24px;padding:12px 0;font-size:18px;line-height:24px}.xm-controls-block-middle .control{width:36px;height:48px;padding:24px 0;font-size:36px;line-height:48px}.xm-controls .control-disabled{cursor:default}.xm-pagers-wrapper{text-align:center}.xm-pagers{margin:0;padding:0;list-style-type:none}.xm-pagers .dot{display:block;width:6px;height:6px;border:2px solid #f5f5f5;border-radius:6px;text-align:left;text-indent:-9999em;overflow:hidden;_zoom:1;background-color:#b0b0b0;-webkit-transition:all .5s;transition:all .5s}.xm-pagers .pager{display:inline-block;*zoom:1;*display:inline;width:10px;height:10px;padding:10px;margin:0 2px;cursor:pointer}.xm-pagers .pager:hover .dot{background:#ff6700}.xm-pagers .pager-active{cursor:default}.xm-pagers .pager-active .dot,
.xm-pagers .pager-active:hover .dot{border-color:#ff6700;background-color:#f5f5f5;background-color:transparent}.site-topbar{position:relative;z-index:30;height:40px;font-size:12px;color:#b0b0b0;background:#333}.site-topbar a{color:#b0b0b0}.site-topbar a:hover{color:#fff}.site-topbar .sep{margin:0 .5em;color:#424242}.site-topbar .topbar-nav{float:left;height:40px;line-height:40px;overflow:hidden;_zoom:1}.site-topbar .topbar-cart,
.site-topbar .topbar-info{position:relative;float:right;_display:inline;height:40px}.site-topbar .topbar-cart{width:120px;margin-left:15px}.site-topbar .topbar-cart-filled .cart-mini{color:#fff;background:#ff6700}.site-topbar .topbar-cart-active .cart-mini{color:#ff6700;background:#fff}.site-topbar .topbar-info{line-height:40px}.site-topbar .topbar-info .link,
.site-topbar .topbar-info .user,
.site-topbar .topbar-info .message,
.site-topbar .topbar-info .sep{float:left}.site-topbar .topbar-info .link{padding:0 5px;text-align:center}.site-topbar .topbar-info .link-order{width:70px}.site-topbar .topbar-info .sep{margin:0}.site-topbar .cart-mini{position:relative;z-index:32;display:block;height:40px;line-height:40px;text-align:center;color:#b0b0b0;background:#424242}.site-topbar .cart-mini i{margin-right:4px;font-size:20px;line-height:20px;vertical-align:-4px}.site-topbar .cart-mini-num{margin-left:-4px}.site-topbar .cart-menu{display:none;position:absolute;right:0;right:-1px \9;top:40px;z-index:31;width:316px;padding:15px 0 0;color:#424242;background:#fff;border:1px solid #e0e0e0 \9;border-top:0 \9;-webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.15);box-shadow:0 2px 10px rgba(0, 0, 0, 0.15)}.site-topbar .cart-menu .loading{margin:5px 20px 20px;text-align:center}.site-topbar .cart-menu .msg{margin:5px 20px 20px;text-align:center}.site-topbar .cart-list{*position:relative;margin:0;padding:0;list-style-type:none}.site-topbar .cart-list li{position:relative;height:80px;padding:0 20px}.site-topbar .cart-list li:first-child .cart-item,
.site-topbar .cart-list li.first .cart-item{border-top:0}.site-topbar .cart-item{position:relative;height:60px;padding:10px 0;border-top:1px solid #e0e0e0;line-height:20px}.site-topbar .cart-item:hover .btn-del{display:block}.site-topbar .cart-item .thumb{float:left;margin-right:10px}.site-topbar .cart-item .thumb img{width:60px;height:60px}.site-topbar .cart-item .name{float:left;_display:inline;width:95px;height:40px;margin:10px 0;color:#424242}.site-topbar .cart-item a.name:hover{color:#ff6700}.site-topbar .cart-item .price{float:right;_display:inline;margin:10px 20px 0 5px}.site-topbar .cart-item .btn-del{display:none;_display:block;position:absolute;top:21px;right:0}.site-topbar .cart-item .btn-del:hover{color:#424242}.site-topbar .cart-item .btn-del i{font-size:16px;line-height:16px}.site-topbar .cart-total{padding:15px 20px;background:#fafafa}.site-topbar .cart-total em{font-style:normal}.site-topbar .cart-total .total{float:left;width:135px;color:#757575}.site-topbar .cart-total .price{display:block;font-weight:400;color:#ff6700}.site-topbar .cart-total .price em{font-size:24px;line-height:1}.site-topbar .cart-total .btn-cart{float:right;width:130px;padding:0;font-size:14px;line-height:40px;text-align:center;color:#f5f5f5;background:#ff6700}.site-topbar .user{position:relative;width:110px;padding:0;white-space:nowrap}.site-topbar .user-name{position:relative;z-index:5;display:block;width:120px;height:40px;text-align:center}.site-topbar .user-name .name{display:inline-block;*zoom:1;*display:inline;width:auto;_width:75px;max-width:75px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;_zoom:1;vertical-align:text-bottom}.site-topbar .user-name i{font-size:24px;line-height:24px;vertical-align:9px}.site-topbar .user-menu{display:none;position:absolute;left:0;left:-1px \9;top:40px;z-index:3;width:120px;margin:0;padding:7px 0;border:1px solid #e0e0e0 \9;border-top:0 \9;list-style-type:none;background:#fff;-webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.15);box-shadow:0 2px 10px rgba(0, 0, 0, 0.15)}.site-topbar .user-menu a{display:block;padding:3px 30px;line-height:2}.site-topbar .user-active a{color:#424242}.site-topbar .user-active a:hover{color:#ff6700}.site-topbar .user-active .user-name{background:#fff}.site-topbar .user-active .user-menu a{-webkit-transition:all .2s;transition:all .2s}.site-topbar .user-active .user-menu a:hover{background-color:#f5f5f5}.site-topbar .message{padding:0 10px}.site-topbar .message i{font-style:normal}.site-header{position:relative;z-index:20;height:100px}.site-header .container{position:relative}.site-header .header-logo{float:left;width:62px;margin-top:22px}.site-header .header-nav{float:left;width:850px}.site-header .header-search{float:right;width:296px;margin-top:25px}.site-header .logo{position:relative;display:block;width:55px;height:55px;overflow:hidden;_zoom:1;background-color:#ff6700;*background:url(/i/logo.png) no-repeat 50% 50%}.site-header .logo:before,
.site-header .logo:after{position:absolute;left:0;top:0;z-index:1;width:55px;height:55px;content:'';-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;transform-origin:50% 50%;-webkit-transition:all .2s;transition:all .2s}.site-header .logo:before{background:url(../i/mi-logo.png) no-repeat 50% 50%;opacity:1;filter:alpha(opacity=100)\9;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.site-header .logo:after{background:url(../i/mi-home.png) no-repeat 50% 50%;opacity:0;filter:alpha(opacity=0)\9;margin-left:-55px;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.site-header .logo:focus{outline:0}.site-header .logo:hover:before{opacity:0;filter:alpha(opacity=0)\9;-webkit-transform:translate3d(55px, 0, 0);transform:translate3d(55px, 0, 0)}.site-header .logo:hover:after{opacity:1;filter:alpha(opacity=100)\9;-webkit-transform:translate3d(55px, 0, 0);transform:translate3d(55px, 0, 0)}.site-header .logo:active:after{-webkit-transform:translate3d(55px, 0, 0) scale(0.9);transform:translate3d(55px, 0, 0) scale(0.9)}.site-header .nav-list{position:relative;z-index:10;float:left;width:820px;height:88px;margin:0;padding:12px 0 0 30px;list-style-type:none;font-size:16px}.site-header .nav-item{float:left}.site-header .nav-item .link{display:block;padding:26px 10px 38px;*padding:26px 10px 38px;color:#333}.site-header .nav-item .link:focus{outline:0}.site-header .nav-item .item-children{display:none}.site-header .nav-category{position:relative;float:left;width:127px;padding-right:15px}.site-header .nav-category .link-category{display:block;padding:26px 0 38px;text-align:right;color:#333}.site-header .nav-item-active{position:relative}.site-header .nav-item-active .link{color:#ff6700}.site-header .nav-item-active:after{position:absolute;top:50px;left:50%;width:600px;height:40px;margin-left:-300px;content:'';background-color:transparent}.site-header .header-nav-menu{position:absolute;top:100px;left:0;z-index:24;width:100%;height:229px;border-top:1px solid #e0e0e0;background:#fff;overflow:hidden;_zoom:1}.site-header .header-nav-menu .children-list{margin:0;padding:0;list-style-type:none;font-size:12px}.site-header .header-nav-menu .children-list li{position:relative;float:left;width:180px;padding:35px 12px 0;text-align:center}.site-header .header-nav-menu .children-list li:before{position:absolute;left:0;top:35px;z-index:1;width:1px;height:100px;content:"";background-color:#e0e0e0}.site-header .header-nav-menu .children-list .first:before{display:none}.site-header .header-nav-menu .figure-thumb{width:160px;height:110px;margin:0 auto 16px;text-align:center}.site-header .header-nav-menu .figure-thumb img{width:160px;height:110px}.site-header .header-nav-menu .figure-thumb a{display:block}.site-header .header-nav-menu .title{margin:0;line-height:20px;color:#333}.site-header .header-nav-menu .title,
.site-header .header-nav-menu .title a{color:#333}.site-header .header-nav-menu .price{margin:0;line-height:20px;color:#ff6700}.site-header .header-nav-menu .flags{position:absolute;top:0;left:0;z-index:1;width:100%;font-size:12px;text-align:center}.site-header .header-nav-menu .flag{display:inline-block;*zoom:1;*display:inline;height:18px;padding:1px 20px;background-color:#e53935;color:#fff}.site-header .header-nav-menu-active{border-bottom:1px solid #e0e0e0 \9;-webkit-box-shadow:0 3px 4px rgba(0, 0, 0, 0.18);box-shadow:0 3px 4px rgba(0, 0, 0, 0.18);-webkit-transition:-webkit-box-shadow .2s;transition:box-shadow .2s}.site-header .search-form{position:relative;width:296px;height:50px}.site-header .search-form .keyword-list{position:absolute;left:0;top:50px;_top:51px;z-index:20;width:243px;border:1px solid #ff6700;border-top:0;background:#fff}.site-header .search-form .keyword-list ul{margin:0;padding:0;list-style-type:none}.site-header .search-form .keyword-list li.active,
.site-header .search-form .keyword-list li:hover{background:#fafafa}.site-header .search-form .keyword-list li a{position:relative;display:block;padding:6px 15px;font-size:12px;color:#424242}.site-header .search-form .keyword-list li .keyword{color:#ff6700}.site-header .search-form .keyword-list li .result{position:absolute;right:15px;top:6px;color:#b0b0b0}.site-header .search-form:hover .search-text{border-color:#b0b0b0}.site-header .search-form:hover .search-btn{border-color:#b0b0b0}.site-header .search-form:hover .search-btn:hover{border-color:#ff6700}.site-header .search-form-focus:hover .search-text{border-color:#ff6700}.site-header .search-form-focus:hover .search-btn{border-color:#ff6700}.site-header .search-form-focus .search-text{border-color:#ff6700}.site-header .search-form-focus .search-btn{border-color:#ff6700}.site-header .search-form-focus .search-btn:hover{background-color:#ff6700;color:#fff}.site-header .search-text{position:absolute;top:0;right:51px;z-index:1;width:223px;height:48px;padding:0 10px;border:1px solid #e0e0e0;font-size:14px;line-height:48px;outline:0;-webkit-transition:all .2s;transition:all .2s}.site-header .search-btn{position:absolute;right:0;top:0;z-index:2;width:52px;height:50px;border:1px solid #e0e0e0;font-size:24px;line-height:24px;background:#fff;color:#616161;outline:0;-webkit-transition:all .2s;transition:all .2s}.site-header .search-btn:hover{background:#ff6700;color:#fff}.site-header .search-hot-words{position:absolute;top:14px;right:62px;z-index:2;text-align:right}.site-header .search-hot-words a{display:inline-block;*zoom:1;*display:inline;margin-left:5px;padding:0 5px;font-size:12px;background:#eee;color:#757575;-webkit-transition:all .2s;transition:all .2s}.site-header .search-hot-words a:hover{background:#ff6700;color:#fff}.site-category{display:none;position:absolute;top:88px;left:-92px;z-index:21;width:234px;height:460px;font-size:14px}.site-category-list{height:418px;margin:0;padding:20px 0;list-style-type:none;border:1px solid #ff6700;color:#424242;background:#fff}.site-category-list .category-item-active .title{background:#ff6700;color:#fff}.site-category-list .category-item-active .title i{color:#fff;color:rgba(255, 255, 255, 0.5)}.site-category-list .category-item-active .children{display:block}.site-category-list .title{position:relative;display:block;padding-left:30px;height:42px;line-height:42px;color:#424242}.site-category-list .title i{position:absolute;top:12px;right:20px;font-size:16px;line-height:16px;color:#e0e0e0}.site-category-list .children-list{height:458px;margin:0;padding:2px 0;list-style-type:none}.site-category-list .children-list li{position:relative;float:left;width:265px;height:76px}.site-category-list .children-list li.star-goods .link{width:170px;padding-right:0}.site-category-list .children-list .link{display:block;padding:18px 20px;line-height:40px;color:#333;-webkit-transition:color .2s;transition:color .2s}.site-category-list .children-list .link:hover{color:#ff6700}.site-category-list .children-list .thumb{margin-right:12px;vertical-align:middle}.site-category-list .children-list .text{line-height:40px}.site-category-list .children-list .btn-buy{position:absolute;right:10px;top:26px;width:58px;height:22px;line-height:22px}.site-category-list .children-list-col{float:left;width:265px}.site-category-list .children{display:none;position:absolute;left:234px;top:0;z-index:24;height:458px;border:1px solid #e0e0e0;border-left:0;background:#fff;-webkit-box-shadow:0 8px 16px rgba(0, 0, 0, 0.18);box-shadow:0 8px 16px rgba(0, 0, 0, 0.18)}.site-category-list .children-col-1{width:265px}.site-category-list .children-col-2{width:530px}.site-category-list .children-col-3{width:795px}.site-category-list .children-col-4{width:992px}.site-category-list .children-col-4 .children-list-col{width:248px}.site-footer .footer-service{padding:27px 0;border-bottom:1px solid #e0e0e0}.site-footer .list-service{margin:0;padding:0;list-style-type:none}.site-footer .list-service li{float:left;width:19.8%;height:25px;border-left:1px solid #e0e0e0;font-size:16px;line-height:25px;text-align:center}.site-footer .list-service li:first-child{border-left:0}.site-footer .list-service .iconfont{margin-right:6px;font-size:24px;line-height:24px;vertical-align:-4px}.site-footer .list-service a{color:#616161;-webkit-transition:color .2s;transition:color .2s}.site-footer .list-service a:hover{color:#ff6700}.site-footer .footer-links{padding:40px 0}.site-footer .footer-links .col-links{float:left;width:160px;height:112px;margin:0}.site-footer .footer-links .col-links dt{margin:-1px 0 26px;font-size:14px;line-height:1.25;color:#424242}.site-footer .footer-links .col-links dd{margin:10px 0 0;font-size:12px}.site-footer .footer-links .col-links a{color:#757575}.site-footer .footer-links .col-links a:hover{color:#ff6700}.site-footer .footer-links .col-contact{float:right;width:251px;height:112px;border-left:1px solid #e0e0e0;text-align:center;color:#616161}.site-footer .footer-links .col-contact p{margin:0 0 16px;font-size:12px}.site-footer .footer-links .col-contact .phone{margin:0 0 5px;font-size:22px;line-height:1;color:#ff6700}.site-info{padding:30px 0;font-size:12px;background:#fafafa}.site-info .logo{float:left;width:57px;height:57px;margin-right:10px;background:url(../i/logo-footer.png?v2) no-repeat 50% 50%}.site-info .info-text{float:left;color:#b0b0b0}.site-info .info-text p{margin:0;line-height:18px}.site-info .info-text a{color:#b0b0b0}.site-info .info-text a:hover{color:#ff6700}.site-info .info-text .sites a{color:#757575}.site-info .info-text .sites a:hover{color:#ff6700}.site-info .info-links{float:right;_display:inline;height:28px;margin:4px 0 0}.site-info .info-links img{width:auto;height:28px;margin-left:7px}.site-info .slogan{clear:both;margin:30px auto 0;width:267px;height:19px;background:url(../i/slogan2016.png) no-repeat center 0}.site-mini-header{font-size:12px;border-bottom:2px solid #ff6700;background:#fff;color:#b0b0b0}.site-mini-header .header-logo{width:93px;margin-top:26px}.site-mini-header .logo{width:48px;height:48px}.site-mini-header .logo:before,
.site-mini-header .logo:after{width:48px;height:48px}.site-mini-header .header-title{float:left;margin-top:26px}.site-mini-header .header-title h2,
.site-mini-header .header-title p{margin:0}.site-mini-header .header-title h2{font-size:28px;line-height:48px;font-weight:normal;color:#424242}.site-mini-header .header-title h2 span{margin-left:10px;color:#ff6700}.site-mini-header .has-more h2{margin-bottom:6px;line-height:1}.site-mini-header .has-more p{color:#757575;line-height:1}.site-mini-header .topbar-nav{float:left;height:40px;line-height:40px;overflow:hidden;_zoom:1}.site-mini-header .topbar-cart,
.site-mini-header .topbar-info{position:relative;float:right;_display:inline;height:40px}.site-mini-header .topbar-cart{width:115px;margin-left:15px}.site-mini-header .topbar-cart-filled .cart-mini{color:#fff;background:#ff6700}.site-mini-header .topbar-cart-active .cart-mini{color:#ff6700;background:#fff}.site-mini-header .topbar-info{line-height:40px}.site-mini-header .topbar-info .link,
.site-mini-header .topbar-info .user,
.site-mini-header .topbar-info .message,
.site-mini-header .topbar-info .sep{float:left}.site-mini-header .topbar-info .link{padding:0 5px}.site-mini-header .topbar-info .sep{margin:0}.site-mini-header .user{position:relative;width:110px;padding:0;white-space:nowrap}.site-mini-header .user-name{position:relative;z-index:5;display:block;width:120px;height:40px;text-align:center}.site-mini-header .user-name .name{display:inline-block;*zoom:1;*display:inline;width:auto;_width:75px;max-width:75px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;_zoom:1;vertical-align:text-bottom}.site-mini-header .user-name i{font-size:24px;line-height:24px;vertical-align:9px}.site-mini-header .user-menu{display:none;position:absolute;left:0;left:-1px \9;top:40px;z-index:3;width:120px;margin:0;padding:7px 0;border:1px solid #e0e0e0 \9;border-top:0 \9;list-style-type:none;background:#fff;-webkit-box-shadow:0 2px 10px rgba(0, 0, 0, 0.15);box-shadow:0 2px 10px rgba(0, 0, 0, 0.15)}.site-mini-header .user-menu a{display:block;padding:3px 30px;line-height:2}.site-mini-header .user-active a{color:#424242}.site-mini-header .user-active a:hover{color:#ff6700}.site-mini-header .user-active .user-name{background:#fff}.site-mini-header .user-active .user-menu a{-webkit-transition:all .2s;transition:all .2s}.site-mini-header .user-active .user-menu a:hover{background-color:#f5f5f5}.site-mini-header .message{padding:0 10px}.site-mini-header .message i{margin-left:5px;font-style:normal;color:#e53935}.site-mini-header .topbar-info{margin-top:30px}.site-mini-header .topbar-info .sep{color:#e0e0e0}.site-mini-header a{color:#757575}.modal-weixin .modal-bd{text-align:center}.modal-globalSites .modal-bd{text-align:center}.modal-globalSites .modal-bd h3{color:#424242;font-size:32px;margin:0}.modal-globalSites .modal-bd .modal-globalSites-tips{margin:0;font-size:18px}.modal-globalSites .modal-bd .modal-globalSites-links{width:480px;margin:30px auto 0}.modal-globalSites .modal-bd .modal-globalSites-links a{display:block;float:left;_display:inline;margin:0 20px 20px 0;width:140px;height:40px;line-height:40px;background-color:#eee}.modal-globalSites .modal-bd .modal-globalSites-links a:hover{background-color:#ff6700;color:#fff}.xm-recommend ul,
.xm-recommend li,
.xm-recommend dl,
.xm-recommend dt,
.xm-recommend dd{padding:0;margin-top:0;list-style:none}.xm-recommend ul li{margin-bottom:14px;height:300px;background-color:#fff;text-align:center;position:relative}.xm-recommend ul li:hover{z-index:2}.xm-recommend ul li:hover .dot{-webkit-box-shadow:0 15px 30px rgba(0, 0, 0, 0.1);box-shadow:0 15px 30px rgba(0, 0, 0, 0.1)}.xm-recommend ul li .dot{-webkit-transition:-webkit-box-shadow .2s linear;transition:box-shadow .2s linear}.xm-recommend ul li.pager{background-color:transparent}.xm-recommend ul.xm-carousel-list li{margin-right:14px}.xm-recommend dl{padding:0 20px;margin-bottom:0}.xm-recommend dl dt{padding:40px 0 15px;height:145px}.xm-recommend dl dd{margin-left:0}.xm-recommend .xm-recommend-name{margin-bottom:10px;height:18px;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;_zoom:1}.xm-recommend .xm-recommend-name a{color:#333}.xm-recommend .xm-recommend-price{margin-bottom:10px;color:#ff6700}.xm-recommend .xm-recommend-tips{position:relative;color:#757575}.xm-recommend .xm-recommend-tips .btn{position:absolute;left:37px;top:0;width:120px;display:none}.xm-recommend .xm-recommend-notice{position:absolute;top:0;left:0;z-index:5;width:100%;opacity:0;filter:alpha(opacity=0)\9;-webkit-transform:translate3d(0, -10px, 0);transform:translate3d(0, -10px, 0);-webkit-transition:all .2s linear;transition:all .2s linear}.xm-recommend .xm-recommend-notice .btn{border-width:0}.xm-recommend .xm-recommend-notice-active{opacity:1;filter:alpha(opacity=100)\9;-webkit-transform:translate3d(0, 0, 0);transform:translate3d(0, 0, 0)}.xm-recommend-title{position:relative;margin:0;height:50px;font-size:30px;font-weight:400;color:#757575;border-top:1px solid #e0e0e0;-webkit-font-smoothing:antialiased}.xm-recommend-title span{position:absolute;top:-20px;left:372px;height:40px;width:482px;line-height:40px;text-align:center;display:block;background-color:#f5f5f5}.modal-bigtap-queue{width:800px;height:600px;margin-left:-400px;margin-top:-300px}.modal-bigtap-queue .close{width:auto;padding:0 8px;font-size:12px}.modal-bigtap-queue .modal-body{text-align:center;padding:0}.modal-bigtap-queue .con{height:141px;overflow:hidden;_zoom:1}.modal-bigtap-queue .title{margin:30px 0 0;color:#424242;font-size:38px;font-weight:normal}.modal-bigtap-queue .queue-tip-box{margin:0 0 55px;overflow:hidden;_zoom:1}.modal-bigtap-queue .queue-tip{display:none;color:#666;margin:0;font-size:16px}.modal-bigtap-queue .queue-posters{height:459px;position:relative;overflow:hidden;_zoom:1}.modal-bigtap-queue .queue-posters .poster{width:100%;height:100%;position:absolute;top:0;left:0;z-index:1;background-repeat:no-repeat;opacity:0;filter:alpha(opacity=0)\9;-webkit-transition:opacity 1s ease, -webkit-transform 20s linear;transition:opacity 1s ease, transform 20s linear}.modal-bigtap-queue .queue-posters .poster-1{background-image:url("//c1.mifile.cn/f/i/16/base/bigtap-poster-1.jpg")}.modal-bigtap-queue .queue-posters .poster-2{background-image:url("//c1.mifile.cn/f/i/16/base/bigtap-poster-2.jpg")}.modal-bigtap-queue .queue-posters .poster-3{background-image:url("//c1.mifile.cn/f/i/16/base/bigtap-poster-3.jpg")}.modal-bigtap-queue .queue-posters .poster-4{background-image:url("//c1.mifile.cn/f/i/16/base/bigtap-poster-4.jpg")}.modal-bigtap-queue .queue-posters .poster-5{background-image:url("//c1.mifile.cn/f/i/16/base/bigtap-poster-5.jpg")}.modal-bigtap-queue .queue-posters .active{opacity:1;filter:alpha(opacity=100)\9;-webkit-transform:scale(1.2);-ms-transform:scale(1.2);transform:scale(1.2)}.modal-bigtap-queue .queue-animate{position:relative}.modal-bigtap-queue .animate-mask{width:200px;height:100%;position:absolute;top:0}.modal-bigtap-queue .animate-mask-left{left:0;background-image:-webkit-linear-gradient(left, #fff 20%, rgba(255, 255, 255, 0));background-image:-webkit-gradient(linear, left top, right top, color-stop(20%, #fff), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to right, #fff 20%, rgba(255, 255, 255, 0))}.modal-bigtap-queue .animate-mask-right{right:0;background-image:-webkit-linear-gradient(right, #fff 20%, rgba(255, 255, 255, 0));background-image:-webkit-gradient(linear, right top, left top, color-stop(20%, #fff), to(rgba(255, 255, 255, 0)));background-image:linear-gradient(to left, #fff 20%, rgba(255, 255, 255, 0))}.modal-bigtap-queue .mitu-walk{width:594px;height:270px;margin:0 auto;background:url("//c1.mifile.cn/f/i/16/base/bigtap-mitu-queue-big.png") repeat-x 0}.modal-bigtap-error{width:900px;height:500px;margin-left:-450px;margin-top:-250px}.modal-bigtap-error .modal-body{height:360px;padding:140px 50px 0 385px;background:url("//s1.mi.com/open/131101/images/mitu-2.png") no-repeat 5px 0}.modal-bigtap-error h3{color:#333;font-size:32px;line-height:1;padding:0 0 20px;margin:0}.modal-bigtap-error .error-tip{margin:0;padding-bottom:40px;line-height:28px;font-size:16px;color:#666}.modal-bigtap-mode{width:700px;height:460px;margin-left:-350px;margin-top:-230px}.modal-bigtap-mode .close{display:none}.modal-bigtap-mode .modal-body{padding-bottom:0;text-align:center}.modal-bigtap-mode .modal-body .title{margin:0 0 20px;color:#333;font-size:32px;line-height:1}.modal-bigtap-mode .modal-body .desc{margin:0;color:#666}.modal-bigtap-mode .modal-body .reload{color:#C70F0F;text-decoration:underline}.modal-bigtap-mode .modal-body .mode-loading{margin:20px 0}.modal-bigtap-mode .modal-body .input-text{display:block;margin:0 auto 20px}.modal-bigtap-mode .modal-body .mode-action{margin:20px 0 20px}.modal-bigtap-mode .modal-body .mode-con{margin-bottom:20px;font-size:16px}.modal-bigtap-mode .modal-body .mode-con .q{margin-bottom:10px}.modal-bigtap-mode .modal-body .mode-con .d{height:40px}.modal-bigtap-mode .modal-body .mode-con .refresh{font-size:12px}.modal-bigtap-mode .modal-body .mode-con .img-q span{display:inline-block;*zoom:1;*display:inline;margin:0 5px;vertical-align:middle}.modal-bigtap-mode .modal-body .mode-con .img-d{margin:10px auto}.modal-bigtap-mode .modal-body .tip{color:#C70F0F}.modal-bigtap-soldout{width:800px;height:600px;margin-left:-400px;margin-top:-300px}.modal-bigtap-soldout .modal-body{padding:0}.modal-bigtap-soldout .modal-body .content{padding:60px 0}.modal-bigtap-soldout .modal-body .content .mitu{float:left;width:240px;height:240px;margin-left:30px;background:url("http://c1.mifile.cn/f/i/16/base/bigtap-mitu-faild.png") no-repeat}.modal-bigtap-soldout .modal-body .content .title{float:left;_display:inline;width:500px;margin:45px 0 5px;font-size:36px;line-height:48px}.modal-bigtap-soldout .modal-body .content .desc{float:left;width:500px;color:#757575}.modal-bigtap-soldout .bigtap-recomment-goods .hd{margin-bottom:34px;border-top:1px solid #e0e0e0;text-align:center}.modal-bigtap-soldout .bigtap-recomment-goods .hd span{display:inline-block;*zoom:1;*display:inline;padding:0 24px;font-size:18px;line-height:24px;position:relative;top:-12px;color:#757575;background-color:#fff}.modal-bigtap-soldout .bigtap-recomment-goods ul{margin:0;padding:0;list-style:none}.modal-bigtap-soldout .bigtap-recomment-goods li{float:left;width:50%}.modal-bigtap-soldout .bigtap-recomment-goods li .pic{float:left;width:130px;height:130px;margin-right:12px;margin-left:44px;background-color:#eee}.modal-bigtap-soldout .bigtap-recomment-goods li .pic img{width:130px;height:130px}.modal-bigtap-soldout .bigtap-recomment-goods li .info{float:left;color:#333}.modal-bigtap-soldout .bigtap-recomment-goods li .info .title{margin:5px 0 8px;font-size:18px;font-weight:normal}.modal-bigtap-soldout .bigtap-recomment-goods li .info .desc{width:170px;height:40px;line-height:20px;margin:0 0 15px;overflow:hidden;_zoom:1}.modal-bigtap-soldout .bigtap-recomment-goods li .info .link{color:#ff6700}.modal-bigtap-soldout-norec{height:480px;margin-top:-240px}.modal-bigtap-soldout-norec .modal-body .bigtap-recomment-goods{display:none}.modal-bigtap-soldout-norec .modal-body .content{margin-top:60px}.modal-user-risk .modal-bd{text-align:center}.modal-user-risk .modal-bd .title{margin:0 0 5px;color:#757575;font-size:20px;font-weight:normal}.modal-user-risk .modal-bd .desc{margin:0 0 8px;color:#757575}.modal-user-risk .modal-bd .link{color:#ff6700}.modal-user-risk .modal-bd .form-section{width:310px;margin:20px auto}.modal-user-risk .modal-bd .form-section .input-text{width:276px}.modal-user-risk .modal-bd .form-section .btn{width:auto;height:40px;line-height:40px;padding:0 8px;position:absolute;top:0;right:0;border:none}.modal-user-risk .modal-bd .form-section .btn-get{color:#ff6700}.modal-user-risk .modal-bd .form-section .btn-coutdown{color:#b0b0b0}.modal-user-risk .modal-bd .tip-msg{color:#e53935}.drag-captcha-box{border-radius:5px;overflow:hidden;_zoom:1}.drag-captcha-piece{position:absolute;left:0;background-repeat:no-repeat}.drag-captcha-bg-box{position:absolute;left:0;top:0;z-index:1}.drag-captcha-refresh{position:absolute;right:10px;top:100px;z-index:2;cursor:pointer;color:#fff;font-size:16px}.drag-captcha-control{margin-top:24px;margin-bottom:5px;height:30px;line-height:30px;border-radius:15px;position:relative;background-image:-webkit-gradient(linear, left top, right top, from(#bababa), to(#959595));background-image:-webkit-linear-gradient(left, #bababa, #959595);background-image:linear-gradient(to right, #bababa, #959595)}.drag-captcha-control .handle{position:absolute;top:-5px;left:0;width:40px;height:40px;background:#eee url(http://c1.mifile.cn/f/i/16/base/drag-captcha-handle.png) no-repeat;cursor:pointer;-webkit-box-shadow:0 20px 20px rgba(0, 0, 0, 0.19);box-shadow:0 20px 20px rgba(0, 0, 0, 0.19)}.drag-captcha-control .handle-active{background-position:0 -40px}.drag-captcha-msg{text-align:center;color:#fff;opacity:.63;filter:alpha(opacity=63)\9}.drag-captcha-loading{display:none;position:absolute;top:25px;left:50%;z-index:4;width:80px;height:80px;margin-left:-40px;border-radius:5px;background-color:#fff;background-color:rgba(255, 255, 255, 0.8);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr="#ccffffff", endColorstr="#ccffffff")\9;text-align:center}.drag-captcha-loading .iconfont{display:block;margin:15px auto 5px;font-size:20px;color:#424242}.drag-captcha-loading-backdrop{display:none;position:absolute;top:0;left:0;z-index:3;width:100%;height:130px;background-color:rgba(0, 0, 0, 0.4);filter:progid: DXImageTransform.Microsoft.gradient(startColorstr="#66000000", endColorstr="#66000000")\9}.modal-addcart-captcha-drag{width:280px;height:264px;margin-top:-132px;margin-left:-140px;border-radius:5px}.modal-addcart-captcha-drag .modal-header{padding:8px 15px}.modal-addcart-captcha-drag .close{top:8px}.modal-addcart-captcha-drag .modal-body{padding:15px;text-align:center}.modal-addcart-captcha-drag .drag-captcha-wrapper{margin:0 auto}.modal-message-pop{width:930px;height:530px;margin-top:-265px;margin-left:-465px;background:none}.modal-message-pop .close{color:#fff;background-color:#e53935}.modal-message-pop .message-countdown{position:absolute;top:50px;right:14px;color:#fff;opacity:.5;filter:alpha(opacity=50)\9;z-index:10}.modal-message-pop .message-countdown em{font-style:normal}.modal-message-pop .message-link{display:block;height:530px;background-repeat:no-repeat;background-position:center bottom}

View Code

五、示例下载

github：https://github.com/zhangguo5/CSS3_2