页面制作（切图）第一章

CSS+HTML实战

经过前两篇文章的基础学习后，从本章开始我们要开始实战学习。

1. 首先要知道什么叫页面制作（切图）

页面制作（切图）就是，web前端工程师通过HTML和CSS还原UI设计师的设计稿。
目前各公司UI设计师常用的设计工具有Photoshop、Sketch

下面这是我们公司设计师通过Sketch制作的设计稿

可以通过这款连接设计师和前端工程师（web前端、android、ios工程师）的标注工具，进一步了解

知道了切图是什么之后我们要关注几个CSS（css长度单位区别）px、rem、em
对于pc端页面常用单位px
对于移动端常用单位rem

如何将设计稿中元素块的尺寸和CSS中的尺寸
对于pc端可以完全通过px尺寸是1:1对应的，就是设计稿中某个模块的width是100px那么就可以设置html中对应的节点宽度为100px
对于移动端则有很大适配问题可以读一下这篇文章加以理解

2. 拆分设计稿结构搭建HTML框架

对于最基本的长度单位有了了解之后，下面需要做的就是拆分设计稿搭建HTML框架。

1. 以行来拆分设计稿为若干行（以设计稿左右两端为边界）用块级元素构建。

2. 每个大的行再按照这种方式拆成内部若干行、或者左右若干块如下图：

3. 拆分完ui之后对于不同块根据宽度、高度特性，选择使用块级元素或者内联元素来表示。

3. 给HTML节点添加CSS样式（设计稿还原）

块节点已经创建，可以通过CSS来还原设计稿中的每个块结构的实际样式。