今天完成的事情：

再次理清任务4的思路 : 首先布局顶部，然后是form表单内容，最后加上button用以提交表单，然后对各个部分的样式进行调整，即可完成页面。

了解 前端工程师必备的PS技能——切图

Photoshop 是跨平台的重量级图像处理软件，主要处理以像素所构成的位图数字图像。它不仅应用广泛，支持众多的图像格式，同时为我们提供了相当便捷和自由的工作环境。
熟悉Photoshop 的工作界面,了解其其界面的区域划分,开始使用Photoshop之前的优化

• 1. 新建设置（介绍网页设计中的初始化 尺寸参数 以及一些相关的 快捷键 ）

文件——新建——预设（web）——宽度（1920像素）、高度（自定义）——分辨率（72像素/英寸）——颜色模式（RGB颜色）——背景内容（透明）——存储预设——预设名称（网页设计）——确定——确定
2. 移动工具设置（介绍移动工具针对网站前端的设置 属性 及其 快捷操作）
移动工具（V）——选择：由“组”切换到“图层”——按住“Ctrl”键，然后选中图层单击鼠标左键

• 3. 视图设置（针对前端在视图方面的设置以及设置中的 技巧优化）

视图——勾选“标尺（Ctrl+R）”——显示——勾选“智能参考线（M）&勾选参考线(Ctrl+;);
窗口——勾选“图层(F7)” 、“历史记录”、“信息(F8)”、“字符”四大面板，并删除其他多余面板
信息：单击右上角，面板选项（颜色模式：RGB；标尺单位：像素；勾选“文档大小”和“文档尺寸”；确定）
编辑——首选项——单位与标尺——标尺：像素；文字：像素——确定
自定义工作区名称:窗口——工作区——新建工作区——名称：web切图——勾选“菜单”、“键盘快捷键”——存储（再次打开可以直接窗口——工作区——web切图）
在Photoshop 里打开一个网页，按住"Ctrl"+点击哪个图片或者某个字符，就可以知道它的详细的信息。

明天计划的事情：

继续对CSS中的display,position和float 属性的进行深入了解

遇到的问题：

• 了解Photoshop基本操作。 使用Photoshop从psd文件中获取网页前端开发过程中所需要的资源。

浮动元素是如何定位的?

当一个元素浮动之后，它会被移出正常的文档流，然后向左或者向右平移，一直平移直到碰到了所处的容器的边框，或者碰到另外一个浮动的元素。

对CSS中的display,position和float 属性依然不是十分清楚?

收获：

可以做一些简单的图片处理和调整。 提高自己的审美及其美感。

了解浮动用于文本环绕，浮动布局的核心就是让元素脱离普通流，然后使用width/height，margin/padding将元素定位。脱离普通流的元素，与普通流不在一个高度上。这个跟图层的概念类似。高度不同所以可以叠在其他元素上面产生重叠或者使用负边距跑到父元素外，理解了这一点浮动布局就很好理解了。