代码:CSS——reset.css
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:;}
.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:;padding:;}
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:}
button,input,select,textarea {font-size: 100%}
table {border-collapse: collapse;border-spacing:}
.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:;padding:;}
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:;}
.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:;color:#999;display:inline-block;padding:0.8em;font-size:14px;font-weight:normal;line-height:;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:;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:;}.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:;}/*行高*/
间距: 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;}
..
代码:CSS——reset.css的更多相关文章
- css reset.css
/* http://meyerweb.com/eric/tools/css/reset/ v2.0 | 20110126 License: none (public domain) */ html, ...
- 关于CSS reset
关于CSS resetCSS reset(css重置)基本上是不需要的,至少可以说80%的的CSS reset都是没有必要的,反而增加了页面CSS 的overwrite,尤其像开心网*{margin: ...
- 国际知名CSS Reset 总结
NO.01 CSS Tools: Reset CSS 网站:https://meyerweb.com/eric/tools/css/reset/ 优点:老牌,用的人多. /* http://mey ...
- CSS RESET —— 浏览器样式重置
CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CS ...
- HTML常用命名和CSS reset代码【收集总结】
CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:l ...
- 一天搞定CSS: 标签样式初始化(CSS reset)及淘宝样式初始化代码--09
样式初始化:是指对HTML中某些标签的默认样式进行清除 样式初始化目的: 不同浏览器的默认样式不一样,若不清理,会导致相同的代码在浏览器中解析结果不一样,为了避免这种情况,所以需要进行样式初始化. 代 ...
- 谈谈一些有趣的CSS题目(十一)-- reset.css 知多少?
开本系列,谈谈一些有趣的 CSS 题目,题目类型天马行空,想到什么说什么,不仅为了拓宽一下解决问题的思路,更涉及一些容易忽视的 CSS 细节. 解题不考虑兼容性,题目天马行空,想到什么说什么,如果解题 ...
- 由css reset想到的深入理解margin及em的含义
由css reset想到的深入理解margin及em的含义 原文地址:http://www.ymblog.net/content_189.html 经常看到这样语句,*{ margin:0px;pad ...
- ife任务刷题总结(一)-css reset与清除浮动
本文同时发布于本人的个人网站www.yaoxiaowen.com 百度创办的前端技术学院,是一个面向大学生的前端技术学习平台.虽然只有大学生才有资格报名,提交代码进行比赛排名.但是这并不妨碍我们这些初 ...
随机推荐
- swift3笔记
备注:这里只是个人的观点,有的地方也是copy,多多指教,个人笔记,有侵犯你们版权的地方还望海涵!!! 个人觉得swift和OC最大的区别就是增加了许多现代化的东西,java里面的闭包,private ...
- new 几种用法
第一种:创建对象(运算符) 第二种:隐藏基类方法( 修饰符) 第三种:new约束指定泛型类声明中的任何类型参数都必须有公共的无参数构造函数 (泛型中的new()约束)
- python基础——字典
字典内置函数&方法 Python字典包含了以下内置函数: 序号 函数及描述 1 cmp(dict1, dict2)比较两个字典元素. 2 len(dict)计算字典元素个数,即键的总数. 3 ...
- JAVA概率实现--一篇最常见、最通用解决方案
日常场景:某活动抽奖,控制各等奖的出现概率 比如控制A(中奖率):20%:B(获得优惠券率):30%:C(谢谢参与率):50% 下面以封装好在main()函数里,上代码(记得导入相应的包): publ ...
- kvm恢复和删除快照
使用文件快照的方式实现文件备份,但单说快照(snapshot)的话,他是某一时间点(版本)你能看到的该时间点备份文件状态的全貌,通过文件的快照(全貌)你能恢复到特定时间点(版本)的文件状态. 创建虚拟 ...
- # 学号 20175223 《Java程序设计》第3周学习总结
学号 20175223 <Java程序设计>第3周学习总结 教材学习内容总结 第四章要点: 要点1:面向对象三个性质:封装性.继承.多态: 要点2:类:类声明.类体.成员变量.方法.类的U ...
- noj电子老鼠走迷宫(深搜dfs)超时错误
1042.电子老鼠闯迷宫 时限:1000ms 内存限制:10000K 总时限:3000ms 描述 有一只电子老鼠被困在如下图所示的迷宫中.这是一个12*12单元的正方形迷宫,黑色部分表示建筑物,白色 ...
- FCC JS基础算法题(13):Caesars Cipher(凯撒密码)
题目描述: 下面我们来介绍风靡全球的凯撒密码Caesar cipher,又叫移位密码.移位密码也就是密码中的字母会按照指定的数量来做移位.一个常见的案例就是ROT13密码,字母会移位13个位置.由'A ...
- canvas画圆类似于锯齿指针 angular5
拿到图的时候大致是这样的,里面的圆是有动态效果的,考虑到gif图耗资源,于是想要用canvas画出来: 仔细看图不难发现,这个锯齿圆类似于表盘,计算好弧度,不难实现: 因为项目现在用的框架是angul ...
- Python之DataFrame常用方法小结
https://blog.csdn.net/a786150017/article/details/78573055