完成的事情：

任务3完成并且上传到个人网站以及Github；

收获：

任务3收获还是比较多的：

一：DIV布局

1、首先，这个任务是DIV+CSS的组合应用，即实现网页页面内容与表现相分离，在HTML中加入层叠样式表CSS来控制页面布局。样式表可分为嵌入式样式表、外部样式表和内联样式表三种，而本列采用的是嵌入式；<style type=”text/css”>

2、先通过DIV来对整个网页经行布局，其中在头文件中要注意加上控制网页自适应的代码，即<meta name="viewport" content="width=device-width, initial-scale=1" />（网页宽度默认等于屏幕宽度（width=device-width），原始缩放比例（initial-scale=1）为1.0，即网页初始大小占屏幕面积的100%。），其目的很明确，就是自动识别屏幕宽度、并做出相应调整的网页设计。

3、DIV的结构如下：一个大的div（container）规定整个容器，容器里包含四个小div：分别是返回按钮、葡萄藤logo、葡萄藤中间介绍文字和脚图标（其中脚图标div包含了两个小图标）。其中角图标DIV我最早开始并没有使用。

二：PS切图

1、切图其实这个task用到的知识并不难，就只是把除icon以外的图层都关掉，然后用切片工具切就是了。

2、需要注意的是在保存切片是要选择png-24格式来保存，我最早用的是png-8但是在网页中图标会显示出白边，后来提高了保存图片的质量才没有了白边。

3、另外一点，在切最下方的两个圆形图标时，一定要把图标的切片高度切一致，这样在CSS样式表设置时，才不会出现两个图标的不同文字高度不一的状况（因为第一次我是两个图标分开切的，所以即使设置里同样的文字高度和行间距，显示出来的两行文字高度也不一样）。

三、CSS布局

1、CSS是这个任务的重点和难点，稍不注意就会造成页面不匹配或者显示效果不好等状况。

2、首先在整个盒子容器（container）的设置中，不能缺少max-width的设置，如果只设置了width就有可能使整个容器超出所要的现实的范围。

3、在对图片的尺寸设置时，img{max-width=100%}而不能用width。

4、在期初的代码里，我的文字和图标下的两行数字和字母，全是用px作为单位，但是当我缩小页面比例时，我发现网页并不能随着屏幕尺寸的缩小而拉伸。后来我把px改成了rem，问题迎刃而解。因为使用rem为元素设定字体大小时，仍然是相对大小，但相对的只是HTML根元素。这个单位可谓集相对大小和绝对大小的优点于一身，通过它既可以做到只修改根元素就成比例地调整所有字体大小，又可以避免字体大小逐层复合的连锁反应。

以上就是个人在task3中遇到的问题和一些拙见，还恳请各位大牛批评指正，head to task4