前端工程师如何根据UI编写页面？

Answer 1

一、【看图】

1、首先得看整体结构，分析布局是怎样的（比如：“页头+内容+页尾”的上中下结构、“侧栏+内容”的多列布局）；

2、分析哪些地方需要截图，哪些适合用css编写，哪些是后台请求的数据；

3、看看哪些版块样式雷同，可以编写一组样式多处公用。

二、【编写】

1、先搭建页面框架，用几个元素色块把布局写出来；

2、挨个区域进行细化，按需求测量各个区域的宽高，从整体到局部逐步细化（包括各种用户交互）；

3、页面基本架构写完后，与后端配合调试接口，将数据引入页面。

三、【测试优化】

1、进行各种相关业务功能测试和浏览器兼容性测试，修缮代码；

2、将css、js等代码进行性能优化...

Answer 2

UI给的图上面会标注尺寸大小、边距、位置等信息，这样前端就可以根据这些信息，布局页面。

Answer 3

凭感觉，哈哈。看多了，一眼就知道怎么写了。但核心布局就是栅格。