‍‍‍‍‍‍‍‍‍‍今天完成的事情：‍‍‍‍‍‍‍‍‍‍‍‍

完成任务3，具体情况如下：

1、观察效果展示图，发现宽度随着分辨率改变而变化，高度则不变，整体不会变形。

2、页面布局。这一步走了一些弯路，刚开始想得太复杂，用了很多float，发现实现不了。后来采用盒子模型的原理。用div，通过设置margin进行布局。

3、用photoshop切图。

4、将图片运用到页面中，为div设置样式。

5、自适应。添加<meta name="viewport" content="width=device-width, initial-scale=1" />

宽度用百分比设置，高度用em设置。

6.用Chrome开发者工具调试，使页面和设计图效果一样。

明天计划的事情：

开始任务4

遇到的问题：

1、布局问题，如上面所说，花了不少时间。

2、测量图片大小，各种间距大小，以及他们所占比例。这个也花了不少时间，但是最终测出的数据也不是很准确。最后进行了微调，感觉差不多了。

3、不会把图片居中，后来找到了两种解决办法。

4、开始忘记加 meta name=viweport 导致不能自适应（T_T ）

收获：

1、学习了《自适应——PX，EM，REM的概念，自适应布局的写法》，了解了px,em,rem。

2、让div中的img居中的方法：（1）div中设置：text-align:center  （2）img为内联元素，先设置display:block将它转化为块元素，

然后设置margin:0 auto。

3、学习了用line-height来设置行高。‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