在写页面过程中,每个浏览器都会有默认样式,为了避免浏览器的样式兼容问题,我们会在样式开始部分对常用标签进行重置样式。这样我们在写样式时,就不会有误差。常用的CSS标签初始化如下:
@charset "UTF-8"; /*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,input,button { border:none; padding:0;margin:0;outline-style:none; } ul, ol { list-style:none; } input { padding-top:0; padding-bottom:0; font-family: "SimSun","宋体";} select, input { vertical-align:middle; } select, input, textarea { font-size:12px; margin:0; } textarea { resize:none; } /*防止拖动*/ img {border:0; vertical-align:middle; } /* 去掉图片低测默认的3像素空白缝隙*/ table { border-collapse:collapse; } body { font:12px/150% Arial,Verdana,"\5b8b\4f53"; color:#666; background:#fff } .clearfix:before,.clearfix:after{ content:""; display:table; } .clearfix:after{clear:both;}/*清除浮动*/ .clearfix{ *zoom:1;/*IE/7/6*/ } a{color:#666; text-decoration:none; } a:hover{color:#C81623;} h1,h2,h3,h4,h5,h6{text-decoration:none;font-weight:normal;font-size:100%;} s,i,em{font-style:normal;text-decoration:none;} .col-red{color: #C81623!important;} /*公共类*/ .w { /*版心 提取 */ width: 1210px;margin:0 auto; } .fl { float:left } .fr { float:right } .al { text-align:left } .ac { text-align:center } .ar { text-align:right } .hide { display:none }
并不是说每个页面的CSS样式初始化都要这样写,我们可以根据页面需要,设置部分公共样式,在后面写的过程中会方便很多,而且可以避免代码的重复性。
附:
今天写了个导航,出现了个奇怪的问题,思考了两个小时,到现在都还没解决。明明很简单的代码,看来看去都没有错误,不知道为何效果就是出不来。这个问题我需要时间再思考下,希望在梦中可以想通。今天先到这,晚安。