在寫頁面過程中,每個浏覽器都會有預設樣式,為了避免浏覽器的樣式相容問題,我們會在樣式開始部分對常用标簽進行重置樣式。這樣我們在寫樣式時,就不會有誤差。常用的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樣式初始化都要這樣寫,我們可以根據頁面需要,設定部分公共樣式,在後面寫的過程中會友善很多,而且可以避免代碼的重複性。
附:
今天寫了個導航,出現了個奇怪的問題,思考了兩個小時,到現在都還沒解決。明明很簡單的代碼,看來看去都沒有錯誤,不知道為何效果就是出不來。這個問題我需要時間再思考下,希望在夢中可以想通。今天先到這,晚安。