css的重置和原子类的使用

@charset "utf-8";
/* Reset Definitions*/
body, div, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, textarea, select, button, th, td { margin: 0; padding: 0; font-family: '宋体'; font-size: 12px; color: #35383e; }
a { text-decoration: none; cursor: pointer; }
img { border: 0; }
img, input, textarea, select, button { vertical-align: middle; }
table, th, td { font-size: 12px; font-family: inherit; line-height: inherit; }
td { word-break: break-all; }
textarea { word-wrap: break-word; word-break: break-all; }
ul, ol, li { list-style: none; }
dl, em, i, u, q, s, caption { font-style: normal; font-weight: normal; text-decoration: none; }

/* Global Definitions
----------------------------------------*/
.fl { float: left; _display: inline; }
.fr { float: right; _display: inline; }
.clear { clear: both; }
.clearfix { display: block; *display: inline-block; _height: 1%; }
.clearfix:after { content: '20'; display: block; clear: both; height: 0; visibility: hidden; }

.block { display: block; }
.inline { display: inline; }
.inblock { display: inline-block; }

.hide { display: none; }
.hidden { visibility: hidden; }
.ohide { overflow: hidden; }

.mt05 { margin-top: 5px; }
.mt10 { margin-top: 10px; }
.mt15 { margin-top: 15px; }
.mt20 { margin-top: 20px; }
.mt25 { margin-top: 25px; }
.mt30 { margin-top: 30px; }
.mt35 { margin-top: 35px; }
.mt40 { margin-top: 40px; }
.mt45 { margin-top: 45px; }
.mt50 { margin-top: 50px; }
.mr05 { margin-right: 5px; }
.mr10 { margin-right: 10px; }
.mr15 { margin-right: 15px; }
.mr20 { margin-right: 20px; }
.mr25 { margin-right: 25px; }
.mr30 { margin-right: 30px; }
.mr35 { margin-right: 35px; }
.mr40 { margin-right: 40px; }
.mr45 { margin-right: 45px; }
.mr50 { margin-right: 50px; }
.mb05 { margin-bottom: 5px; }
.mb10 { margin-bottom: 10px; }
.mb15 { margin-bottom: 15px; }
.mb20 { margin-bottom: 20px; }
.mb25 { margin-bottom: 25px; }
.mb30 { margin-bottom: 30px; }
.mb35 { margin-bottom: 35px; }
.mb40 { margin-bottom: 40px; }
.mb45 { margin-bottom: 45px; }
.mb50 { margin-bottom: 50px; }
.ml05 { margin-left: 5px; }
.ml10 { margin-left: 10px; }
.ml15 { margin-left: 15px; }
.ml20 { margin-left: 20px; }
.ml25 { margin-left: 25px; }
.ml30 { margin-left: 30px; }
.ml35 { margin-left: 35px; }
.ml40 { margin-left: 40px; }
.ml45 { margin-left: 45px; }
.ml50 { margin-left: 50px; }

.pt05 { padding-top: 5px; }
.pt10 { padding-top: 10px; }
.pt15 { padding-top: 15px; }
.pt20 { padding-top: 20px; }
.pt25 { padding-top: 25px; }
.pt30 { padding-top: 30px; }
.pt35 { padding-top: 35px; }
.pt40 { padding-top: 40px; }
.pt45 { padding-top: 45px; }
.pt50 { padding-top: 50px; }
.pr05 { padding-right: 5px; }
.pr10 { padding-right: 10px; }
.pr15 { padding-right: 15px; }
.pr20 { padding-right: 20px; }
.pr25 { padding-right: 25px; }
.pr30 { padding-right: 30px; }
.pr35 { padding-right: 35px; }
.pr40 { padding-right: 40px; }
.pr45 { padding-right: 45px; }
.pr50 { padding-right: 50px; }
.pb05 { padding-bottom: 5px; }
.pb10 { padding-bottom: 10px; }
.pb15 { padding-bottom: 15px; }
.pb20 { padding-bottom: 20px; }
.pb25 { padding-bottom: 25px; }
.pb30 { padding-bottom: 30px; }
.pb35 { padding-bottom: 35px; }
.pb40 { padding-bottom: 40px; }
.pb45 { padding-bottom: 45px; }
.pb50 { padding-bottom: 50px; }
.pl05 { padding-left: 5px; }
.pl10 { padding-left: 10px; }
.pl15 { padding-left: 15px; }
.pl20 { padding-left: 20px; }
.pl25 { padding-left: 25px; }
.pl30 { padding-left: 30px; }
.pl35 { padding-left: 35px; }
.pl40 { padding-left: 40px; }
.pl45 { padding-left: 45px; }
.pl50 { padding-left: 50px; }

.tal { text-align: left; }
.tac { text-align: center; }
.tar { text-align: right; }
.fs12 { font-size: 12px; }
.fs14 { font-size: 14px; }
.fs16 { font-size: 16px; }
.fs18 { font-size: 18px; }
.fs20 { font-size: 20px; }
.fs22 { font-size: 22px; }
.fs24 { font-size: 24px; }
.fbold { font-weight: bold; }
.fnormal { font-weight: normal; }

input[type="text"] { outline-style: none; }
input[type="button"] { outline-style: none; }
input[type="submit"] { outline-style: none; }
select { outline-style: none; }
textarea { outline-style: none; }
input[type="password"] { outline-style: none; }
/*
Include this style.
table.baseTable { 100%; border-collapse: collapse; }
table.baseTable td { border: 1px solid #CCC; }
*/

/*
.fixedTL{ position: fixed; left: 0; top: 0; }
.fixedTR{ position: fixed; right: 0; top: 0; }
.fixedBL{ position: fixed; left: 0; bottom: 0; }
.fixedBR{ position: fixed; right: 0; bottom: 0; }
*/

/* WebSite Definition
----------------------------------------*/
.wrap { margin: 0 auto; 1210px; }

  1 @charset "utf-8";
  2 /* Reset Definitions*/
  3 body, div, p, a, ul, ol, li, dl, dt, dd, h1, h2, h3, h4, h5, h6, form, input, textarea, select, button, th, td { margin: 0; padding: 0; font-family: '宋体'; font-size: 12px; color: #35383e; }
  4 a { text-decoration: none; cursor: pointer; }
  5 img { border: 0; }
  6 img, input, textarea, select, button { vertical-align: middle; }
  7 table, th, td { font-size: 12px; font-family: inherit; line-height: inherit; }
  8 td { word-break: break-all; } 
  9 textarea { word-wrap: break-word; word-break: break-all; }
 10 ul, ol, li { list-style: none; }
 11 dl, em, i, u, q, s, caption { font-style: normal; font-weight: normal; text-decoration: none; }
 12 
 13 /* Global Definitions
 14 ----------------------------------------*/
 15 .fl { float: left; _display: inline; }
 16 .fr { float: right; _display: inline; }
 17 .clear { clear: both; }
 18 .clearfix { display: block; *display: inline-block; _height: 1%; }
 19 .clearfix:after { content: '20'; display: block; clear: both; height: 0; visibility: hidden; }
 20 
 21 .block { display: block; }
 22 .inline { display: inline; }
 23 .inblock { display: inline-block; }
 24 
 25 .hide { display: none; }
 26 .hidden { visibility: hidden; }
 27 .ohide { overflow: hidden; }
 28 
 29 .mt05 { margin-top: 5px; }
 30 .mt10 { margin-top: 10px; }
 31 .mt15 { margin-top: 15px; }
 32 .mt20 { margin-top: 20px; }
 33 .mt25 { margin-top: 25px; }
 34 .mt30 { margin-top: 30px; }
 35 .mt35 { margin-top: 35px; }
 36 .mt40 { margin-top: 40px; }
 37 .mt45 { margin-top: 45px; }
 38 .mt50 { margin-top: 50px; }
 39 .mr05 { margin-right: 5px; }
 40 .mr10 { margin-right: 10px; }
 41 .mr15 { margin-right: 15px; }
 42 .mr20 { margin-right: 20px; }
 43 .mr25 { margin-right: 25px; }
 44 .mr30 { margin-right: 30px; }
 45 .mr35 { margin-right: 35px; }
 46 .mr40 { margin-right: 40px; }
 47 .mr45 { margin-right: 45px; }
 48 .mr50 { margin-right: 50px; }
 49 .mb05 { margin-bottom: 5px; }
 50 .mb10 { margin-bottom: 10px; }
 51 .mb15 { margin-bottom: 15px; }
 52 .mb20 { margin-bottom: 20px; }
 53 .mb25 { margin-bottom: 25px; }
 54 .mb30 { margin-bottom: 30px; }
 55 .mb35 { margin-bottom: 35px; }
 56 .mb40 { margin-bottom: 40px; }
 57 .mb45 { margin-bottom: 45px; }
 58 .mb50 { margin-bottom: 50px; }
 59 .ml05 { margin-left: 5px; }
 60 .ml10 { margin-left: 10px; }
 61 .ml15 { margin-left: 15px; }
 62 .ml20 { margin-left: 20px; }
 63 .ml25 { margin-left: 25px; }
 64 .ml30 { margin-left: 30px; }
 65 .ml35 { margin-left: 35px; }
 66 .ml40 { margin-left: 40px; }
 67 .ml45 { margin-left: 45px; }
 68 .ml50 { margin-left: 50px; }
 69 
 70 .pt05 { padding-top: 5px; }
 71 .pt10 { padding-top: 10px; }
 72 .pt15 { padding-top: 15px; }
 73 .pt20 { padding-top: 20px; }
 74 .pt25 { padding-top: 25px; }
 75 .pt30 { padding-top: 30px; }
 76 .pt35 { padding-top: 35px; }
 77 .pt40 { padding-top: 40px; }
 78 .pt45 { padding-top: 45px; }
 79 .pt50 { padding-top: 50px; }
 80 .pr05 { padding-right: 5px; }
 81 .pr10 { padding-right: 10px; }
 82 .pr15 { padding-right: 15px; }
 83 .pr20 { padding-right: 20px; }
 84 .pr25 { padding-right: 25px; }
 85 .pr30 { padding-right: 30px; }
 86 .pr35 { padding-right: 35px; }
 87 .pr40 { padding-right: 40px; }
 88 .pr45 { padding-right: 45px; }
 89 .pr50 { padding-right: 50px; }
 90 .pb05 { padding-bottom: 5px; }
 91 .pb10 { padding-bottom: 10px; }
 92 .pb15 { padding-bottom: 15px; }
 93 .pb20 { padding-bottom: 20px; }
 94 .pb25 { padding-bottom: 25px; }
 95 .pb30 { padding-bottom: 30px; }
 96 .pb35 { padding-bottom: 35px; }
 97 .pb40 { padding-bottom: 40px; }
 98 .pb45 { padding-bottom: 45px; }
 99 .pb50 { padding-bottom: 50px; }
100 .pl05 { padding-left: 5px; }
101 .pl10 { padding-left: 10px; }
102 .pl15 { padding-left: 15px; }
103 .pl20 { padding-left: 20px; }
104 .pl25 { padding-left: 25px; }
105 .pl30 { padding-left: 30px; }
106 .pl35 { padding-left: 35px; }
107 .pl40 { padding-left: 40px; }
108 .pl45 { padding-left: 45px; }
109 .pl50 { padding-left: 50px; }
110 
111 .tal { text-align: left; }
112 .tac { text-align: center; }
113 .tar { text-align: right; }
114 .fs12 { font-size: 12px; }
115 .fs14 { font-size: 14px; }
116 .fs16 { font-size: 16px; }
117 .fs18 { font-size: 18px; }
118 .fs20 { font-size: 20px; }
119 .fs22 { font-size: 22px; }
120 .fs24 { font-size: 24px; }
121 .fbold { font-weight: bold; }
122 .fnormal { font-weight: normal; }
123 
124 input[type="text"] { outline-style: none; }
125 input[type="button"] { outline-style: none; }
126 input[type="submit"] { outline-style: none; }
127 select { outline-style: none; }
128 textarea { outline-style: none; }
129 input[type="password"] { outline-style: none; }
130 /*
131 Include this style.
132 table.baseTable {  100%; border-collapse: collapse; }
133 table.baseTable td { border: 1px solid #CCC; }
134 */
135 
136 /*
137 .fixedTL{ position: fixed; left: 0; top: 0; }
138 .fixedTR{ position: fixed; right: 0; top: 0; }
139 .fixedBL{ position: fixed; left: 0; bottom: 0; }
140 .fixedBR{ position: fixed; right: 0; bottom: 0; }
141 */
142 
143 /* WebSite Definition
144 ----------------------------------------*/
145 .wrap { margin: 0 auto; width: 1210px; }
原文地址:https://www.cnblogs.com/darkterror/p/5029135.html