设计稿 ---> 页面

1 . 切图

使用PhotoShop将图片、图标从设计稿中切下来备用。

编写html代码。

1）分析页面结构，转换输出成html标签结构。如：不同的内容应该使用哪个标签来展示？哪些内容要放在同一个容器中？哪些内容是并列的？

2）写html结构代码的同时，要起好类名，能够唯一标识每一个标签，方便后面写css样式。

1）去掉标签的默认样式。

2）提炼公共的css类。
根据设计稿，提取出公共css类，变量等，方便通过less语法进行复用。

好处：提高css类的复用性；简化css属性的书写。

原则：哪些样式使用的比较多，就可以将它单独定义成一个类。用的比较多的属性值，可以设置成less形参的默认值。

这些公共类一般是less中的混入类，有形参，不会输出到css文件中。如：

.font(@bold: normal; @size: 12px; @lineHeight: 12px; @color: #3c3c3c){
    font: @bold @size/@lineHeight "微软雅黑";
    color: @color;
}

3）依次完成页面各个区域的样式。

使用PhotoShop对设计稿中各个元素进行测量，得出它们的宽高大小，间隙大小，边框大小，字体大小，行高，颜色值等信息，转换输出为css代码。

先完成外层容器的样式，再一一完成内容的样式。

使用编译工具（如Koala软件）将less代码编译为css代码。