常用CSS重置代码

模板网 2014-09-18

CSS重置(CSS reset),也就是重置默认样式。在不同浏览器，HTML中标签的默认样式有一个默认属性值，渲染出来的效果不尽相同，我们在写css页面的时候，为了避免在css中重复定义它们，我们需要重置默认样式，以方便统一，从而提高开发效率，提高样式代码的重用，减少重复代码，减少维护成本。

一般调页面的时候都写个：

复制代码 代码如下:

* { margin: 0; padding: 0; }

方便简洁，但是实际的项目就不要这么写了，因为“*”是全局的意思，即全部标签都要运行这么一句东西，这样开销就大了，一般是采用按所需标签陈列的方式，你用哪些就写哪些，如下：

body,form,div,span,ul,ol,li{margin:0;padding:0;}

下面的是我目前用到的reset

复制代码 代码如下:

body,form,div,span,ul,ol,li,p,pre,dl,dt,dd,h1,h2,h3,h4,h5,h6,em,a,fieldset,legend,address,label,textarea,select,input,figure,table,th,td,b,i{margin:0;padding:0;}

fieldset,img{border:0;}

ul,li{list-style:none;}

em,i{font-style:normal;}

table{border-collapse:separate;border-spacing:0;}

a{text-decoration:none;}

a:hover{ text-decoration:underline;}

a:focus,input,button,select,textarea{outline:none;}

h1,h2,h3,h4,h5,h6{ font-size:100%; font-variant: normal;}

input,select,img{ vertical-align:middle;}

legend{ display:none;}

textarea{resize:none;}

.clear{ clear:both;}

.clearfix{zoom:1;}

.clearfix:after{clear:both; content:"";display:block;height:0;line-height:0;visibility:hidden;}

下面是国内著名的网站使用的CSS重置代码

百度CSS重置代码

复制代码 代码如下:

body,h1,h2,h3,h4,h5,h6,hr,p,blockquote,dl,dt,dd,ul,ol,li,pre,form,fieldset,legend,button,input,textarea,th,td{margin:0;padding:0}

html{color:#000;overflow-y:scroll;overflow:-moz-scrollbars-vertical}

body,button,input,select,textarea{font-size:12px;font-family:arial, 'Hiragino Sans GB', 'Microsoft Yahei', '微软雅黑', '宋体', \5b8b\4f53, Tahoma, Arial, Helvetica, STHeiti}

h1,h2,h3,h4,h5,h6{font-size:100%}

em{font-style:normal}

small{font-size:12px}

ul,ol{list-style:none}

a{text-decoration:none}

a:hover{text-decoration:underline}

legend{color:#000}

fieldset,img{border:0}

button,input,select,textarea{font-size:100%}

table{border-collapse:collapse;border-spacing:0}

img{-ms-interpolation-mode:bicubic}

textarea{resize:vertical}

腾讯网CSS重置代码

复制代码 代码如下:

body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{margin:0;padding:0}

body{font:12px "宋体","Arial Narrow",HELVETICA;background:#fff;-webkit-text-size-adjust:100%}

a{color:#172c45;text-decoration:none}

a:hover{color:#cd0200;text-decoration:underline}

em{font-style:normal}

li{list-style:none}

img{border:0;vertical-align:middle}

table{border-collapse:collapse;border-spacing:0}

p{word-wrap:break-word}

新浪网CSS重置代码

复制代码 代码如下:

/* 初始化CSS */

html, body, ul, li, ol, dl, dd, dt, p, h1, h2, h3, h4, h5, h6, form, fieldset, legend, img { margin:0; padding:0; }

fieldset, img { border:none; }

img{display: block;}

address, caption, cite, code, dfn, th, var { font-style:normal; font-weight:normal; }

ul, ol { list-style:none; }

input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";}

input::-moz-focus-inner { border:none; padding:0; }

select, input { vertical-align:middle; }

select, input, textarea { font-size:12px; margin:0; }

input[type="text"], input[type="password"], textarea { outline-style:none; -webkit-appearance:none; }

textarea { resize:none; }

table { border-collapse:collapse; }

body { color:#333; padding:5px 0; font:12px/20px "SimSun","宋体","Arial Narrow",HELVETICA; background:#fff;/* overflow-y:scroll;*/ }

.clearfix:after { content:"."; display:block; height:0; visibility:hidden; clear:both; }

.clearfix { zoom:1; }

.clearit { clear:both; height:0; font-size:0; overflow:hidden; }

a { color:#666; text-decoration:none; }

a:visited { color:#666; }

a:hover, a:active, a:focus { color:#ff8400; text-decoration:underline; }

.hidden{visibility:hidden;}

/* 初始化CSS */

 

<html>
<head>
<title>常用CSS重置代码</title>
<style>
* { margin: 0; padding: 0; }
</style>
</head>
<body>
<div style="width:100%;height:100px;line-height:100px;font-size:18px;font-family:'Microsoft Yahei';text-align:center;color:#FFF;background:#333;">医疗模板库www.120muban.com收集整理</div>
</body>
</html>

相关文章

  1. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

  2. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最

  3. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：

  4. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：

  5. CSS blockquote美化效果

    blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个

随机推荐

  1. 不错的CSS重置代码base.css

    今天发下我自己的 css 框架base.css，作用是重设浏览器默认样式和提供通用原子类。 使用方法：直接将以上文本框中的CSS代码全选复制保存为base.css文件，在网页中引用即可。 来源：http://www.cnblogs.com/yjzhu/archive/2012/11/05/2755095.html

  2. JS+CSS简单实现DIV遮罩层显示隐藏

    Copy上面的代码到HTML页面即可查看效果。 原理比较简单，就是在页面内先定义好需要显示的DIV和遮罩层的CSS,然后用在onclick事件时，通过JS去控制两个DIV的样式：display=block or display=none.就可以实现DIV的显示和隐藏。 注意两个DIV的z-index，显示在最

  3. 手机站底部导航条效果自适应手机屏幕大小

    手机站底部导航条效果自适应手机屏幕大小 代码打包下载： 手机站底部导航条效果自适应手机屏幕大小 效果截图：

  4. 手机站底部很好看的导航条效果

    手机站底部很好看的导航条效果，采用了html5的一些新特性，拨打电话图片呈现动态效果。 代码打包下载： 手机站底部很好看的导航条效果 效果截图：

  5. CSS blockquote美化效果

    blockquote相信大家都不陌生吧，在Word叫文本框，其实在网页了可叫它文本框吧，如果在一段文本的两头加上blockquote标签的话，那么文本将会接出来显示，而且其内的文本将含有blockquote的格式，所以只要用CSS定义好了blockquote的各个属性，你会发现这会是个