页面制做（切图）第一章

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来还原设计稿中的每一个块结构的实际样式。