摘要：首先要知道什么叫页面制作切图页面制作切图就是，前端工程师通过和还原设计师的设计稿。每个大的行再按照这种方式拆成内部若干行或者左右若干块如下图拆分完之后对于不同块根据宽度高度特性，选择使用块级元素或者内联元素来表示。
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框架。
以行来拆分设计稿为若干行（以设计稿左右两端为边界）用块级元素构建。
每个大的行再按照这种方式拆成内部若干行、或者左右若干块如下图：
拆分完ui之后对于不同块根据宽度、高度特性，选择使用块级元素或者内联元素来表示。
3. 给HTML节点添加CSS样式（设计稿还原）
块节点已经创建，可以通过CSS来还原设计稿中的每个块结构的实际样式。
文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。
转载请注明本文地址：https://www.ucloud.cn/yun/50875.html
摘要：首先要知道什么叫页面制作切图页面制作切图就是，前端工程师通过和还原设计师的设计稿。每个大的行再按照这种方式拆成内部若干行或者左右若干块如下图拆分完之后对于不同块根据宽度高度特性，选择使用块级元素或者内联元素来表示。 CSS+HTML实战 经过前两篇文章的基础学习后，从本章开始我们要开始实战学习。 1. 首先要知道什么叫页面制作（切图） 页面制作（切图）就是，web前端工程师通过HTML...
摘要：前言不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前端工程师从方面来说，前端工程师和切图崽的区别，并不是指写单条技巧的高低，甚至很多工程师在一些的奇技淫巧都比不上切图崽那切图崽到底和工程师之间的差别是什么呢差别是年工作经验视野，是格局，是 前言 不要再叫我切图崽，我很生气，这样很不礼貌，请叫我前！端！工！程！师！ 从css方面来说，前端工程师和切图崽的区别，并不是指写单条css技巧的...
摘要：文章目录在线图片压缩在线压缩最好用的切图工具在线工具一键抠图免费字体免费素材图片和视频中国风配色网站免费壁纸免费短连接在线在线代码编辑在线流程图思维导图在线图片压缩传送门在线图片压缩网站已经优化超过十亿张图片，支持，，等格式的图片的压缩。 ...
摘要：何去何从在如此趋势所迫中，切图仔该何去何从作为个人来看，工具是没法完全取代人工的，工具可以帮助开发者完成大量的简单重复工作，但是要满足实际业务，还是需要前端工程师的专业知识和技术。 1. 祸起 看到标题，切图仔们又是菊花一紧。前几天微软刚刚开源Sketch2Code，让UI草图转化成HTML代码。切图仔瑟瑟发抖。 showImg(https://segmentfault.com/img...
阅读 973·2021-11-15 18:06
阅读 2325·2021-10-08 10:04
阅读 2573·2019-08-28 18:03
阅读 867·2019-08-26 13:42
阅读 1896·2019-08-26 11:31
阅读 2398·2019-08-23 17:13
阅读 894·2019-08-23 16:45
阅读 2031·2019-08-23 14:11
