编写高质量代码（2）

今天看的是这本书所讲的CSS部分，教的是如何来组织CSS，可以按照很多，书中采用的是base.css+common.css+page.css
base.css位于最底层，主要是提供一些CSS reset 功能，和一些粒度通用类，所有网页都引用这层css，力求通用和精简。
书中有他自己的base.css,我将j结合自己的在最后敲到我的博客上，希望能帮到看我博客的人

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,textarea,p,,blockquote,th,td{margin: 0px;padding: 0px;}
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}
/* ---------------------文字排版----------------------- */
.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;}
.l{float: left;}
.r{float: right;}
.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;}
.clearfix:after{content: ".";display: block;height: 0;clear: both;visibility: hidden;}
.clearfix{display: inline-block;}

/* ---------------------长度高度----------------------- */
.w{width: 100%;}
.w20{width:20px;}
.w50{width:50px;}
.w70{width:70px;}
.w100{width:100px;}
.w120{width:120px;}
.w140{width:140px;}
.w160{width:160px;}
.w180{width:180px;}
.w200{width:200px;}
.w220{width:220px;}
.w250{width:250px;}
.w280{width:280px;}
.w300{width:280px;}
.w320{width:320px;}
.w360{width:360px;}
.w400{width:400px;}
.w460{width:460px;}
.w500{width:500px;}
.w600{width:600px;}
.w640{width:640px;}
.w700{width:700px;}
.pct10{width:10%;}
.pct15{width:15%;}
.pct20{width:20%;}
.pct25{width:25%;}
.pct30{width:30%;}
.pct33{width:33.3%;}
.pct40{width:40%;}
.pct50{width:50%;}
.pct60{width:60%;}
.pct66{width:66.6%;}
.pct70{width:70%;}
.pct75{width:75%;}
.pct80{width:80%;}
.pct90{width:90%;}
.pct100{width:100%;}
.h50{height:50px;}
.h80{height:80px;}
.h100{height:100px;}
.h200{height:200px;}
.h{height: 100%;}
/* ---------------------边距----------------------- */
.m0{margin:0;}
.ml1{margin-left:1px;}
.ml2{margin-left:2px;}
.ml5{margin-left:5px;}
.ml10{margin-left:10px;}
.ml15{margin-left:15px;}
.ml20{margin-left:20px;}
.ml30{margin-left:30px;}
.mr1{margin-right:1px;}
.mr2{margin-right:2px;}
.mr5{margin-right:5px;}
.mr10{margin-right:10px;}
.mr15{margin-right:15px;}
.mr20{margin-right:20px;}
.mr30{margin-right:30px;}
.mt1{margin-top:1px;}
.mt2{margin-top:2px;}
.mt5{margin-top:5px;}
.mt10{margin-top:10px;}
.mt15{margin-top:15px;}
.mt20{margin-top:20px;}
.mt30{margin-top:30px;}
.mb1{margin-bottom:1px;}
.mb2{margin-bottom:2px;}
.mb5{margin-bottom:5px;}
.mb10{margin-bottom:10px;}
.mb15{margin-bottom:15px;}
.mb20{margin-bottom:20px;}
.mb30{margin-bottom:30px;}
.p0{padding:0;}
.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;}
.p15{padding:15px;}
.pl15{padding-left:15px;}
.pt15{padding-top:15px;}
.pr15{padding-right:15px;}
.pb15{padding-bottom:15px;}
.p20{padding:20px;}
.pl20{padding-left:20px;}
.pt20{padding-top:20px;}
.pr20{padding-right:20px;}
.pb20{padding-bottom:20px;}
.p30{padding:30px;}
.pl30{padding-left:30px;}
.pt30{padding-top:30px;}
.pr30{padding-right:30px;}
.pb30{padding-bottom:30px;}
/* display */
.dn{display:none;}
.di{display:inline;}
.db{display:block;}
.dib{display:inline-block;}
/* font-family */
.fa{font-family:Arial;}
.ft{font-family:Tahoma;}
.fv{font-family:Verdana;}
.fs{font-family:Simsun;}
.fl{font-family:'Lucida Console';}
.fw{font-family:'Microsoft Yahei';}
/* cursor */
.poi{cursor:pointer;}
.def{cursor:default;}
/* overflow */
.ovh{overflow:hidden;}
.ova{overflow:auto;}
/* border */
.bdc{border:1px solid #ccc;}
.blc{border-left:1px solid #ccc;}
.brc{border-right:1px solid #ccc;}
.btc{border-top:1px solid #ccc;}
.bbc{border-bottom:1px solid #ccc;}
.bd0f{border:1px solid #00FFFF;}
.bd0f{border-left:1px solid #00FFFF;}
.bd0f{border-right:1px solid #00FFFF;}
.bd0f{border-top:1px solid #00FFFF;}
.bd0f{border-bottom:1px solid #00FFFF;}
/* background-color */
.bgwh{background-color:#fff;}
.bgfb{background-color:#fbfbfb;}
.bgf5{background-color:#f5f5f5;}
.bgf0{background-color:#f0f0f0;}
.bgeb{background-color:#ebebeb;}
.bge0{background-color:#e0e0e0;}
/*  color */
.g0{color:#000;}
.g3{color:#333;}
.g6{color:#666;}
.g9{color:#999;}
.gc{color:#ccc;}
.g0f{color:#00FFFF}
.gc0{color:#CC0000 }
.wh{color:white;}
/* letter-spacing */
.lt-1{letter-spacing:-1px;}
.lt0{letter-spacing:0;}
.lt1{letter-spacing:1px;}