前些日子仿了優(yōu)酷的首頁(yè)，中間遇到一些問題，積累了點(diǎn)經(jīng)驗(yàn)，做個(gè)總結(jié)。

1. 需要最先明白的兩點(diǎn)

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

2. 流程

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

3. 其他

選擇器命名： 按照功能命名，而不是樣式。 駝峰大小寫區(qū)分單詞，分割線區(qū)分層次。這樣的兩級(jí)命名法基本不會(huì)出現(xiàn)命名重復(fù)。 如何組織CSS文件： 可以按照功能劃分，比如layout，font，color等?？梢园凑辗謪^(qū)劃分，比如header，footer，sidebar等。都可以，沒有放之四海皆準(zhǔn)的，按照實(shí)際的情況。這次我就嘗試了base+common+page的結(jié)構(gòu)。但是，在page層，在文件內(nèi)部我又按照layout，font，color，header，footer，sidebar混合分類的結(jié)構(gòu)。 在page層的文件中，我先把每一部分的注釋寫上，這樣確定了CSS的結(jié)構(gòu)，然后再一部分一部分的填充。 優(yōu)先使用class，如果某個(gè)元素要在JS中添加動(dòng)態(tài)效果并且只在頁(yè)面中出現(xiàn)了一次，那么可以選擇使用id標(biāo)簽，而不是class，這樣在寫JS的時(shí)候選擇器的效率更高。

4. 遇到的問題

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

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

如果想要a鏈接鏈接到某個(gè)具體的萬維網(wǎng)頁(yè)，在鏈接前面加上http:// 就好了。

轉(zhuǎn)載于:https://www.cnblogs.com/technology-life/p/4537601.html

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。