CSS样式重置代码详细作用注释

模板网 2014-10-04

CSS样式重置代码详细作用注释，解决因不同浏览器样式解析方面存在的差异导致页面布局不统一的问题。代码包含详细注释，方便理解与修改。

详细代码：

复制代码 代码如下:
@charset "utf-8";
/* ----------------------------------------
reset.css
Description: CSS样式重置代码
Version 1.0, 2012-10-18
----------------------------------------- */
 
/* 防止用户自定义背景颜色对网页的影响 */
html{
color:#333333;background:#fff;
}
/* 始终不显示滚动条 */
body{
overflow-x:hidden; /*隐藏水平滚动条*/ 
}
/* 内外边距重置 */
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td,hr,button,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section {
margin:0;padding:0;
}
body,button,input,select,textarea{
font-family: "Microsoft Yahei", "微软雅黑", Tahoma, Arial, Helvetica, STHeiti;
font-size: 12px;
word-wrap: break-word;
color: #333333;
}
input,select,textarea{
font-size:100%;
}
div:focus{
outline:none;
}
 
/* 去掉各Table  cell 的边距并让其边重合 */
table{
border-collapse:collapse;border-spacing:0;
}
 
/* IE bug fixed: th 不继承 text-align*/
th{
text-align:inherit;
}
 
/* 去除默认边框 */
fieldset,img{
border:0;
}
 
/* ie6 7 8(q) bug 显示为行内表现 */
iframe{
display:block;
}
 
/* 去掉 firefox 下此元素的边框 */
abbr,acronym{
border:0;font-variant:normal;
}
 
/* 一致的 del 样式 */
del {
text-decoration:line-through;
}
 
address,caption,cite,code,dfn,em,th,var {
font-style:normal;
font-weight:500;
}
 
/* 去掉列表前的标识, li 会继承 */
ol,ul,li {
list-style:none;
}
 
/* 左对齐排版 */
caption,th {
text-align:left;
}
 
/* 让标题都自定义 */
h1,h2,h3,h4,h5,h6 {
font-size:100%;
font-weight:500;
}
 
q:before,q:after {
content:'';
}
 
/* 统一上标和下标 */
sub, sup {
    font-size: 75%; line-height: 0; position: relative; vertical-align: baseline;
}
sup {top: -0.5em;}
sub {bottom: -0.25em;}
 
 
/* 让链接在 hover 状态下不显示下划线 */
a:hover {
text-decoration:none;
}
a:visited{
color: #333333;
}
 
/* 默认不显示下划线 */
ins,a {
text-decoration:none;
}
 
/* button的cursor属性 */
button,a{
outline:none;
cursor:pointer;
}
 
/*hr统一样式*/
hr{
height: 1px;
border: none;
border-top: 1px solid #CCCCCC;
}

 

相关文章

  1. 手机站布局中viewport的作用详解

    什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动

  2. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案，在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白，怎么办？ 利用一下代码可以解决离线宝被屏蔽时，去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

  3. 假503错误页面，伪装503错误，503.js代码下载

    在一些特殊情况下，我们需要将我们的网站展现给访客看时是打不开的状态，但是并不希望关闭网站，因为直接关站，会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载： 503.js代码下载 压缩包中主要文件： 503.html 复制代

  4. 4种动态加载JS的方法

    要实现动态加载JS脚本有4种方法： 1、直接document.write 复制代码 代码如下: script language=javascript document.write(script src=test.js\/script); /script 2、动态改变已有script的src属性 复制代码 代码如下: script src= id=s1/script script langu

  5. 获取QQ信息的几个接口

    可能有的朋友们早就在空间抓到了这些接口，不会的一定要自己抓包啊，IE9版本以前的可以用httpwatch，IE9自带抓包软件（快捷键F12） 本论坛已经发布了登陆空间源代码，其中含有g_tk的计算，关于登陆的不用多说。 在VB中首先登陆一个QQ，计算得到g_tk，然后用G

随机推荐

  1. 手机站布局中viewport的作用详解

    什么是Viewport?手机浏览器是把页面放在一个虚拟的窗口（viewport）中，通常这个虚拟的窗口（viewport）比屏幕宽，这样就不用把每个网页挤到很小的窗口中（这样会破坏没有针对手机浏览器优化的网页的布局），用户可以通过平移和缩放来看网页的不同部分。移动

  2. 手机站上离线宝被UC浏览器屏蔽解决方案

    手机站上离线宝被UC浏览器屏蔽解决方案，在手机站上使用离线宝发现在UC浏览器中被屏蔽了。页面上会有很大一块空白，怎么办？ 利用一下代码可以解决离线宝被屏蔽时，去除头部空白。 复制代码 代码如下: document.writeln(script type=\text/javascript\ src=\

  3. 假503错误页面，伪装503错误，503.js代码下载

    在一些特殊情况下，我们需要将我们的网站展现给访客看时是打不开的状态，但是并不希望关闭网站，因为直接关站，会影响搜索引擎的收录。 那么利用下面提供的代码就可以轻松实现这种需求。 代码打包下载： 503.js代码下载 压缩包中主要文件： 503.html 复制代

  4. 4种动态加载JS的方法

    要实现动态加载JS脚本有4种方法： 1、直接document.write 复制代码 代码如下: script language=javascript document.write(script src=test.js\/script); /script 2、动态改变已有script的src属性 复制代码 代码如下: script src= id=s1/script script langu

  5. 获取QQ信息的几个接口

    可能有的朋友们早就在空间抓到了这些接口，不会的一定要自己抓包啊，IE9版本以前的可以用httpwatch，IE9自带抓包软件（快捷键F12） 本论坛已经发布了登陆空间源代码，其中含有g_tk的计算，关于登陆的不用多说。 在VB中首先登陆一个QQ，计算得到g_tk，然后用G