一、【看圖】

1、首先得看整體結(jié)構(gòu)，分析布局是怎樣的（比如：“頁頭+內(nèi)容+頁尾”的上中下結(jié)構(gòu)、“側(cè)欄+內(nèi)容”的多列布局）；

2、分析哪些地方需要截圖，哪些適合用css編寫，哪些是后臺請求的數(shù)據(jù)；

3、看看哪些版塊樣式雷同，可以編寫一組樣式多處公用。

二、【編寫】

1、先搭建頁面框架，用幾個元素色塊把布局寫出來；

2、挨個區(qū)域進(jìn)行細(xì)化，按需求測量各個區(qū)域的寬高，從整體到局部逐步細(xì)化（包括各種用戶交互）；

3、頁面基本架構(gòu)寫完后，與后端配合調(diào)試接口，將數(shù)據(jù)引入頁面。

三、【測試優(yōu)化】

1、進(jìn)行各種相關(guān)業(yè)務(wù)功能測試和瀏覽器兼容性測試，修繕代碼；

UI給的圖上面會標(biāo)注尺寸大小、邊距、位置等信息，這樣前端就可以根據(jù)這些信息，布局頁面。

憑感覺，哈哈?？炊嗔?，一眼就知道怎么寫了。但核心布局就是柵格。