【美高梅开户网址】CSS模块化编码让开发经济,详细表达

CSS模块化编码让开发经济

2011/11/24 · CSS · 2
评论 · 来源: CSS
wang     ·
CSS

原生JS因jQuery的”write less,do
more”变得极简,Html因语义化编码变得肯定。那么,有没有一种艺术让Css也尤为的快捷精致呢?
当然有,那便是模块化编码。

Css的模块化,我们可以知道成(抑或本人就是)OOP思想,重用性、灵活性、可扩充性便是它终极的目的,“类”便是它的骨干,OOP的多用组合少用继承一样是它的着力尺度。Css模块化是贰个最新高效的Css编码方式,若有接触过YUI
Css的情侣一定对那种办法有所明白。

怎么Css模块化,小编想那才是我们真正关心的。
小编所知道的Css模块化,应该从两大块去分别:

第②大块:

从整站全局模块化。 那点我们并不不熟悉,时常使用的reset
css便是模块化的一有个别,全局通用的书体样式,链接样式,以及通用尾部底部及主体容器等等这一个大家已经熟谙,其余诸如定义文字排版(如.f12{font-size:12px})、定位(如.tl{text-align:left})、长度高度(如.w10{width:10px})、边距(如.m10{margin:10px})等页面中会常用到的体制,这一类,我们称为Css通用原子类
(哈,与类扯上关系了,那就权当成类吧).通用原子类有八天天性:
通用性和原子性,任何页面都可以专擅行使它们,且他们只表现最基础的体制,1个通用原子类只设置3个体裁,不可再分.
关于整站全局模块化不再详述,本文前面作者会贴出阿当的《Web前端开发修炼之道》一书中常用通用原子类样式。

第贰大块:

是从视觉效果上模块化,在视觉上样式和功力相对独立稳定的部分即可视为模块。
拆分那个模块,应该尽恐怕遵守一个尺度:
模块与模块之间尽量不要包蕴相同的局地,若有一样部分就再拆出来独立成3个模块。下图是自作者画的贰个大约的页面视觉图:

美高梅开户网址 1

探望上图,菜鸟的Css编码一般是为1~4定义五个类名,为他们写各自的体制;
明智一点的写法是为1~4定义多个类名,用.a .b .c
.d{…}方式定义共同样式,然后再为各自定义不相同部分的体裁;可是,还有一种完美的法子,那便是模块化.
下边小编就上述图为例做个大致的模块化分析。

第2步,分析任何视觉共用有个别.
可以看看,1~4中,标题背景、标题文字、内容文字那七个部分的体裁都以相同的。所以,大家得以为那些七个区块定义三个类名,将联手的体裁写给那一个类名:

XHTML

; html-script: false ]<div> <h2>不好松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age内地译做《冰川时代》)再一次开拍续集…p> <div> <div>
<h2>糟糕松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age本省译做《冰川时代》)再一次开拍续集…p> <div>

1
2
3
4
5
6
7
8
; html-script: false ]<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
<div>
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
<div>

其次步,分析出不一致部分,并权衡高效利用.
可以见到,不相同部分,重假设内容背景观和区块宽度两部分.
先说背景象,背景观有二种,湖蓝(3个),青黑(一个),红色(二个),听从”模块与模块之间尽量不要包罗相同的一些,若有平等部分就再拆出来独立成贰个模块”的规格,我们要把一个白底的体裁提出来,另多少个单身定义,而据悉Css优先条件,大家可以把白底暗中承认定义到第③步中的box样式中,另二种背景象可做重定义处理.
再来看看宽度与一定,2,4增幅等同且都右浮动,所以,大家得以把那有个别提议来模块化,而变更一般可以一贯调用通用原子类,所以,大家唯有须求定义三个幅度样式中(若那些幅度在通用原子类中也有就更好了).
如此的话,Html可以这么写:

XHTML

<div> <h2>倒霉松鼠再出山h2>
<p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice
Age省外译做《冰川时代》)再度开拍续集…p> </div> <div>
<h2>倒霉松鼠再出山h2>
<p>20世纪Fox将为卖座动画片《冰河世纪》(Ice
Age各州译做《冰川时代》)再度开拍续集…p> </div>

1
2
3
4
5
6
7
8
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
</div>
<div>
    <h2>倒霉松鼠再出山h2>
    <p>20世纪福克斯将为卖座动画片《冰河世纪》(Ice Age内地译做《冰川时代》)再次开拍续集…p>
</div>

想必,那样的社团对Html页面来说,会显的多少臃肿,但Css文件因为重用性的增高而大大的减小了.
Css模块化是壹个比较实用但也亟需去了然的思维,实际利用中也需求通盘的解析,过多的模块也会导致维护性的降落,就如OOP编程一样,大家也要考虑”公有属性”与”私有属性”.
本文通过3个粗略的例证解析了Css模块化的骨干思维,越来越多关于Css模块化的学识,可以看YUI
Css只怕其余网络上的能源.

CSS

/*文字排版*/ .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:middle}
.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}
.w250{width:250px} .w300{width:300px} .w400{width:400px}
.w500{width:500px} .w600{width:600px} .w700{width:700px}
.w800{width:800px} .w{width:100%} .h50{height:50px} .h80{height:80px}
.h100{height:100px} .h200{height: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} .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} .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}

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
/*文字排版*/
.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:middle}
.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}
.w250{width:250px}
.w300{width:300px}
.w400{width:400px}
.w500{width:500px}
.w600{width:600px}
.w700{width:700px}
.w800{width:800px}
.w{width:100%}
.h50{height:50px}
.h80{height:80px}
.h100{height:100px}
.h200{height: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}
.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}
.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}

赞 1 收藏 2
评论

美高梅开户网址 2

@charset “utf-8”;

@charset “utf-8”;
/********************************************************************************/

@charset “utf-8”;
/********************************************************************************/

/*!

/*清除内外边距*/
html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,span,a,em,/*strucural
elements 结构成分*/
dl,dt,dd,ul,ol,li, /*list elements 列表成分*/
pre,/*text formatting elements 文本格式元素*/
fieldset,lengend,button,input,textarea,form,/*form elements
表单成分*/
table,tbody,tfoot,tr,th,td,/*table elements 表格元素*/
img,strong,area,del,select{
margin: 0;
padding: 0;
}

