移動web開發二之網頁基本css

京東手機首頁開發

1》css編寫

 基本.css文件的編寫，清除移動終端默認的css樣式。（網頁初始化）

/*function: reset css*/

/*
    選擇器1,選擇器2表示同時使用多個選擇器
    * 表示所有的僞元素
    ::before 表示在所有元素前添加
    ::after 表示在所有的元素後添加
*/

*,::before::after{

/*    element,element表示同時選擇多個元素，    選擇器1,選擇器2表示同時使用多個選擇器   

 * 表示選擇所有元素，    :before 表示在元素內容前插入，    :after 表示在所有元素內容之後插入   

 元素:before ==  類名::before, 爲了區分僞元素和僞類，給僞類添加雙冒號*/

    margin:0;    padding:0;    

/*默認清除webkit點擊高亮的效果，透明的*/    

   -webkit-tap-highlight-color: transparent;    

/*設置所有的以邊框開始計算寬度，默認是以內容開始計算寬度*/   

   -webkit-box-sizing: border-box;    

   -moz-box-sizing: border-box;    

   box-sizing: border-box;}body{    

   font-size:14px;    

/*採用微軟雅黑字體，如果沒有，採用移動終端默認的字體*/    

   font-family:"Microsoft Himalaya", sans-serif;    color: #333;}

a{
    color: #333;
    /*清除文本的下滑線*/
    text-decoration: none;
}

ul,ol{
   list-style: none;
}

input{

 /*重置表單樣式*/   

  border:none;    

  outline:none;    

/*清除移動終端默認的表單樣式*/    

 -webkit-appearance: none;}

.f_left{ 

   float: left;}

.f_right{

    float: right;

}

.clearfix::before,.clearfix::after{

    /*清除浮動，清除所有內容*/

   content: '';

    height:0;    

/*line-height表示行高*/ 

   line-height:0;

    display: block;

    visibility: hidden;

    clear: both;

}