今天完成的事情：任务3
明天计划的事情：任务4 
遇到的问题：PSD是640P的，切出来的图片过大，在320PX的屏幕看图片大了很多，移动端的图片是否要跟随屏幕大小变化 
收获：

1.分析任务要求和参考效果展示：

①组成：一个返回图标，一个葡萄藤logo，一段文字说明，底下两个logo，纯色的背景图片

②大小变化：文字，图标和logo的大小都不随页面宽度改变

③位置变化：返回图标在左上角位置是固定值；葡萄藤logo一直居中；底下两个logo一个偏左一个偏右，距离页面固定比例；第一行文字位置不变，位置居中，宽度随页面宽度变化

2.切图：

①打开PSD，对图片进行处理，把图片以外的部分裁剪掉，然后图像→裁切，使画布适应裁剪后的图片

②收集相关的位置数据

a.编辑-首选项-常规-字体与标尺-标尺和文字单位改为像素   

b.点选移动工具-自动选择勾掉-下拉列表选图层-ctrl点图标-鼠标移出图标范围即可知道到页面的距离

③字体大小，类型，行间距（字符面板中查看）

④添加标线到要切除的4个图标周围，点切片工具，把四个图标切下来，导出-储存为WEB所有格式；把背景的图层单独导出

⑤把切好的图片放到服务器

3.网页构建

①位置是自适应的，使用百分比去定位

②建立5个box，box边框显示（方便查看定位），用position：absolute定位（absolute与relative的区别如下）

a.绝对定位不能用margin，用left,top等

b.绝对定位参考点是html的四边，距离百分比参考html的宽高

c.相对定位参考点是box的四边，百分比参考html的宽高

d.相对定位的top或者bottom用百分比时失效是因为html没有设定高度，默认高度0，要起效的话，先声明html的height=100%

e.相对定位占空间，绝对定位不占空间

③引用服务器里面的图片，图片地址：服务器地址+图片路径 （记得带http://）

如：我背景图放在了服务器的images的文件夹里面，地址就是http://118.126.113.248/jnshu778/images/background.png

④插入图片后发现图片在320P的时候超级大，因为psd里面的图片是640P的，切出来的图片放在320p里面是大4倍的，需要调整图片的大小，box位置跟着微调

a.找到相应倍率的图片插入

b.用图片自适应的方法，width=倍率，height=auto

c.用CSS3里面的方法更改倍率，transform:scale(倍率)

⑤字体的相关设定，关闭box边框显示，兼容性检查，开发者工具确认是否符合要求