/*铲除内外边距*/
html,body,div,h1,h2,h3,h4,h5,h6,hr,p,blockquote,span,a,em,/*strucural
elements 结构成分*/
dl,dt,dd,ul,ol,li, /*list elements 列表成分*/
pre,/*text formatting elements 文本格式成分*/
fieldset,lengend,button,input,textarea,form,/*form elements
表单成分*/
table,tbody,tfoot,tr,th,td,/*table elements 表格成分*/
img,strong,area,del,select{
margin: 0;
padding: 0;
}

* @名称:base.css

/*安装暗许字体*/
body,button,input,select,textarea{ font-family:
“微软雅黑”,Arial,Verdana,”microsoft yahei”;*line-height:
1.5;-ms-overflow-style:scrollbar;font-size: 12px; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,em,strong{font-size:
1em;font-style: normal;font-weight: normal;}
article,aside,dialog,footer,header,section,nav,figure,menu{display:
block;}
input:focus,textarea:focus{outline: none;} /*边框边缘的线*/
h1,h2,h3,h4,h5,h6{font-size:100%;}

/*设置暗许字体*/
body,button,input,select,textarea{ font-family:
“微软雅黑”,Arial,Verdana,”microsoft yahei”;*line-height:
1.5;-ms-overflow-style:scrollbar;font-size: 12px; }
h1,h2,h3,h4,h5,h6,pre,code,address,caption,cite,em,strong{font-size:
1em;font-style: normal;font-weight: normal;}
article,aside,dialog,footer,header,section,nav,figure,menu{display:
block;}
input:focus,textarea:focus{outline: none;} /*边框边缘的线*/
h1,h2,h3,h4,h5,h6{font-size:100%;}

* @成效:壹 、重设浏览器私自认同样式

address,cite,dfn,em,var{font-style: normal;} /*将斜体扶正*/
/*code,kbd,pre,samp,tt{ font-family: “Courier New”,Courier,monospace;
}*/ /*联合等宽字体*/
small{font-size: 12px;} /*稍差于12px的华语很难阅读,让small不荒谬化*/

address,cite,dfn,em,var{font-style: normal;} /*将斜体扶正*/
/*code,kbd,pre,samp,tt{ font-family: “Courier New”,Courier,monospace;
}*/ /*集合等宽字体*/
small{font-size: 12px;} /*小于12px的华语很难阅读,让small平常化*/

*      贰 、设置通用原子类

/*重置列表成分*/

/*重置列表成分*/

*/

ul,ol{list-style: none outside none;}
li{list-style:none;}

ul,ol{list-style: none outside none;}
li{list-style:none;}

/* 避免用户自定义背景颜色对网页的震慑,添加让用户可以自定义字体 */

a{text-decoration: none;outline: medium none;}
a:active{text-decoration: none;list-style: none;}

a{text-decoration: none;outline: medium none;}
a:active{text-decoration: none;list-style: none;}

html {

sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
button,input,select,textarea{font-size:100%;}
/*使得表单成分在ie下能屡次三番字体大小*/
fieldset,img{border: medium none;}

sup{vertical-align: text-top;}
sub{vertical-align: text-bottom;}
button,input,select,textarea{font-size:100%;}
/*使得表单成分在ie下能持续字体大小*/
fieldset,img{border: medium none;}

background:white;

input,select,button{vertical-align: middle;border: none;}
img{border:0;display: block;}
em,address,i,cite{font-style: normal;}

input,select,button{vertical-align: middle;border: none;}
img{border:0;display: block;}
em,address,i,cite{font-style: normal;}

color:black;



}

.hidden{overflow: hidden;}

.hidden{overflow: hidden;}

/* 内外边距平常让各类浏览器样式的显示地点不同 */

.f_l{float: left;display: inline;} /*左浮动*/
/*display:inline—>可修复ie6中双面间距的bug*/
.f_r{float: right; display: inline;} /*右浮动*/

【美高梅开户网址】CSS模块化编码让开发经济,详细表达。.f_l{float: left;display: inline;} /*左浮动*/
/*display:inline—>可修补ie6中双面间距的bug*/
.f_r{float: right; display: inline;} /*右浮动*/

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
{

.clear{clear: both;} /*排除浮动1*/

.clear{clear: both;} /*免去浮动1*/

margin:0;

/*撤除浮动2*/
.clearfloat{
zoom:1;
}
.clearfloat:after{
display: block;
clear: both;
content: “”;
visibility: hidden;
height: 0;
}

/*破除浮动2*/
.clearfloat{
zoom:1;
}
.clearfloat:after{
display: block;
clear: both;
content: “”;
visibility: hidden;
height: 0;
}

padding:0;

.p_rel{position: relative;} /*相对稳定*/
.p_abs{position: absolute;} /*纯属定位*/

.p_rel{position: relative;} /*对峙稳定*/
.p_abs{position: absolute;} /*相对定位*/

}

.none{display: none}

.none{display: none}

/* 要注意表单成分并不屡次三番父级 font 的题材 */

/*文字大小设置*/
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs15{font-size: 15px;}
.fs16{font-size: 16px;}
.fs17{font-size: 17px;}
.fs18{font-size: 18px;}
.fs19{font-size: 19px;}
.fs20{font-size: 20px;}
.fs21{font-size: 21px;}
.fs22{font-size: 22px;}
.fs23{font-size: 23px;}
.fs24{font-size: 24px;}

/*文字大小设置*/
.fs13{font-size: 13px;}
.fs14{font-size: 14px;}
.fs15{font-size: 15px;}
.fs16{font-size: 16px;}
.fs17{font-size: 17px;}
.fs18{font-size: 18px;}
.fs19{font-size: 19px;}
.fs20{font-size: 20px;}
.fs21{font-size: 21px;}
.fs22{font-size: 22px;}
.fs23{font-size: 23px;}
.fs24{font-size: 24px;}

body,button,input,select,textarea {

.fbold{font-weight: bold;} /*加粗*/
.width100{width: 100%}
.m_center{margin: 0 auto;}  /*水平居中*/

.fbold{font-weight: bold;} /*加粗*/
.width100{width: 100%}
.m_center{margin: 0 auto;}  /*水平居中*/

font:12px ‘\5b8b\4f53’,arial,sans-serif;

/*上外省距*/
.mt1{margin-top: 1px;}
.mt2{margin-top: 2px;}
.mt3{margin-top: 3px;}
.mt4{margin-top: 4px;}
.mt5{margin-top: 5px;}
.mt6{margin-top: 6px;}
.mt7{margin-top: 7px;}
.mt8{margin-top: 8px;}
.mt9{margin-top: 9px;}
.mt10{margin-top: 10px;}
.mt11{margin-top: 11px;}
.mt12{margin-top: 12px;}
.mt13{margin-top: 13px;}
.mt14{margin-top: 14px;}
.mt15{margin-top: 15px;}
.mt16{margin-top: 16px;}
.mt17{margin-top: 17px;}
.mt18{margin-top: 18px;}
.mt19{margin-top: 19px;}
.mt20{margin-top: 20px;}
.mt21{margin-top: 21px;}
.mt22{margin-top: 22px;}
.mt23{margin-top: 23px;}
.mt24{margin-top: 24px;}
.mt25{margin-top: 25px;}

/*上外省距*/
.mt1{margin-top: 1px;}
.mt2{margin-top: 2px;}
.mt3{margin-top: 3px;}
.mt4{margin-top: 4px;}
.mt5{margin-top: 5px;}
.mt6{margin-top: 6px;}
.mt7{margin-top: 7px;}
.mt8{margin-top: 8px;}
.mt9{margin-top: 9px;}
.mt10{margin-top: 10px;}
.mt11{margin-top: 11px;}
.mt12{margin-top: 12px;}
.mt13{margin-top: 13px;}
.mt14{margin-top: 14px;}
.mt15{margin-top: 15px;}
.mt16{margin-top: 16px;}
.mt17{margin-top: 17px;}
.mt18{margin-top: 18px;}
.mt19{margin-top: 19px;}
.mt20{margin-top: 20px;}
.mt21{margin-top: 21px;}
.mt22{margin-top: 22px;}
.mt23{margin-top: 23px;}
.mt24{margin-top: 24px;}
.mt25{margin-top: 25px;}

}

/*右外边距*/
.mr1{ margin-right:1px;}
.mr2{ margin-right:2px;}
.mr3{ margin-right:3px;}
.mr4{ margin-right:4px;}
.mr5{ margin-right:5px;}
.mr6{ margin-right:6px;}
.mr7{ margin-right:7px;}
.mr8{ margin-right:8px;}
.mr9{ margin-right:9px;}
.mr10{ margin-right:10px;}
.mr11{ margin-right:11px;}
.mr12{ margin-right:12px;}
.mr13{ margin-right:13px;}
.mr14{ margin-right:14px;}
.mr15{ margin-right:15px;}
.mr16{ margin-right:16px;}
.mr17{ margin-right:17px;}
.mr18{ margin-right:18px;}
.mr19{ margin-right:19px;}
.mr20{ margin-right:20px;}

/*右外边距*/
.mr1{ margin-right:1px;}
.mr2{ margin-right:2px;}
.mr3{ margin-right:3px;}
.mr4{ margin-right:4px;}
.mr5{ margin-right:5px;}
.mr6{ margin-right:6px;}
.mr7{ margin-right:7px;}
.mr8{ margin-right:8px;}
.mr9{ margin-right:9px;}
.mr10{ margin-right:10px;}
.mr11{ margin-right:11px;}
.mr12{ margin-right:12px;}
.mr13{ margin-right:13px;}
.mr14{ margin-right:14px;}
.mr15{ margin-right:15px;}
.mr16{ margin-right:16px;}
.mr17{ margin-right:17px;}
.mr18{ margin-right:18px;}
.mr19{ margin-right:19px;}
.mr20{ margin-right:20px;}

input,select,textarea {

/*下外边距*/
.mb1{ margin-bottom:1px;}
.mb2{ margin-bottom:2px;}
.mb3{ margin-bottom:3px;}
.mb4{ margin-bottom:4px;}
.mb5{ margin-bottom:5px;}
.mb6{ margin-bottom:6px;}
.mb7{ margin-bottom:7px;}
.mb8{ margin-bottom:8px;}
.mb9{ margin-bottom:9px;}
.mb10{ margin-bottom:10px;}
.mb11{ margin-bottom:11px;}
.mb12{ margin-bottom:12px;}
.mb13{ margin-bottom:13px;}
.mb14{ margin-bottom:14px;}
美高梅开户网址 ,.mb15{ margin-bottom:15px;}
.mb16{ margin-bottom:16px;}
.mb17{ margin-bottom:17px;}
.mb18{ margin-bottom:18px;}
.mb19{ margin-bottom:19px;}
.mb20{ margin-bottom:20px;}

/*下外边距*/
.mb1{ margin-bottom:1px;}
.mb2{ margin-bottom:2px;}
.mb3{ margin-bottom:3px;}
.mb4{ margin-bottom:4px;}
.mb5{ margin-bottom:5px;}
.mb6{ margin-bottom:6px;}
.mb7{ margin-bottom:7px;}
.mb8{ margin-bottom:8px;}
.mb9{ margin-bottom:9px;}
.mb10{ margin-bottom:10px;}
.mb11{ margin-bottom:11px;}
.mb12{ margin-bottom:12px;}
.mb13{ margin-bottom:13px;}
.mb14{ margin-bottom:14px;}
.mb15{ margin-bottom:15px;}
.mb16{ margin-bottom:16px;}
.mb17{ margin-bottom:17px;}
.mb18{ margin-bottom:18px;}
.mb19{ margin-bottom:19px;}
.mb20{ margin-bottom:20px;}

font-size:100%;

/*左外边距*/
.ml1{ margin-left:1px;}
.ml2{ margin-left:2px;}
.ml3{ margin-left:3px;}
.ml4{ margin-left:4px;}
.ml5{ margin-left:5px;}
.ml6{ margin-left:6px;}
.ml7{ margin-left:7px;}
.ml8{ margin-left:8px;}
.ml9{ margin-left:9px;}
.ml10{ margin-left:10px;}
.ml11{ margin-left:11px;}
.ml12{ margin-left:12px;}
.ml13{ margin-left:13px;}
.ml14{ margin-left:14px;}
.ml15{ margin-left:15px;}
.ml16{ margin-left:16px;}
.ml17{ margin-left:17px;}
.ml18{ margin-left:18px;}
.ml19{ margin-left:19px;}
.ml20{ margin-left:20px;}

/*左外边距*/
.ml1{ margin-left:1px;}
.ml2{ margin-left:2px;}
.ml3{ margin-left:3px;}
.ml4{ margin-left:4px;}
.ml5{ margin-left:5px;}
.ml6{ margin-left:6px;}
.ml7{ margin-left:7px;}
.ml8{ margin-left:8px;}
.ml9{ margin-left:9px;}
.ml10{ margin-left:10px;}
.ml11{ margin-left:11px;}
.ml12{ margin-left:12px;}
.ml13{ margin-left:13px;}
.ml14{ margin-left:14px;}
.ml15{ margin-left:15px;}
.ml16{ margin-left:16px;}
.ml17{ margin-left:17px;}
.ml18{ margin-left:18px;}
.ml19{ margin-left:19px;}
.ml20{ margin-left:20px;}

}

/*左外边距*/

/*左外边距*/

/* 去掉 table cell 的边距并让其边重合 */

.ml1{ margin-left:1px;}
.ml2{ margin-left:2px;}
.ml3{ margin-left:3px;}
.ml4{ margin-left:4px;}
.ml5{ margin-left:5px;}
.ml6{ margin-left:6px;}
.ml7{ margin-left:7px;}
.ml8{ margin-left:8px;}
.ml9{ margin-left:9px;}
.ml10{ margin-left:10px;}
.ml11{ margin-left:11px;}
.ml12{ margin-left:12px;}
.ml13{ margin-left:13px;}
.ml14{ margin-left:14px;}
.ml15{ margin-left:15px;}
.ml16{ margin-left:16px;}
.ml17{ margin-left:17px;}
.ml18{ margin-left:18px;}
.ml19{ margin-left:19px;}
.ml20{ margin-left:20px;}

.ml1{ margin-left:1px;}
.ml2{ margin-left:2px;}
.ml3{ margin-left:3px;}
.ml4{ margin-left:4px;}
.ml5{ margin-left:5px;}
.ml6{ margin-left:6px;}
.ml7{ margin-left:7px;}
.ml8{ margin-left:8px;}
.ml9{ margin-left:9px;}
.ml10{ margin-left:10px;}
.ml11{ margin-left:11px;}
.ml12{ margin-left:12px;}
.ml13{ margin-left:13px;}
.ml14{ margin-left:14px;}
.ml15{ margin-left:15px;}
.ml16{ margin-left:16px;}
.ml17{ margin-left:17px;}
.ml18{ margin-left:18px;}
.ml19{ margin-left:19px;}
.ml20{ margin-left:20px;}

table {

/*左右外边距*/
.mtb1{ margin-top:1px; margin-bottom:1px;}
.mtb2{ margin-top:2px; margin-bottom:2px;}
.mtb3{ margin-top:3px; margin-bottom:3px;}
.mtb4{ margin-top:4px; margin-bottom:4px;}
.mtb5{ margin-top:5px; margin-bottom:5px;}
.mtb6{ margin-top:6px; margin-bottom:6px;}
.mtb7{ margin-top:7px; margin-bottom:7px;}
.mtb8{ margin-top:8px; margin-bottom:8px;}
.mtb9{ margin-top:9px; margin-bottom:9px;}
.mtb10{ margin-top:10px; margin-bottom:10px;}
.mtb11{ margin-top:11px; margin-bottom:11px;}
.mtb12{ margin-top:12px; margin-bottom:12px;}
.mtb13{ margin-top:13px; margin-bottom:13px;}
.mtb14{ margin-top:14px; margin-bottom:14px;}
.mtb15{ margin-top:15px; margin-bottom:15px;}
.mtb16{ margin-top:16px; margin-bottom:16px;}
.mtb17{ margin-top:17px; margin-bottom:17px;}
.mtb18{ margin-top:18px; margin-bottom:18px;}
.mtb19{ margin-top:19px; margin-bottom:19px;}
.mtb20{ margin-top:20px; margin-bottom:20px;}

/*前后外边距*/
.mtb1{ margin-top:1px; margin-bottom:1px;}
.mtb2{ margin-top:2px; margin-bottom:2px;}
.mtb3{ margin-top:3px; margin-bottom:3px;}
.mtb4{ margin-top:4px; margin-bottom:4px;}
.mtb5{ margin-top:5px; margin-bottom:5px;}
.mtb6{ margin-top:6px; margin-bottom:6px;}
.mtb7{ margin-top:7px; margin-bottom:7px;}
.mtb8{ margin-top:8px; margin-bottom:8px;}
.mtb9{ margin-top:9px; margin-bottom:9px;}
.mtb10{ margin-top:10px; margin-bottom:10px;}
.mtb11{ margin-top:11px; margin-bottom:11px;}
.mtb12{ margin-top:12px; margin-bottom:12px;}
.mtb13{ margin-top:13px; margin-bottom:13px;}
.mtb14{ margin-top:14px; margin-bottom:14px;}
.mtb15{ margin-top:15px; margin-bottom:15px;}
.mtb16{ margin-top:16px; margin-bottom:16px;}
.mtb17{ margin-top:17px; margin-bottom:17px;}
.mtb18{ margin-top:18px; margin-bottom:18px;}
.mtb19{ margin-top:19px; margin-bottom:19px;}
.mtb20{ margin-top:20px; margin-bottom:20px;}

border-collapse:collapse;

/*左右外边距*/
.mr0{ margin-right:0px;}
.mrl1{ margin-right:1px; margin-left:1px;}
.mrl2{ margin-right:2px; margin-left:2px;}
.mrl3{ margin-right:3px; margin-left:3px;}
.mrl4{ margin-right:4px; margin-left:4px;}
.mrl5{ margin-right:5px; margin-left:5px;}
.mrl6{ margin-right:6px; margin-left:6px;}
.mrl7{ margin-right:7px; margin-left:7px;}
.mrl8{ margin-right:8px; margin-left:8px;}
.mrl9{ margin-right:9px; margin-left:9px;}
.mrl10{ margin-right:10px; margin-left:10px;}
.mrl11{ margin-right:11px; margin-left:11px;}
.mrl12{ margin-right:12px; margin-left:12px;}
.mrl13{ margin-right:13px; margin-left:13px;}
.mrl14{ margin-right:14px; margin-left:14px;}
.mrl15{ margin-right:15px; margin-left:15px;}
.mrl16{ margin-right:16px; margin-left:16px;}
.mrl17{ margin-right:17px; margin-left:17px;}
.mrl18{ margin-right:18px; margin-left:18px;}
.mrl19{ margin-right:19px; margin-left:19px;}
.mrl20{ margin-right:20px; margin-left:20px;}

/*左右异地距*/
.mr0{ margin-right:0px;}
.mrl1{ margin-right:1px; margin-left:1px;}
.mrl2{ margin-right:2px; margin-left:2px;}
.mrl3{ margin-right:3px; margin-left:3px;}
.mrl4{ margin-right:4px; margin-left:4px;}
.mrl5{ margin-right:5px; margin-left:5px;}
.mrl6{ margin-right:6px; margin-left:6px;}
.mrl7{ margin-right:7px; margin-left:7px;}
.mrl8{ margin-right:8px; margin-left:8px;}
.mrl9{ margin-right:9px; margin-left:9px;}
.mrl10{ margin-right:10px; margin-left:10px;}
.mrl11{ margin-right:11px; margin-left:11px;}
.mrl12{ margin-right:12px; margin-left:12px;}
.mrl13{ margin-right:13px; margin-left:13px;}
.mrl14{ margin-right:14px; margin-left:14px;}
.mrl15{ margin-right:15px; margin-left:15px;}
.mrl16{ margin-right:16px; margin-left:16px;}
.mrl17{ margin-right:17px; margin-left:17px;}
.mrl18{ margin-right:18px; margin-left:18px;}
.mrl19{ margin-right:19px; margin-left:19px;}
.mrl20{ margin-right:20px; margin-left:20px;}

border-spacing:0;

/*上下左右外边距*/
.margin1{ margin:1px;}
.margin2{ margin:2px;}
.margin3{ margin:3px;}
.margin4{ margin:4px;}
.margin5{ margin:5px;}
.margin6{ margin:6px;}
.margin7{ margin:7px;}
.margin8{ margin:8px;}
.margin9{ margin:9px;}
.margin10{ margin:10px;}
.margin11{ margin:11px;}
.margin12{ margin:12px;}
.margin13{ margin:13px;}
.margin14{ margin:14px;}
.margin15{ margin:15px;}
.margin16{ margin:16px;}
.margin17{ margin:17px;}
.margin18{ margin:18px;}
.margin19{ margin:19px;}
.margin20{ margin:20px;}

/*左右左右异地距*/
.margin1{ margin:1px;}
.margin2{ margin:2px;}
.margin3{ margin:3px;}
.margin4{ margin:4px;}
.margin5{ margin:5px;}
.margin6{ margin:6px;}
.margin7{ margin:7px;}
.margin8{ margin:8px;}
.margin9{ margin:9px;}
.margin10{ margin:10px;}
.margin11{ margin:11px;}
.margin12{ margin:12px;}
.margin13{ margin:13px;}
.margin14{ margin:14px;}
.margin15{ margin:15px;}
.margin16{ margin:16px;}
.margin17{ margin:17px;}
.margin18{ margin:18px;}
.margin19{ margin:19px;}
.margin20{ margin:20px;}

}

/*上内边距*/
.ptop1{ padding-top:1px;}
.ptop2{ padding-top:2px;}
.ptop3{ padding-top:3px;}
.ptop4{ padding-top:4px;}
.ptop5{ padding-top:5px;}
.ptop6{ padding-top:6px;}
.ptop7{ padding-top:7px;}
.ptop8{ padding-top:8px;}
.ptop9{ padding-top:9px;}
.ptop10{ padding-top:10px;}
.ptop11{ padding-top:11px;}
.ptop12{ padding-top:12px;}
.ptop13{ padding-top:13px;}
.ptop14{ padding-top:14px;}
.ptop15{ padding-top:15px;}
.ptop16{ padding-top:16px;}
.ptop17{ padding-top:17px;}
.ptop18{ padding-top:18px;}
.ptop19{ padding-top:19px;}
.ptop20{ padding-top:20px;}

/*上内边距*/
.ptop1{ padding-top:1px;}
.ptop2{ padding-top:2px;}
.ptop3{ padding-top:3px;}
.ptop4{ padding-top:4px;}
.ptop5{ padding-top:5px;}
.ptop6{ padding-top:6px;}
.ptop7{ padding-top:7px;}
.ptop8{ padding-top:8px;}
.ptop9{ padding-top:9px;}
.ptop10{ padding-top:10px;}
.ptop11{ padding-top:11px;}
.ptop12{ padding-top:12px;}
.ptop13{ padding-top:13px;}
.ptop14{ padding-top:14px;}
.ptop15{ padding-top:15px;}
.ptop16{ padding-top:16px;}
.ptop17{ padding-top:17px;}
.ptop18{ padding-top:18px;}
.ptop19{ padding-top:19px;}
.ptop20{ padding-top:20px;}

/* ie bug:th 不继承 text-align */

/*右内边距*/
.pright1{ padding-right:1px;}
.pright2{ padding-right:2px;}
.pright3{ padding-right:3px;}
.pright4{ padding-right:4px;}
.pright5{ padding-right:5px;}
.pright6{ padding-right:6px;}
.pright7{ padding-right:7px;}
.pright8{ padding-right:8px;}
.pright9{ padding-right:9px;}
.pright10{ padding-right:10px;}
.pright11{ padding-right:11px;}
.pright12{ padding-right:12px;}
.pright13{ padding-right:13px;}
.pright14{ padding-right:14px;}
.pright15{ padding-right:15px;}
.pright16{ padding-right:16px;}
.pright17{ padding-right:17px;}
.pright18{ padding-right:18px;}
.pright19{ padding-right:19px;}
.pright20{ padding-right:20px;}

/*右内边距*/
.pright1{ padding-right:1px;}
.pright2{ padding-right:2px;}
.pright3{ padding-right:3px;}
.pright4{ padding-right:4px;}
.pright5{ padding-right:5px;}
.pright6{ padding-right:6px;}
.pright7{ padding-right:7px;}
.pright8{ padding-right:8px;}
.pright9{ padding-right:9px;}
.pright10{ padding-right:10px;}
.pright11{ padding-right:11px;}
.pright12{ padding-right:12px;}
.pright13{ padding-right:13px;}
.pright14{ padding-right:14px;}
.pright15{ padding-right:15px;}
.pright16{ padding-right:16px;}
.pright17{ padding-right:17px;}
.pright18{ padding-right:18px;}
.pright19{ padding-right:19px;}
.pright20{ padding-right:20px;}

th {

/*下内边距*/
.pb1{ padding-bottom:1px;}
.pb2{ padding-bottom:2px;}
.pb3{ padding-bottom:3px;}
.pb4{ padding-bottom:4px;}
.pb5{ padding-bottom:5px;}
.pb6{ padding-bottom:6px;}
.pb7{ padding-bottom:7px;}
.pb8{ padding-bottom:8px;}
.pb9{ padding-bottom:9px;}
.pb10{ padding-bottom:10px;}
.pb11{ padding-bottom:11px;}
.pb12{ padding-bottom:12px;}
.pb13{ padding-bottom:13px;}
.pb14{ padding-bottom:14px;}
.pb15{ padding-bottom:15px;}
.pb16{ padding-bottom:16px;}
.pb17{ padding-bottom:17px;}
.pb18{ padding-bottom:18px;}
.pb19{ padding-bottom:19px;}
.pb20{ padding-bottom:20px;}

/*下内边距*/
.pb1{ padding-bottom:1px;}
.pb2{ padding-bottom:2px;}
.pb3{ padding-bottom:3px;}
.pb4{ padding-bottom:4px;}
.pb5{ padding-bottom:5px;}
.pb6{ padding-bottom:6px;}
.pb7{ padding-bottom:7px;}
.pb8{ padding-bottom:8px;}
.pb9{ padding-bottom:9px;}
.pb10{ padding-bottom:10px;}
.pb11{ padding-bottom:11px;}
.pb12{ padding-bottom:12px;}
.pb13{ padding-bottom:13px;}
.pb14{ padding-bottom:14px;}
.pb15{ padding-bottom:15px;}
.pb16{ padding-bottom:16px;}
.pb17{ padding-bottom:17px;}
.pb18{ padding-bottom:18px;}
.pb19{ padding-bottom:19px;}
.pb20{ padding-bottom:20px;}

text-align:inherit;

/*左内边距*/
.pl1{ padding-left:1px;}
.pl2{ padding-left:2px;}
.pl3{ padding-left:3px;}
.pl4{ padding-left:4px;}
.pl5{ padding-left:5px;}
.pl6{ padding-left:6px;}
.pl7{ padding-left:7px;}
.pl8{ padding-left:8px;}
.pl9{ padding-left:9px;}
.pl10{ padding-left:10px;}
.pl11{ padding-left:11px;}
.pl12{ padding-left:12px;}
.pl13{ padding-left:13px;}
.pl14{ padding-left:14px;}
.pl15{ padding-left:15px;}
.pl16{ padding-left:16px;}
.pl17{ padding-left:17px;}
.pl18{ padding-left:18px;}
.pl19{ padding-left:19px;}
.pl20{ padding-left:20px;}

/*左内边距*/
.pl1{ padding-left:1px;}
.pl2{ padding-left:2px;}
.pl3{ padding-left:3px;}
.pl4{ padding-left:4px;}
.pl5{ padding-left:5px;}
.pl6{ padding-left:6px;}
.pl7{ padding-left:7px;}
.pl8{ padding-left:8px;}
.pl9{ padding-left:9px;}
.pl10{ padding-left:10px;}
.pl11{ padding-left:11px;}
.pl12{ padding-left:12px;}
.pl13{ padding-left:13px;}
.pl14{ padding-left:14px;}
.pl15{ padding-left:15px;}
.pl16{ padding-left:16px;}
.pl17{ padding-left:17px;}
.pl18{ padding-left:18px;}
.pl19{ padding-left:19px;}
.pl20{ padding-left:20px;}

}

/*前后内边距*/
.ptb1{padding-top:1px; padding-bottom:1px}
.ptb2{padding-top:2px; padding-bottom:2px}
.ptb3{padding-top:2px; padding-bottom:3px}
.ptb4{padding-top:2px; padding-bottom:4px}
.ptb5{padding-top:5px; padding-bottom:5px}
.ptb6{padding-top:6px; padding-bottom:6px}
.ptb7{padding-top:7px; padding-bottom:7px}
.ptb8{padding-top:8px; padding-bottom:8px}
.ptb9{padding-top:9px; padding-bottom:9px}
.ptb10{padding-top:10px; padding-bottom:10px}
.ptb11{padding-top:11px; padding-bottom:11px}
.ptb12{padding-top:12px; padding-bottom:12px}
.ptb13{padding-top:13px; padding-bottom:13px}
.ptb14{padding-top:14px; padding-bottom:14px}
.ptb15{padding-top:15px; padding-bottom:15px}
.ptb16{padding-top:16px; padding-bottom:16px}
.ptb17{padding-top:17px; padding-bottom:17px}
.ptb18{padding-top:18px; padding-bottom:18px}
.ptb19{padding-top:19px; padding-bottom:19px}
.ptb20{padding-top:20px; padding-bottom:20px;}

/*内外内边距*/
.ptb1{padding-top:1px; padding-bottom:1px}
.ptb2{padding-top:2px; padding-bottom:2px}
.ptb3{padding-top:2px; padding-bottom:3px}
.ptb4{padding-top:2px; padding-bottom:4px}
.ptb5{padding-top:5px; padding-bottom:5px}
.ptb6{padding-top:6px; padding-bottom:6px}
.ptb7{padding-top:7px; padding-bottom:7px}
.ptb8{padding-top:8px; padding-bottom:8px}
.ptb9{padding-top:9px; padding-bottom:9px}
.ptb10{padding-top:10px; padding-bottom:10px}
.ptb11{padding-top:11px; padding-bottom:11px}
.ptb12{padding-top:12px; padding-bottom:12px}
.ptb13{padding-top:13px; padding-bottom:13px}
.ptb14{padding-top:14px; padding-bottom:14px}
.ptb15{padding-top:15px; padding-bottom:15px}
.ptb16{padding-top:16px; padding-bottom:16px}
.ptb17{padding-top:17px; padding-bottom:17px}
.ptb18{padding-top:18px; padding-bottom:18px}
.ptb19{padding-top:19px; padding-bottom:19px}
.ptb20{padding-top:20px; padding-bottom:20px;}

/* 去除默许边框 */

/*反正内边距*/
.prl1{ padding-left:1px; padding-right:1px;}
.prl2{ padding-left:2px; padding-right:2px;}
.prl3{ padding-left:3px; padding-right:3px;}
.prl4{ padding-left:4px; padding-right:4px;}
.prl5{ padding-left:5px; padding-right:5px;}
.prl6{ padding-left:6px; padding-right:6px;}
.prl7{ padding-left:7px; padding-right:7px;}
.prl8{ padding-left:8px; padding-right:8px;}
.prl9{ padding-left:9px; padding-right:9px;}
.prl10{ padding-left:10px; padding-right:10px;}
.prl11{ padding-left:11px; padding-right:11px;}
.prl12{ padding-left:12px; padding-right:12px;}
.prl13{ padding-left:13px; padding-right:13px;}
.prl14{ padding-left:14px; padding-right:14px;}
.prl15{ padding-left:15px; padding-right:15px;}
.prl16{ padding-left:16px; padding-right:16px;}
.prl17{ padding-left:17px; padding-right:17px;}
.prl18{ padding-left:18px; padding-right:18px;}
.prl19{ padding-left:19px; padding-right:19px;}
.prl20{ padding-left:20px; padding-right:20px;}

/*左右内边距*/
.prl1{ padding-left:1px; padding-right:1px;}
.prl2{ padding-left:2px; padding-right:2px;}
.prl3{ padding-left:3px; padding-right:3px;}
.prl4{ padding-left:4px; padding-right:4px;}
.prl5{ padding-left:5px; padding-right:5px;}
.prl6{ padding-left:6px; padding-right:6px;}
.prl7{ padding-left:7px; padding-right:7px;}
.prl8{ padding-left:8px; padding-right:8px;}
.prl9{ padding-left:9px; padding-right:9px;}
.prl10{ padding-left:10px; padding-right:10px;}
.prl11{ padding-left:11px; padding-right:11px;}
.prl12{ padding-left:12px; padding-right:12px;}
.prl13{ padding-left:13px; padding-right:13px;}
.prl14{ padding-left:14px; padding-right:14px;}
.prl15{ padding-left:15px; padding-right:15px;}
.prl16{ padding-left:16px; padding-right:16px;}
.prl17{ padding-left:17px; padding-right:17px;}
.prl18{ padding-left:18px; padding-right:18px;}
.prl19{ padding-left:19px; padding-right:19px;}
.prl20{ padding-left:20px; padding-right:20px;}

fieldset,img {

/*前后左右内边距*/
.padding1{ padding:1px;}
.padding2{ padding:2px;}
.padding3{ padding:3px;}
.padding4{ padding:4px;}
.padding5{ padding:5px;}
.padding6{ padding:6px;}
.padding7{ padding:7px;}
.padding8{ padding:8px;}
.padding9{ padding:9px;}
.padding10{ padding:10px;}
.padding11{ padding:11px;}
.padding12{ padding:12px;}
.padding13{ padding:13px;}
.padding14{ padding:14px;}
.padding15{ padding:15px;}
.padding16{ padding:16px;}
.padding17{ padding:17px;}
.padding18{ padding:18px;}
.padding19{ padding:19px;}
.padding20{ padding:20px;}

/*内外左右内边距*/
.padding1{ padding:1px;}
.padding2{ padding:2px;}
.padding3{ padding:3px;}
.padding4{ padding:4px;}
.padding5{ padding:5px;}
.padding6{ padding:6px;}
.padding7{ padding:7px;}
.padding8{ padding:8px;}
.padding9{ padding:9px;}
.padding10{ padding:10px;}
.padding11{ padding:11px;}
.padding12{ padding:12px;}
.padding13{ padding:13px;}
.padding14{ padding:14px;}
.padding15{ padding:15px;}
.padding16{ padding:16px;}
.padding17{ padding:17px;}
.padding18{ padding:18px;}
.padding19{ padding:19px;}
.padding20{ padding:20px;}

border:none;

/*笔直居中*/

/*笔直居中*/

}

.v12{ height: 12px; line-height: 12px; }
.v13{ height: 13px; line-height: 13px; }
.v14{ height: 14px; line-height: 14px; }
.v15{ height: 15px; line-height: 15px; }
.v16{ height: 16px; line-height: 16px; }
.v17{ height: 17px; line-height: 17px; }
.v18{ height: 18px; line-height: 18px; }
.v19{ height: 19px; line-height: 19px; }
.v20{ height: 20px; line-height: 20px; }
.v21{ height: 21px; line-height: 21px; }
.v22{ height: 22px; line-height: 22px; }
.v23{ height: 23px; line-height: 23px; }
.v24{ height: 24px; line-height: 24px; }
.v25{ height: 25px; line-height: 25px; }
.v26{ height: 26px; line-height: 26px; }
.v27{ height: 27px; line-height: 27px; }
.v28{ height: 28px; line-height: 28px; }
.v29{ height: 29px; line-height: 29px; }
.v30{ height: 30px; line-height: 30px; }
.v31{ height: 31px; line-height: 31px; }
.v32{ height: 32px; line-height: 32px; }
.v33{ height: 33px; line-height: 33px; }
.v34{ height: 34px; line-height: 34px; }
.v35{ height: 35px; line-height: 35px; }
.v36{ height: 36px; line-height: 36px; }
.v37{ height: 37px; line-height: 37px; }
.v38{ height: 38px; line-height: 38px; }
.v39{ height: 39px; line-height: 39px; }
.v40{ height: 40px; line-height: 40px; }
.v41{ height: 41px; line-height: 41px; }
.v42{ height: 42px; line-height: 42px; }
.v43{ height: 43px; line-height: 43px; }
.v44{ height: 44px; line-height: 44px; }
.v45{ height: 45px; line-height: 45px; }
.v46{ height: 46px; line-height: 46px; }
.v47{ height: 47px; line-height: 47px; }
.v48{ height: 48px; line-height: 48px; }
.v49{ height: 49px; line-height: 49px; }

.v12{ height: 12px; line-height: 12px; }
.v13{ height: 13px; line-height: 13px; }
.v14{ height: 14px; line-height: 14px; }
.v15{ height: 15px; line-height: 15px; }
.v16{ height: 16px; line-height: 16px; }
.v17{ height: 17px; line-height: 17px; }
.v18{ height: 18px; line-height: 18px; }
.v19{ height: 19px; line-height: 19px; }
.v20{ height: 20px; line-height: 20px; }
.v21{ height: 21px; line-height: 21px; }
.v22{ height: 22px; line-height: 22px; }
.v23{ height: 23px; line-height: 23px; }
.v24{ height: 24px; line-height: 24px; }
.v25{ height: 25px; line-height: 25px; }
.v26{ height: 26px; line-height: 26px; }
.v27{ height: 27px; line-height: 27px; }
.v28{ height: 28px; line-height: 28px; }
.v29{ height: 29px; line-height: 29px; }
.v30{ height: 30px; line-height: 30px; }
.v31{ height: 31px; line-height: 31px; }
.v32{ height: 32px; line-height: 32px; }
.v33{ height: 33px; line-height: 33px; }
.v34{ height: 34px; line-height: 34px; }
.v35{ height: 35px; line-height: 35px; }
.v36{ height: 36px; line-height: 36px; }
.v37{ height: 37px; line-height: 37px; }
.v38{ height: 38px; line-height: 38px; }
.v39{ height: 39px; line-height: 39px; }
.v40{ height: 40px; line-height: 40px; }
.v41{ height: 41px; line-height: 41px; }
.v42{ height: 42px; line-height: 42px; }
.v43{ height: 43px; line-height: 43px; }
.v44{ height: 44px; line-height: 44px; }
.v45{ height: 45px; line-height: 45px; }
.v46{ height: 46px; line-height: 46px; }
.v47{ height: 47px; line-height: 47px; }
.v48{ height: 48px; line-height: 48px; }
.v49{ height: 49px; line-height: 49px; }

/* ie6 7 8(q) bug 展现为行内表现 */

/*圆角*/
.borr1{ border-radius: 1px }
.borr2{ border-radius: 2px }
.borr3{ border-radius: 3px }
.borr4{ border-radius: 4px }
.borr5{ border-radius: 5px }
.borr6{ border-radius: 6px }
.borr7{ border-radius: 7px }
.borr8{ border-radius: 8px }
.borr9{ border-radius: 9px }
.borr10{ border-radius: 10px }

/*圆角*/
.borr1{ border-radius: 1px }
.borr2{ border-radius: 2px }
.borr3{ border-radius: 3px }
.borr4{ border-radius: 4px }
.borr5{ border-radius: 5px }
.borr6{ border-radius: 6px }
.borr7{ border-radius: 7px }
.borr8{ border-radius: 8px }
.borr9{ border-radius: 9px }
.borr10{ border-radius: 10px }

iframe {

display:block;

}

/* 去掉列表前的标识,li 会继承 */

ol,ul {

list-style:none;

}

/* 对齐是排版最爱惜的成分,别让什么都居中 */

caption,th {

text-align:left;

}

/* 来自yahoo,让标题都自定义,适应三个连串应用 */

h1,h2,h3,h4,h5,h6 {

font-size:100%;

font-weight:500;

}

/* 统一上标和下标 */

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;

}

