您现在的位置是:网站首页> 编程资料编程资料
css reset 重置样式介绍_CSS教程_CSS_网页制作_
2021-09-07
1035人已围观
简介 reset.css本意就是重置样式,我始终建议把.clearfix放入layout.css,而把h1、h2之类的定义放进typography.css
这个css reset代码是我自己在参考前人的基础上,并根据个人在多个实际项目中实战得出来的,在尊重标签本身用途的同时,又给予一些基本的实际需求。本reset只涉及常见的基本元素,以修正兼容为原则
/* -------------------------------------------------
* reset css
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin:0;
padding:0;
font:12px/1.5 Helvetica, Arial, sans-serif;
background-color:#fff;
height:100%;
text-align:center;
color:#404040;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,fieldset{
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select, label {
vertical-align:middle;
}
img{
border: none;
}
a {
text-decoration:none;
}
p{
margin:0 0 9px 0;
}
/* hn */
h1,h2{
line-height:36px;
}
h3{
line-height:27px;
}
h4,h5,h6{
line-height:18px;
}
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5,h6{
font-size:12px;
}
/* ul ol dl */
ul,ol{
margin: 0 0 18px 0;
padding:0;
}
ul li,ol li{
margin-left:25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul.nostyle{
list-style: none outside none;
}
ul.nostyle li{
margin-left: 0;
}
ul.inline-style{
list-style: none outside none;
}
ul.inline-style li{
float:left;
display:inline;
margin-left:0;
}
dl{
margin-bottom: 18px;
}
dt{
font-weight: bold;
}
dd{
margin:0 0 0 9px;
padding:0;
}
/* html5 */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
复制代码
代码如下:/* -------------------------------------------------
* reset css
* -------------------------------------------------
*/
html{
height:100%;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
body{
margin:0;
padding:0;
font:12px/1.5 Helvetica, Arial, sans-serif;
background-color:#fff;
height:100%;
text-align:center;
color:#404040;
}
h1,h2,h3,h4,h5,h6,p,blockquote,form,fieldset{
margin:0;
}
table {
border-collapse:collapse;
border-spacing:0;
}
input, select, label {
vertical-align:middle;
}
img{
border: none;
}
a {
text-decoration:none;
}
p{
margin:0 0 9px 0;
}
/* hn */
h1,h2{
line-height:36px;
}
h3{
line-height:27px;
}
h4,h5,h6{
line-height:18px;
}
h1{
font-size:24px;
}
h2{
font-size:20px;
}
h3{
font-size:16px;
}
h4{
font-size:14px;
}
h5,h6{
font-size:12px;
}
/* ul ol dl */
ul,ol{
margin: 0 0 18px 0;
padding:0;
}
ul li,ol li{
margin-left:25px;
}
ul ul,
ul ol,
ol ol,
ol ul {
margin-bottom: 0;
}
ul.nostyle{
list-style: none outside none;
}
ul.nostyle li{
margin-left: 0;
}
ul.inline-style{
list-style: none outside none;
}
ul.inline-style li{
float:left;
display:inline;
margin-left:0;
}
dl{
margin-bottom: 18px;
}
dt{
font-weight: bold;
}
dd{
margin:0 0 0 9px;
padding:0;
}
/* html5 */
article, aside, dialog, figure, footer, header,
hgroup, nav, section {
display:block;
}
/* clearfix */
.clearfix:before, .clearfix:after {
content:"";
display:table;
}
.clearfix:after{
clear:both;
overflow:hidden;
}
.clearfix{
zoom:1;
}
相关内容
- 水平居中一个不确定宽度区块的代码_CSS教程_CSS_网页制作_
- CSS网页制作 表单button的行高问题_CSS教程_CSS_网页制作_
- css中link和@import的区别分析详解_CSS教程_CSS_网页制作_
- 谈自适应宽度 _CSS教程_CSS_网页制作_
- CSS圆角效果 -webkit-border-radius(CSS3中border-radius隐藏的威力)_CSS教程_CSS_网页制作_
- 怎么去掉form的高度(form不会撑出td)_CSS教程_CSS_网页制作_
- css中强制换行word-break、word-wrap、white-space区别实例说明_CSS教程_CSS_网页制作_
- 牛人也得看的15个CSS技巧(提高网页效率)_CSS教程_CSS_网页制作_
- IE6的inline-block _CSS_网页制作_
- 只用CSS美化选择框的实现代码_CSS教程_CSS_网页制作_
点击排行
本栏推荐
-
魔兽世界TBC黑庙三脸打断高亮提醒WA 支持进入P2后提示下一棒打断_网络游戏_游戏攻略_
-
cf无条件领全新雷神活动地址2022 CF2月1日大年初一活动网址_网络游戏_游戏攻略_
-
魔兽世界tbc怀旧服团本装备交易倒计时wa 支持通报/可自定义设置时间间隔_网络游戏_游戏攻略_
-
魔兽世界9.2初诞者圣墓boos黑伦杜斯炸圈WA 高亮监控炸圈时间_网络游戏_游戏攻略_
-
魔兽世界tbc怀旧服T6双本黑暗神殿和海山开门任务流程_网络游戏_游戏攻略_
-
炉石传说乱斗疯狂的冬幕节首胜卡组攻略 乱斗疯狂的冬幕节卡组推荐2021_网络游戏_游戏攻略_
-
炉石传说奥妮克希亚谜题1-8关解谜攻略 晨拥谜题攻略大全_网络游戏_游戏攻略_
猜你喜欢
- 魔兽世界TBC黑庙三脸打断高亮提醒WA 支持进入P2后提示下一棒打断_网络游戏_游戏攻略_
- cf无条件领全新雷神活动地址2022 CF2月1日大年初一活动网址_网络游戏_游戏攻略_
- 魔兽世界tbc怀旧服团本装备交易倒计时wa 支持通报/可自定义设置时间间隔_网络游戏_游戏攻略_
- 魔兽世界9.2初诞者圣墓boos黑伦杜斯炸圈WA 高亮监控炸圈时间_网络游戏_游戏攻略_
- 魔兽世界tbc怀旧服T6双本黑暗神殿和海山开门任务流程_网络游戏_游戏攻略_
- 炉石传说乱斗疯狂的冬幕节首胜卡组攻略 乱斗疯狂的冬幕节卡组推荐2021_网络游戏_游戏攻略_
- 炉石传说奥妮克希亚谜题1-8关解谜攻略 晨拥谜题攻略大全_网络游戏_游戏攻略_