在網頁制作中，CSS切圖是非常重要的一種技能。作為一個前端設計師，我們需要充分運用 DIV + CSS 布局技巧，將PSD設計稿轉化為網頁代碼展示出來。以下是我對于 DIV + CSS 切圖的總結：

1. 使用瀏覽器檢查元素工具先了解代碼結構，再進行切圖處理，理清楚

ul,li

的層級結構。

2. 把不會變化的圖片放在CSS中處理，減少http請求，例如背景圖、邊框、四角圓角、N等分圖。

3. 漸進增強，避免過多使用CSS3，降低瀏覽器兼容性。

4. CSS3布局技巧的掌握可以使切圖效率大大提高，例如

flex

，

grid

等。

5. 充分了解盒子模型，padding、margin、border、outline的優先級，以及盒子模型的兩種計算方式

content-box

和

border-box

，可以避免在瀏覽器中出現布局錯亂或者超出容器的問題。

6. 充分利用偽類，例如超鏈接去下劃線、鼠標懸停效果、

:before

和

:after

等，可以達到精細制作的效果。

總之，作為前端設計師，充分掌握DIV + CSS技術和布局技巧可以更好地將設計稿轉化為網頁效果，提高開發效率，同時減少代碼的冗余，達到最佳的用戶體驗。