一、【看圖】

1、首先得看整體結構，分析布局是怎樣的（比如：“頁頭+內容+頁尾”的上中下結構、“側欄+內容”的多列布局）；

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

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

二、【編寫】

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

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

3、頁面基本架構寫完后，與后端配合調試接口，將數據引入頁面。

三、【測試優化】

1、進行各種相關業務功能測試和瀏覽器兼容性測試，修繕代碼；

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

憑感覺，哈哈。看多了，一眼就知道怎么寫了。但核心布局就是柵格。