学习切图后的精美网页制作笔记

学习了各种布局，并且练习熟练之后。学习了前端程序员有必要学习的切图。

从百度学院找到作业，本次作业先对原有网页进行切图，然后根据原有网页模仿。

1.先看网页制作完成后的样子

（原谅我三张图……Photoshop还是不够溜）

2.学习切图

①安装并学习了photoshop的工具，以及作为前端工程师需要掌握的方法。

②学习了三中切图方法：

一是自动框中系统中分割的部分，进行切图。缺点是比较慢，并且有许多没用的图，如果图片简单的话可以考虑这个方法。

二是自己手动划分需要切得图形。过程也是比较麻烦，不过可以在复杂的图片自由选取需要的部分。

三是根据图层保存为图片，当被切的图片简单，或是需求原因可以使用这个方法。

3.网页布局

本次使用float浮动元素比较多，以及适量的边距设置完成本次页面布局。

4.收获

学习了photoshop的使用以及切图方法，熟练了css布局。完成一个很成熟的页面非常有成就感。

5.不足

在本次联系中许多css布局方法比如position定位和flex盒子，都没有用到。并且在布局时，有一些的尺寸精准方面的细节也没有做好。

以后努力！！！