前些日子仿了優酷的首頁，中間遇到一些問題，積累了點經驗，做個總結。

1. 需要最先明白的兩點

不要只是無腦的切圖，要去體會設計師的意圖，不僅僅是還原設計稿，而且要盡可能去還原設計師的設計理念。 切圖的時候就提前想好需求可能會有變化，這要求我們提前做點工作，減少需求變化時的工作量，一般是提取頁面中的公共組件。如何提取公共組件，可以參考《編寫高質量代碼》。

2. 流程

仔細看PSD文件！！！！復雜些的PSD圖，起碼先看3個小時吧。看不好的話，后面推倒重來簡直麻煩死！看PSD的時候主要是注意三個地方： 1. 確認好骨架設計，比如主要的布局方式（是浮動啊，普通流啊，還是絕對定位啊等等），分層設計并賦予相應的z-index值（可以在FW里標注上）。骨架設計好之后寫出整理骨架的代碼。 2. 提取共有的組件，一方面可以減少工作量，另一方面使得CSS文件的彈性更好，更好的應對需求的變化。提取組件的原則是：模塊與模塊與模塊之間盡量不要包含相同的部分，如果有相同的部分盡量提取出來做成一個獨立的模塊。為了方便重用，每一個模塊的結構都不應該太復雜。并且模塊不應該太多，在模塊盡可能少的原則下，做到盡可能簡單，提高重用性。 3. 全局樣式，比如字體樣式，鏈接樣式等，這樣就不用見到一個字體就寫一個樣式了。 開始切圖了，一次把圖切完最省事。某些圖標需要用雪碧圖合成，減少HTTP請求。 從頁首開始做，完全做完（不要留下一部分等到最后在做）一部分之后測試。 開始測量的時候，骨架部分（長寬，間距，背景顏色）可以嘗試使用馬克鰻來測量標注，比FW方便。具體細節，比如文字顏色，種類什么的，可以使用FW。 測試的時候一方面是測試瀏覽器兼容性，另一方面是測量像素對齊，推薦使用perfectpixel這個Chrome擴展，功能太強大！！！

3. 其他

選擇器命名： 按照功能命名，而不是樣式。 駝峰大小寫區分單詞，分割線區分層次。這樣的兩級命名法基本不會出現命名重復。 如何組織CSS文件： 可以按照功能劃分，比如layout，font，color等。可以按照分區劃分，比如header，footer，sidebar等。都可以，沒有放之四海皆準的，按照實際的情況。這次我就嘗試了base+common+page的結構。但是，在page層，在文件內部我又按照layout，font，color，header，footer，sidebar混合分類的結構。 在page層的文件中，我先把每一部分的注釋寫上，這樣確定了CSS的結構，然后再一部分一部分的填充。 優先使用class，如果某個元素要在JS中添加動態效果并且只在頁面中出現了一次，那么可以選擇使用id標簽，而不是class，這樣在寫JS的時候選擇器的效率更高。

4. 遇到的問題

不指明圖片大小，IE8甚至不能顯示圖片。

某個樣式無效，一種可能是拼寫錯誤，更可能的原因是選擇器的權重太低，增加一加權重就好啦。只要打開調試器定位到元素，很容易找到出錯的地方。

如果想要a鏈接鏈接到某個具體的萬維網頁，在鏈接前面加上http:// 就好了。

轉載于:https://www.cnblogs.com/technology-life/p/4537601.html

總結

以上是生活随笔為你收集整理的切图总结的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。