一、概述
通过前几节的内容，我们已经掌握了html与css的基础知识，本节我们使用之前学过的知识来还原一张设计稿。
Photoshop的基本操作
在还原设计稿时，我们需要使用photoshop打开psd格式的设计稿，作为前端工程师，我们不需要太多的ps技巧，只需要了解一些简单的基本操作即可。
alt+滚轮 缩放图片
空格+鼠标左键 拖动图片
shift+m 切换到选取工具，使用鼠标左键选择，ctrl+d可以取消选取。
F8查看信息，可以查看选取内容的尺寸。
shift+t 切换到文字工具。
单击色盘可以吸取颜色
ctrl+r 切换显示标尺
鼠标左键可以从标尺中拖出辅助线，取消辅助线可以将其拖入标尺
shift+c 切换到切片工具，选择切片后。
选择切片后，按alt+shift+ctrl+s:存储为web和设备所用格式，就可以看到切片选择的对应图片了。
开发规范
在还原设计稿之前，我们了解一下制作规范。
统一使用class定义样式。
class命名要有语义。
class命令，多个单词使用下划线命名
切图要精确单1px。
文字描述不要用图片。
以上是对初学者的一些规范，在实际项目开发中，公司应该会给出具体的规范要求，到时候按照公司的要求制作即可。
二、网页重构
在实际工作中，UI设计师在设计网页的过程中，会留存很多网页中图片的源文件，我们在还原设计稿的时候，直接让设计师把网页相关的图片给我们即可。
有了网页中的图片素材，接下来我们使用phoneshop打开psd格式的设计稿，按照相应的尺寸还原设计稿即可，响应尺寸如下所示：
设计稿整体的宽度
盒子模型中的宽度，高度，以及边距尺寸
字体大小
三、注意事项
对于初学者来说，还有很多内容是需要注意的。
高度自适应问题
网页中的很多位置是不应该设置固定高度的：
例如列表容器的高度应该根据列表元素的个数决定其高度，列表元素个数越多，列表高度越高。
列表容器是不应该设置高度的。
还有文章容器的整体高度，也应该根据内容的增多而逐渐增高。
在布局的时候，这些效果都不应该设置高度。
宽度自适应问题
在第07节中我们了解到，块元素默认情况独立成行，严谨的说，应该是：
块元素默认情况下占父级元素宽度的100%
因此，在网页制作中，如果块元素（例如div，ul，li等），我们希望其宽度占容器元素的100%，则可以不设置width属性。
如果是body标签自己的块元素，不设置宽度，其实际宽度会随着浏览器宽度的变化而变化，这样就实现了元素适应浏览器的宽度。
例如融职教育首页的头部，就是一个适应网页宽度的容器。
四、课后练习
完成融职教育首页的设计稿
网友评论