首先设计师给了psd之后，前端分析一下布局，然后把其中需要用到的图片或者图标用ps的切片工具分割好，然后点击左上角 [文件 ] —[ 保存为web模式] 就会得到一个images的文件夹，里面是一些零散的图片（就是你分割的那些）。然后前端开始写代码，一般纯色的背景或者按钮 和一些系统自带的文字都是可以直接用代码打出来的，就那样用代码一点一点的组成、还原设计师设计的网页，其中的一些icon和图片自然是没办法用代码写出来的，所以需要用到之前切好的那些图片和图标，一起拼上去。拼成一个完整的网页，然后还可以给那些图标添加一些代码，使得使用者点击它的时候可以执行一些动作，比如有趣的动效，或者弹出一个神奇的窗口等等。

啊~真的通俗易懂，而且流程都清楚了。

作者：vvhl 链接：https://www.zhihu.com/question/38357171/answer/76030905 来源：知乎 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。