知識點

● css和html程式碼配合
● css命名和html標籤結構應用
● 用ps去審視一個設計稿
● 瀏覽器相容性

切圖的方法

準備好一張psd的網站圖，軟體photoshop；
對於樣式分類，有助於提高效率
分為公共樣式common，重置樣式reset，主頁樣式index三個部分來寫，當然看個人需求，大部分可以寫在一塊，但是新手這樣比較清晰。

reset.css//
body,div,dl,dt,dd,ul,li,a,p,h1,h2,h3,h4,h5,h6,input,form,textarea{
    margin:0px;
    padding:0px;
 

}
ol,ul li{
    list-style:none;
}
a{
    text-decoration:none;
    display:block;
}
img{
    border:none;
    display:block;
}

.clearfix{
    zoom:1;
}
.clearfix:after{
    display:block;
    clear:both;
    content:"";
    visibility:hidden;
    height:0;
}
//

1. html頁面開始佈局時，先要有大局觀，把公共部分搞定，而且所有的命名要規範，仔細。命名規範和層次性很重要
2. 命名時切記用拼音，都用英文單詞，或者中劃線連線。
3. 典型的公共樣式，公共寬度或者居中容器，樣式都分開來寫，只用加在class前就可以了。
4. 內聯元素和塊級元素在佈局時，儘量不要在同一級中出現。像是ul，li這種常用的列表，寫樣式的時候不要直接對li操作，最好都加上一個class來區域性操作。
5. 對於有浮動佈局的元素，基本都在後面加上清除浮動clearfix，可以防止以後佈局混亂
6. 不常換的圖片或者logo，都用css的background背景去顯示，要與後臺資料互動的才放在html標籤裡。
7. 使用ps摳圖，選中圖片圖層-右鍵智慧化物件-框選中圖片-複製-新建ctrl+n-貼上-儲存為png/jpg. |ctrl+d取消選擇 ，ctrl+alt放大鏡效果，h選中拖拉。
   可以調整影象-畫布大小自己來佈置一張icon精靈圖
8. 破折號的css可以用設定一個寬和上表框，inline-block以後可以顯示出來。
9. span標籤可以多用來存精靈圖，和特殊顏色的字元。
   當我們把內聯元素變成inline-block的時候，如span，用font-size : 0;清除行內塊元素的4px間距.
   最後要做一些相容性的處理，尤其在IE瀏覽器下,對css樣式做hack處理，像是
   margin-top:20px; /只在IE7下實現*/

最後，需要自己練習一份從拿到psd內容，到能比較快速的變成靜態web佈局的水平，後續會再上傳一份程式碼塊。