CSS-初始化模板2(common.css)

 1 默认字体大小14px
 2 360px的veiwport屏幕下字体大小18px
 3 
 4 清除浮动：.clearfix    .clear
 5 显示元素：.block
 6 隐藏元素：.hide
 7 
 8 布局：
 9     浮动：float、clear
10     内联元素、左浮动：.fl
11     内联元素、右浮动：.fr
12     左侧不浮动：.cl
13     右侧不浮动：.cr
14     左右侧不浮动：.cb
15     定位：position
16     相对定位：.rel
17     绝对定位：.abs
18     水平对齐：text-align
19     居左：.tal
20     居中：.tac
21     居右：.tar
22     内联块：.dib
23     垂直对齐：vertical-align
24     居上：.vat
25     居中：.vam
26     居下：.vab
27 网格：
28     元素宽度/高度=内边距+边框+自身：.wrap
29     元素宽度/高度=内边距+边框+自身、文本居中、内边距上下5px：.box
30     Flex：
31 容器：
32     
33 宽度：
34     100%宽度：.w100p
35     20%宽度：.w20p
36 边距：
37     5px外边距：.m5
38     5px内边距：.p5
39     5px上内边距：.pt5
40     

  1 @charset "utf-8";  
  2 html,body{
  3     background:#f0f0f0;
  4     color:#505050;
  5     font-size:62.5%;
  6     -webkit-user-select:none;
  7     -webkit-tap-highlight-color: rgba(0,0,0,0);
  8     -webkit-tap-highlight-color:transparent;
  9     -webkit-user-select:none;
 10     -webkit-touch-callout:none;
 11     -webkit-touch-callout:none;
 12 }  
 13 body,div,dl,dt,dd,ul,ol,li,
 14 h1,h2,h3,h4,h5,h6,pre,code,
 15 form,fieldset,legend,input,
 16 textarea,p,blockquote,th,td,
 17 hr,button,article,aside,details,
 18 figcaption,figure,footer,header,
 19 hgroup,menu,nav,section {
 20     margin:0;
 21     padding:0;
 22 }  
 23 body,button,input,select,textarea {
 24     font:14px \5b8b\4f53,‘Helvetica Neue‘,Arial,‘Liberation Sans‘,FreeSans,‘Hiragino Sans GB‘,sans-serif\"Microsoft YaHei"\"微软雅黑";
 25     line-height:20px;
 26 }  
 27 h1{font-size:24px;}  
 28 h2{font-size:22px;}  
 29 h3{font-size:18px;}  
 30 /*由于在320px、360px、480px的viewporrt宽度下，
 31  *字体大小一样，320px和480px效果相差不大，
 32  *于是需要将字体大小重新设计，达到预期效果。
 33  */
 34 @media only screen and (min-width:360px) {  
 35     h1{font-size:28px;}  
 36     h2{font-size:26px;}  
 37     h3{font-size:22px;}  
 38     body,button,input,select,textarea {
 39         font-size:18px;
 40         line-height:26px;
 41     }  
 42 }  
 43 h1,h2,h3,h4,h5,h6 {font-weight:normal;}  
 44 /*阻止旋转屏幕时自动调整字体大小*/ 
 45 html, body, 
 46 form, fieldset,p, div, 
 47 h1, h2, h3, h4, h5, h6 {
 48     -webkit-text-size-adjust:none;
 49 } 
 50 textarea{resize:none;}  
 51 /*取消按钮在iphone上的默认样式*/  
 52 input[type=button]{
 53     -webkit-appearance:none;
 54     outline:none
 55 }   
 56 input::-webkit-input-placeholder{color:#F0F0F0;}  
 57 textarea::-webkit-input-placeholder{color:#F0F0F0;}  
 58 input::-webkit-input-speech-button {display:none}  
 59 table {
 60     border-collapse:collapse;
 61     border-spacing:0;
 62 }  
 63 th {text-align:inherit;}  
 64 fieldset,img {border:none;}  
 65 abbr,acronym {
 66     border:none;
 67     font-variant:normal;
 68 }  
 69 del {text-decoration:line-through;}  
 70 ol,ul {list-style:none;}  
 71 caption,th {text-align:left;}  
 72 sub,sup {
 73     font-size:75%;
 74     line-height:0;
 75     position:relative;
 76     vertical-align:baseline;
 77 }  
 78 sup {top:-0.5em;}  
 79 sub {bottom:-0.25em;}  
 80 ins,a,a:hover {text-decoration:none;}  
 81 a:focus,*:focus {outline:none;}  
 82 /*清除浮动*/
 83 .clearfix:before,.clearfix:after {
 84     content:"";
 85     display:table;
 86 }  
 87 .clearfix:after {
 88     clear:both;
 89     overflow:hidden;
 90 }  
 91 .clearfix {zoom:1;}  
 92 .clear {
 93     clear:both;
 94     display:block;
 95     font-size:0;
 96     height:0;
 97     line-height:0;
 98     overflow:hidden;
 99 }  
100 .hide {display:none;}  
101 .block {display:block;}  
102 .outL{
103     white-space:normal;/*元素内的空白默认忽略*/
104     word-break:break-all;/*允许在单词内换行*/
105     width:100px;
106 }  
107 .outH{
108     overflow:hidden;
109     text-overflow:ellipsis;
110     white-space:nowrap; 
111     width:100px;
112 }  
113 /*布局*/  
114 .fl{float:left;display:inline;}  
115 .fr{float:right;display:inline;}  
116 .cb{clear:both;}  
117 .cl{clear:left;}  
118 .cr{clear:rigth;}  
119 .rel{position:relative;}  
120 .abs{position:absolute;}  
121 .tac{text-align:center;}  
122 .tal{text-align:left;}  
123 .tar{text-align:right;}  
124 .dib{display:inline-block;}  
125 .vab{vertical-align:bottom;}  
126 .vam{vertical-align:middle;}  
127 .vat{vertical-align:top;}  
128 /*网格*/  
129 .box{
130     -webkit-box-sizing:border-box;
131     -moz-box-sizing:border-box;
132     box-sizing:border-box;
133     height:100%;
134     text-align:center;
135     padding:5px 0;
136 }  
137 .grid,.wrap,
138 .grid:after,.wrap:after,
139 .grid:before,.wrap:before{
140     -webkit-box-sizing:border-box;
141     -moz-box-sizing:border-box;
142     box-sizing:border-box;
143 }  
144 .grid{*zoom:1}  
145 .grid:before,.grid:after{
146     display:table;
147     content:"";
148     line-height:0
149 }  
150 .grid:after{clear:both}  
151 .grid{
152     list-style-type:none;
153     padding:0;
154     margin:0;
155 }  
156 .grid>.grid{
157     clear:none;
158     float:left;
159     margin:0 !important
160 }  
161 .wrap{float:left;width:100%}  
162 /*网格*/  
163 /*flex*/  
164 .col{
165     height:100%;
166     display:-webkit-box;
167     -webkit-box-orient:vertical;
168     display:flex;
169     display:-webkit-flex;
170     flex-direction:column;
171 }  
172 .row{
173     display:-webkit-flex;
174     display:flex;
175     -webkit-flex-wrap:wrap;
176     flex-wrap:wrap;
177     flex-direction:wrap;
178     display:-webkit-box;
179     -webkit-box-orient:horizontal;
180     -webkit-box-lines:multiple;
181     width:100%;
182     height:auto;
183     margin:auto;
184 }  
185 .flex1{-webkit-box-flex:1;-webkit-flex:1;flex:1;}  
186 .flex2{-webkit-box-flex:2;-webkit-flex:2;flex:2;}  
187 .flex3{-webkit-box-flex:3;-webkit-flex:3;flex:3;}  
188 /*flex*/  
189 /*容器*/  
190 .wrapper{
191     position:absolute;
192     top:0;right:0;bottom:0;left:0;
193     padding:5px 5px 60px 5px;
194     overflow:auto;
195     margin-top:44px;
196     -webkit-overflow-scrolling:touch;
197 }  
198 /*头尾*/  
199 header,footer{
200     position:fixed;
201     right:0;left:0;
202     z-index:1;
203     text-align:center;
204     background:#CCCCCC;
205 }  
206 header{top:0;height:44px;}  
207 footer{bottom:0;}  
208   
209 /*宽度*/  
210 .w100p{width:100%}  
211 .w20p{width:20%;}
212 /*边距*/  
213 .m5{margin:5px;}  
214 .p5{padding:5px;}  
215 .pt5{padding-top:5px;}