第10天：CSS初始化操作

半指溫柔樂發表於2017-08-23
CSS

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

 


相關文章