代码:CSS——reset.css

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;}/*行高*/

/********** 页面布局 **********/
.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-left{float:left;background:#fff;width:920px;padding-right:20px;}
.layout-right{float:right;width:250px;}

..

时间: 2024-10-21 09:32:45

代码:CSS——reset.css的相关文章

CSS reset.css

@charset "utf-8"; /* CSS Document */ /* KISSY CSS Reset */ /* 清除内外边距 */ body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ dl, dt, dd, ul, ol, li, /* list elements 列表元素 */ pre, /* text formatting elements 文本格式元素 */ f

CSS RESET —— 浏览器样式重置

CSS Reset 1. CSS Reset为什么存在? 只要您的客户存在使用不同浏览器(ie,firefox,chrome等)的可能,那你就不得不从完美的理想状态回到现实,因为不同核心的浏览器对CSS的解析效果呈现各异,导致您所期望的效果跟浏览器的"理解"效果有偏差,今天提到的css reset就是用来重置(复位)元素在不同核心浏览器下的默认值,尽量保证元素在不同浏览器下的同一"起跑线". --引用自关于CSS Reset 2. CSS Reset该怎么写? CS

HTML常用命名和CSS reset代码【收集总结】

CSS命名规则 头:header 内容:content/containe 尾:footer 导航:nav 侧栏:sidebar 栏目:column 页面外围控制整体布局宽度:wrapper 左右中:left right center 登录条:loginbar 标志:logo 广告:banner 页面主体:main 热点:hot 新闻:news 下载:download 子导航:subnav 菜单:menu 子菜单:submenu 搜索:search 友情链接:friendlink 页脚:foote

Reset CSS:只选对的,不选"贵"的

玉伯和正淳一起整理的一份 reset.css: 1 /* 2 KISSY CSS Reset 3 理念:清除和重置是紧密不可分的 4 特色:1.适应中文 2.基于最新主流浏览器 5 维护:玉伯([email protected]), 正淳([email protected]) 6 */ 7 8 /* 清除内外边距 */ 9 body, h1, h2, h3, h4, h5, h6, hr, p, blockquote, /* structural elements 结构元素 */ 10 dl,

css reset的重置作用(可取还是不可取,取决于你)

一.重置的理由 当今流行的浏览器中,有些都是以自己的方式去理解css规范,这就会到只有的浏览器对css的解释与设计师的css定义初衷相冲突,使得网页的样子在某些浏览器下能正确按照设计师的想法显示.,但是有些浏览器却没有按照设计师想要的样子显示出来,这就导致浏览器的兼容性问题 所以,通过重置button标签的css属性,然后再将它统一定义,就可以产生相同的显示效果 css reset的作用就是让各个浏览器的css样式有一个统一的基准,而这个基准更多的就是"清零"! 以下是一整段的css

css reset浅谈

我们都知道,web开发中浏览器兼容性是困扰很多开发者的一个问题.所谓兼容性问题,即不同浏览器对同一段代码有不同的解析效果.而我们的需求往往是无论用户使用何种浏览器查看我们的网站,都应该获得相同或相近的体验. 浏览器兼容性问题主要分为HTML兼容问题(标签及其所属api的兼容问题).css兼容问题.JavaScript兼容问题.今天只简洁说说其中一个点,这也是我们常常会遇到的,即样式兼容问题. 常见的样式兼容问题有: 外边距.内边距表现不一致: 某些元素在不同浏览器中是块状还是行内显示不明确: 垂

CSS Reset(CSS重置)

CSS Reset是指重设浏览器的样式.在各种浏览器中,都会对CSS的选择器默认一些数值,譬如当h1没有被设置数值时,显示一定大小. 但并不是所有的浏览器都使用一样的数值,所以有了CSS Reset,以让网页的样式在各浏览器中表现一致. 下面介绍几个主流的CSS Reset代码: 1.Eric Meyer html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, ab

编写高质量代码——html、css

[编写高质量代码]1.注释的必要性:增加代码的可读性.2.web标准:由一系列的标准组合而成,其核心理念是将网页的结构.样式.行为分离,所以他可分为:结构标准.样式标准和行为标准.3.一个符合标准的网页,标签中的标签名应该全部都是小写,属性要加上括号,样式和行为不要夹杂在标签中,而应该分别单独存放在样式文件和脚本文件中.理想状态下,网页源代码有三部分组成:.html文件..css文件..js文件.4.所谓高质量的代码,在web标准的指导下,在实现结构.样式和行为分离的基础上,还要做到三点:精简.

移动端页面 css reset

这个是通用的  css reset.这个版本适用于 移动端页面 如果需要在 PC端使用,可以 修改 html{font-size: 10px;}为html{font-size: 12px;} 其他地方不需要修改 ========================================= @charset "utf-8"; html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, block