/*文字排版、颜色*/

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

.red,a.red{color:#cc0031}

.darkblue,a.darkblue{color:#039}

.gray,a.gray{color:#878787}

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

.fl{float:left;display:inline}

.fr{float:right;display:inline}

.cb{clear:both}

.cl{clear:left}

.cr{clear:right}

.vm{vertical-align:middle}

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

.w50{width:50px}

.w90{width:90px}

.w100{width:100px}

.w200{width:200px}

.w250{width:250px}

.w500{width:500px}

.w800{width:800px}

.w{width:100%}

.h50{height:50px}

.h80{height:80px}

.h100{height:100px}

.h200{height: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}

.mt50{margin-top:50px}

.mt100{margin-top:100px}

.mb5{margin-bottom:5px}

.mb10{margin-bottom:10px}

.mb15{margin-bottom:15px}

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

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

.pb5{padding-bottom:5px}

.pb100{padding-bottom:100px}

.pl5{padding-left:5px}

.pl10{padding-left:10px}

.pl50{padding-left:50px}

.pl100{padding-left:100px}

.pr5{padding-right:5px}

.pr10{padding-right:10px}

.pr15{padding-right:15px}

.pr100{padding-right:100px}

发表评论

电子邮件地址不会被公开。 必填项已用*标注

网站地图xml地图