base.css

  1 @charset "utf-8";
  2 /*!
  3  * @名称：base.css
  4  * @功能：1、重设浏览器默认样式
  5  *       2、设置通用原子类
  6  */
  7 /* 防止用户自定义背景颜色对网页的影响，添加让用户可以自定义字体 */
  8 html {
  9     background:white;
 10     color:black;
 11 }
 12 /* 内外边距通常让各个浏览器样式的表现位置不同 */
 13 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 {
 14     margin:0;
 15     padding:0;
 16 }
 17 /* 要注意表单元素并不继承父级 font 的问题 */
 18 body,button,input,select,textarea {
 19     font:12px ‘\5b8b\4f53‘,arial,sans-serif;
 20 }
 21 input,select,textarea {
 22     font-size:100%;
 23 }
 24 /* 去掉 table cell 的边距并让其边重合 */
 25 table {
 26     border-collapse:collapse;
 27     border-spacing:0;
 28 }
 29 /* ie bug：th 不继承 text-align */
 30 th {
 31     text-align:inherit;
 32 }
 33 /* 去除默认边框 */
 34 fieldset,img {
 35     border:none;
 36 }
 37 /* ie6 7 8(q) bug 显示为行内表现 */
 38 iframe {
 39     display:block;
 40 }
 41 /* 去掉列表前的标识，li 会继承 */
 42 ol,ul {
 43     list-style:none;
 44 }
 45 /* 对齐是排版最重要的因素，别让什么都居中 */
 46 caption,th {
 47     text-align:left;
 48 }
 49 /* 来自yahoo，让标题都自定义，适应多个系统应用 */
 50 h1,h2,h3,h4,h5,h6 {
 51     font-size:100%;
 52     font-weight:500;
 53 }
 54 /* 统一上标和下标 */
 55 sub,sup {
 56     font-size:75%;
 57     line-height:0;
 58     position:relative;
 59     vertical-align:baseline;
 60 }
 61 sup {
 62     top:-0.5em;
 63 }
 64 sub {
 65     bottom:-0.25em;
 66 }
 67 /* 让链接在 hover 状态下显示下划线 */
 68 a:hover {
 69     text-decoration:underline;
 70 }
 71 /* 默认不显示下划线，保持页面简洁 */
 72 ins,a {
 73     text-decoration:none;
 74 }
 75 /* 去除 ie6 & ie7 焦点点状线 */
 76 a:focus,*:focus {
 77     outline:none;
 78 }
 79 /* 清除浮动 */
 80 .clearfix:before,.clearfix:after {
 81     content:"";
 82     display:table;
 83 }
 84 .clearfix:after {
 85     clear:both;
 86     overflow:hidden;
 87 }
 88 .clearfix {
 89     zoom:1; /* for ie6 & ie7 */
 90 }
 91 .clear {
 92     clear:both;
 93     display:block;
 94     font-size:0;
 95     height:0;
 96     line-height:0;
 97     overflow:hidden;
 98 }
 99 /* 设置显示和隐藏，通常用来与 js 配合 */
100 .hide {
101     display:none;
102 }
103 .block {
104     display:block;
105 }
106 /* 设置浮动，减少浮动带来的 bug */
107 .fl,.fr {
108     display:inline;
109 }
110 .fl {
111     float:left;
112 }
113 .fr {
114     float:right;
115 }
116 /*文字排版、颜色*/
117 .f12{font-size:12px}
118 .f13{font-size:13px}
119 .f14{font-size:14px}
120 .f16{font-size:16px}
121 .f20{font-size:20px}
122 .fb{font-weight:bold}
123 .fn{font-weight:normal}
124 .t2{text-indent:2em}
125 .red,a.red{color:#cc0031}
126 .darkblue,a.darkblue{color:#039}
127 .gray,a.gray{color:#878787}
128 .lh150{line-height:150%}
129 .lh180{line-height:180%}
130 .lh200{line-height:200%}
131 .unl{text-decoration:underline;}
132 .no_unl{text-decoration:none;}
133 /*定位*/
134 .tl{text-align:left}
135 .tc{text-align:center}
136 .tr{text-align:right}
137 .fl{float:left;display:inline}
138 .fr{float:right;display:inline}
139 .cb{clear:both}
140 .cl{clear:left}
141 .cr{clear:right}
142 .vm{vertical-align:middle}
143 .pr{position:relative}
144 .pa{position:absolute}
145 .abs-right{position:absolute;right:0}
146 .zoom{zoom:1}
147 .hidden{visibility:hidden}
148 .none{display:none}
149 /*长度高度*/
150 .w10{width:10px}
151 .w20{width:20px}
152 .w50{width:50px}
153 .w90{width:90px}
154 .w100{width:100px}
155 .w200{width:200px}
156 .w250{width:250px}
157 .w500{width:500px}
158 .w800{width:800px}
159 .w{width:100%}
160 .h50{height:50px}
161 .h80{height:80px}
162 .h100{height:100px}
163 .h200{height:200px}
164 .h{height:100%}
165 /*边距*/
166 .m10{margin:10px}
167 .m15{margin:15px}
168 .m30{margin:30px}
169 .mt5{margin-top:5px}
170 .mt10{margin-top:10px}
171 .mt15{margin-top:15px}
172 .mt50{margin-top:50px}
173 .mt100{margin-top:100px}
174 .mb5{margin-bottom:5px}
175 .mb10{margin-bottom:10px}
176 .mb15{margin-bottom:15px}
177 .mb100{margin-bottom:100px}
178 .ml5{margin-left:5px}
179 .ml10{margin-left:10px}
180 .ml15{margin-left:15px}
181 .ml20{margin-left:20px}
182 .ml30{margin-left:30px}
183 .ml50{margin-left:50px}
184 .ml100{margin-left:100px}
185 .mr5{margin-right:5px}
186 .mr10{margin-right:10px}
187 .mr15{margin-right:15px}
188 .mr50{margin-right:50px}
189 .mr100{margin-right:100px}
190 .p10{padding:10px;}
191 .p15{padding:15px;}
192 .p30{padding:30px;}
193 .pt5{padding-top:5px}
194 .pt10{padding-top:10px}
195 .pt15{padding-top:15px}
196 .pt20{padding-top:20px}
197 .pt30{padding-top:30px}
198 .pt50{padding-top:50px}
199 .pb5{padding-bottom:5px}
200 .pb100{padding-bottom:100px}
201 .pl5{padding-left:5px}
202 .pl10{padding-left:10px}
203 .pl50{padding-left:50px}
204 .pl100{padding-left:100px}
205 .pr5{padding-right:5px}
206 .pr10{padding-right:10px}
207 .pr15{padding-right:15px}
208 .pr100{padding-right:100px}