CSS+HTML实战经过前两篇的基础学习，我们将从本章开始实战学习。1、首先我们要知道页面创建（切图）叫什么。页面制作（切图）是指Web前端工程师通过HTML和CSS还原UI设计师的设计稿。目前各公司UI设计师常用的设计工具有Photoshop和Sketch。这是我们公司设计师通过Sketch制作的设计稿。这是一款连接设计师和前端工程师（web前端、android、ios工程师）的打标工具。了解了抠图是什么之后，我们需要注意几个css（css长度单位区别）px,rem,em为PC页面常用单位px，移动端常用单位rem如何将设计稿中元素块的大小与CSS结合pc端的大小可以完全对应1:1的px大小，即设计稿中一个模块的宽度为100px，则html中对应的节点宽度可以设置为100px，非常适合移动端可以看这篇文章了解问题。2.拆分设计稿的结构构建HTML框架。了解了最基本的长度单位之后，接下来要做的就是拆分设计稿构建HTML框架。将设计稿逐行拆分为多行（以设计稿的左右两端为界），以块级元素构建。每个大行通过这种方式拆分成若干个内部行或左右块，如下图：将ui拆分后，根据宽高选择使用块级元素或内联元素来表示不同的块特征。3、给HTML节点添加CSS样式（还原设计稿）块节点已经创建，可以通过CSS还原设计稿中各个块结构的实际样式。
