静态页面HTML默认重置属性样式

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

详细代码:

@charset "gb2312";
/* ----------------------------------------
reset.css
author:geduo
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; }
/* 去掉列表前的标识, 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: ''; }
/* 让链接在 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; }
/*常用属性*/
.clear{ clear:both}
.left{ float:left}
.right{ float:right}

猜你喜欢

转载自blog.csdn.net/fan_geduo/article/details/79597830
今日推荐