博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
代码:CSS——reset.css
阅读量:5277 次
发布时间:2019-06-14

本文共 9561 字,大约阅读时间需要 31 分钟。

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 阅读(
...) 评论(
...)

转载于:https://www.cnblogs.com/qq21270/p/5112681.html

你可能感兴趣的文章
@Scheduled(cron = "0/5 * * * * *")将时间改为配置
查看>>
spring -boot定时任务 quartz 基于 MethodInvokingJobDetailFactoryBean 实现
查看>>
Javascript——说说js的调试
查看>>
BZOJ.2707.[SDOI2012]走迷宫(期望 Tarjan 高斯消元)
查看>>
android权限大全
查看>>
《设计师要懂心理学》-第五章-人如何集中注意力
查看>>
MVC3 - 控制器
查看>>
[源码]解析 SynchronousQueue 上界,下界.. 数据保存和数据传递. 堵塞队列. 有无频繁await?...
查看>>
PHPStorm默认在新窗口打开
查看>>
MongoDB基本概念和安装配置
查看>>
Linux&shell之高级Shell脚本编程-创建菜单
查看>>
Swift Objective-C 访问级别控制
查看>>
Mac 10.11系统下cocoaPods安装注意事项
查看>>
Phthon语言
查看>>
高质量程序设计指南c++/c语言(17)--函数
查看>>
pku 1573 Robot Motion 第一周训练——模拟
查看>>
Algorithms学习笔记-Chapter0序言
查看>>
GPUImage API 文档之GPUImagePicture类
查看>>
Android有返回值的Activity
查看>>
mysql权限与安全
查看>>