http://www.cnblogs.com/qq21270/p/5577856.html 图片列表
A链接标签：
/* 链接样式、文字颜色 */ a{color:#666;text-decoration:none;} a:link{color:#666;} a:visited{color:#666;} a:hover, a:active{color:#ff7200;outline:0;} .gray3, .gray3 > a ,a.gray3{color:#333;} .gray6, .gray6 > a ,a.gray6{color:#666;} .gray9, .gray9 > a ,a.gray9{color:#999;} .grayb, .grayb > a ,a.grayb{color:#bbb;} .grayc, .grayc > a ,a.grayc{color:#ccc;} .grayd, .grayd > a ,a.grayd{color:#ddd;} .grayf, .grayf > a ,a.grayf{color:#f2f2f2;} .white, .white > a ,a.white{color:#fff;} .orange, .orange> a ,a.orange{color:#ff7200;}
参考：淘宝的首页的一部分css
blockquote,body,button,dd,dl,dt,fieldset,form,h1,h2,h3,h4,h5,h6,hr,input,legend,li,ol,p,pre,td,textarea,th,ul{margin:0;padding:0;} body,button,input,select,textarea {font: 12px/1.4 tahoma,arial,'Hiragino Sans GB',5b8b4f53,sans-serif} h1,h2,h3,h4,h5,h6 {font-size: 100%} address,cite,dfn,em,var {font-style: normal} code,kbd,pre,samp {font-family: courier new,courier,monospace} small {font-size: 12px} ol,ul {list-style: none} a {text-decoration: none} a:hover {text-decoration: underline} sup {vertical-align: text-top} sub {vertical-align: text-bottom} legend {color: #000} fieldset,img {border: 0} button,input,select,textarea {font-size: 100%} table {border-collapse: collapse;border-spacing: 0} .main{margin-left: auto;margin-right: auto;}
reset：
@charset "utf-8"; /********** 1.reset **********/ /* 清除标签自带边距 */ body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,input,textarea,th,td,select,hr,legend,fieldset {margin:0;padding:0;} article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary {display: block;} ul,li {list-style: none;} input,button,select,textarea {font-family: inherit;font-size: inherit;line-height: inherit;outline: none;background: none;} textarea {border:none 0;} iframe[name='google_conversion_frame']{display:none;}/*google 统计样式*/ img,input,textarea {vertical-align: middle;}/* 保持垂直居中 */ img,hr {border: none 0;}/* 去除img边框 */ i,em {font-style: normal;}/* 清除字体倾斜 */ /* 链接样式、文字颜色 */ a{color:#666;text-decoration:none;} a:link{color:#666;} a:visited{color:#666;} a:hover, a:active{color:#ff7200;outline:0;} .gray3, .gray3 > a ,a.gray3{color:#333;} .gray6, .gray6 > a ,a.gray6{color:#666;} .gray9, .gray9 > a ,a.gray9{color:#999;} .grayb, .grayb > a ,a.grayb{color:#bbb;} .grayc, .grayc > a ,a.grayc{color:#ccc;} .grayd, .grayd > a ,a.grayd{color:#ddd;} .grayf, .grayf > a ,a.grayf{color:#f2f2f2;} .white, .white > a ,a.white{color:#fff;} .orange, .orange> a ,a.orange{color:#ff7200;} /* 设置HTML5标签 块元素*/ article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section,summary{display:block;} /********** 2.公共元素、控件定义 **********/ /*文字大小*/ .f10{font-size:10px;} .f12{font-size:12px;} .f14{font-size:14px;} .f16{font-size:16px;} .f18{font-size:18px;} .f20{font-size:20px;} .f22{font-size:22px;} .f24{font-size:24px;} .f26{font-size:26px;} .f28{font-size:28px;} .f30{font-size:30px;} .f36{font-size:36px;} h1, .h1{font-size:30px;} h2, .h2{font-size:28px;} h3, .h3{font-size:22px;} h4, .h4{font-size:20px;} h5, .h5{font-size:18px;} h6, .h6{font-size:16px;} /*描边 定义*/ .border1{border:1px solid #ececec;} .border1-top{border-top:1px solid #ececec;} .border1-bottom{border-bottom:1px solid #ececec;} .border1-left{border-left:1px solid #ececec;} .border1-right{border-right:1px solid #ececec;} /*文本框 定义*/ .input{outline:0;color:#999;display:inline-block;padding:0.8em;font-size:14px;font-weight:normal;line-height:1;text-align:left;white-space:nowrap; vertical-align: middle;background-image: none;border:1px solid #ececec;border-radius: 3px; -webkit-transition: border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s; -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s; }/*常态输入框*/ .select{border:1px solid #ececec;padding:4px 0;} /********** css零件 **********/ .clearfix:after {content:'';display: block;height: 0;overflow: hidden;clear: both;} .l{float:left;} .r{float:right;} .i{font-style:italic;} .fN{font-weight: normal;} .fB{font-weight: bold;} .rmb{font-family:Arial;} .dib{display:inline-block;} .etc{white-space:nowrap;text-overflow:ellipsis;overflow:hidden;} .wrap{word-wrap:break-word;}/*强制换行*/ .nowrap{white-space:nowrap;}/*禁止换行*/ .tc{text-align:center;} .mt5{margin-top:5px;}.mr5{margin-right:5px;}.mb5{margin-bottom:5px;}.ml5{margin-left:5px;} .mt10{margin-top:10px;}.mr10{margin-right:10px;}.mb10{margin-bottom:10px;}.ml10{margin-left:10px;} .mt15{margin-top:15px;}.mr15{margin-right:15px;}.mb15{margin-bottom:15px;}.ml15{margin-left:15px;} .mt20{margin-top:20px;}.mr20{margin-right:20px;}.mb20{margin-bottom:20px;}.ml20{margin-left:20px;} .lh100{line-height:1;}.lh110{line-height:1.1;}.lh120{line-height:1.2;}.lh130{line-height:1.3;}.lh140{line-height:1.4;} .lh150{line-height:1.5;}.lh160{line-height:1.6;}.lh170{line-height:1.7;}.lh180{line-height:1.8;}.lh190{line-height:1.9;}.lh200{line-height:2;}/*行高*/
间距： 2016-6-13
.mt1{margin-top:1px;}.mr1{margin-right:1px;}.mb1{margin-bottom:1px;}.ml1{margin-left:1px;} .mt2{margin-top:2px;}.mr2{margin-right:2px;}.mb2{margin-bottom:2px;}.ml2{margin-left:2px;} .mt3{margin-top:3px;}.mr3{margin-right:3px;}.mb3{margin-bottom:3px;}.ml3{margin-left:3px;} .mt4{margin-top:4px;}.mr4{margin-right:4px;}.mb4{margin-bottom:4px;}.ml4{margin-left:4px;} .mt5{margin-top:5px;}.mr5{margin-right:5px;}.mb5{margin-bottom:5px;}.ml5{margin-left:5px;} .mt6{margin-top:6px;}.mr6{margin-right:6px;}.mb6{margin-bottom:6px;}.ml6{margin-left:6px;} .mt7{margin-top:7px;}.mr7{margin-right:7px;}.mb7{margin-bottom:7px;}.ml7{margin-left:7px;} .mt8{margin-top:8px;}.mr8{margin-right:8px;}.mb8{margin-bottom:8px;}.ml8{margin-left:8px;} .mt9{margin-top:9px;}.mr9{margin-right:9px;}.mb9{margin-bottom:9px;}.ml9{margin-left:9px;} .mt10{margin-top:10px;}.mr10{margin-right:10px;}.mb10{margin-bottom:10px;}.ml10{margin-left:10px;} .mt15{margin-top:15px;}.mr15{margin-right:15px;}.mb15{margin-bottom:15px;}.ml15{margin-left:15px;} .mt20{margin-top:20px;}.mr20{margin-right:20px;}.mb20{margin-bottom:20px;}.ml20{margin-left:20px;} .mt25{margin-top:25px;}.mr25{margin-right:25px;}.mb25{margin-bottom:25px;}.ml25{margin-left:25px;} .mt30{margin-top:30px;}.mr30{margin-right:30px;}.mb30{margin-bottom:30px;}.ml30{margin-left:30px;} .mt40{margin-top:40px;}.mr40{margin-right:40px;}.mb40{margin-bottom:40px;}.ml40{margin-left:40px;} .mt50{margin-top:50px;}.mr50{margin-right:50px;}.mb50{margin-bottom:50px;}.ml50{margin-left:50px;} .mt100{margin-top:100px;}.mr100{margin-right:100px;}.mb100{margin-bottom:100px;}.ml100{margin-left:100px;}
<p>段落里的<a>标签颜色： 2016-6-13
.p-a333, .p-a333 > a{color:#333;} .p-a333 > a:hover{color:#ff7200;} .p-a666, .p-a666 > a{color:#666;} .p-a666 > a:hover{color:#ff7200;} .p-a999, .p-a999 > a{color:#999;} .p-a999 > a:hover{color:#ff7200;}
按钮（思路：公共部件只定义全站UI颜色， 对padding 、margin、宽高等，不作为公共定义，可以在使用的地方自由定义）： 2016-6-13
.orange-btn{background:#ff7200;color:#fff;border:1px solid #ea5404;text-align:center;border-radius:2px;cursor:pointer;font-family:'微软雅黑';} .orange-btn:hover,.orange-btn.active{background:#ea5404;color:#fff;} .gray-btn{background:#fafafa;color:#999;border:1px solid #ddd;text-align:center;border-radius:2px;cursor:pointer;} .gray-btn:hover,.gray-btn.active{background:#f0f0f0;color:#666;}
布局（页面左右布局。当然也可以继续写下去，把全站各个页面通用的区块小部件的标题和结构也都写好）： 2016-6-13
.layout-main{width:1190px;margin-left:auto;margin-right:auto;font-family:'微软雅黑';} .layout-l880{float:left;width:860px;} .layout-r310{float:right;width:310px;} .layout-r310 .rbox{position:relative;padding-left:19px;padding-right:19px;border:1px solid #ececec;}/*内部宽270px*/ .layout-r310 .rbox-title{border-bottom:1px solid #ececec;height:56px;line-height:56px;font-size:18px;color:#666;font-weight:normal;} .layout-r310 .rbox-con{padding-left:19px;padding-right:19px;}
/********** 页面布局 **********/ .main {width:1190px;margin-left:auto;margin-right:auto;} .layout-main{background:#ecebeb;width:1190px;margin-left:auto;margin-right:auto;font-family:'Microsoft YaHei';overflow:auto;} .layout-l940{float:left;background:#fff;width:920px;padding-right:20px;} .layout-r250{float:right;width:250px;}
..