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',\5b8b\4f53,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;}
..
posted on 2016-01-08 11:43 阅读( ...) 评论( ...)