今天完成的事：

1.完成了任务六的布局

2.学习了如何做雪碧图

明天的计划：

1.提交任务六

2.进行任务五的深度思考

3.开始任务七的学习

遇到的问题：

1.一开始没有用雪碧图布局完成了布局，后来学习了如何制作雪碧图，但是由于雪碧图的位置和原来有区别，又重新进行的布局

2.我今天任务六，整体采用的是flex弹性布局，把前几天学习的知识都综合用起来了，但是我觉得还可以尝试多种方法，用inline-block或者直接上bootstrap都可以，有时间我会试一下

今天的思考图

收获：

1.昨天我重新学习了flex中的几个参数，对于水平、垂直的布局把握更近了一步，并且昨天的深度思考——如何理解html的语义化

今天我慢慢体会了语义化这一概念，开始任务六之前先思考了如何布局整体，需要用到哪些元素，例如可以用ul li很好的替代掉中间部分全部使用div，用flex可以很好的将信息一行行展示。对于弹性布局我也思考过，怎么利用class把信息用span包裹，再上flex。

先思考，后行动！语义化更好，逻辑更清晰的HTML，在后期CSS上样式的时候也更加容易！

2.今天还学习了雪碧图，之前都没接触过，就是把N多个小图标，做成一个合成图，合成后会把每个小logo的background的left top参数给我们

然后我们就可以在原先img地方替换成一个块级盒子（div.li.都可以），再去CSS里面定义出这个图片的width,height（参数里面有，不能自己设）,然后就可以引用background的url。 一般来说，到界面上的位置都是不对的，需要再用absolute来调整。

雪碧图的优点：

1.可以减少网页加载页面对服务器的请求

2.提高页面的加载速度

不足：

1.雪碧图可能会有很多留白的地方，有时更加占用内存

2.影响了浏览器的缩放功能，这一点我在使用中也体会到了，如果把图片调大，相邻的图片就会露出来。

如果对于大图来说，会非常不方便

3.由于很多图片拼合在一起，所以后期维护会更加麻烦

4.CSS雪碧图不能被打印！

【任务四深度思考5.6】

5.使用fixed的时候，在手机上查看是否会有问题，怎么解决？ 

我用fixed做header头部的时候还好，主要是注意用了fixed，抬头会往上窜，需要给一个top值才能见到完成头部。但是做footer底部的时候发现，如果上方的文字自动换行下来，会出现内容和footer交叉混在一起的情况，给footer设一个白色background+padding-top就可以解决。

6.常见的移动端登录页header有哪些实现方式？  

我一共有四种方法可以实现

（1）header的宽度一般设为百分比，这样可以随着屏幕拉伸而拉伸，高度设一个定值，然后抬头的左中右三个文本，可以采用左右浮动，这样不会占据文本框，把中间的文字div用text-align：center，由于左右没有盒子影响，可以直接文本居中

（2）用flex，弹性盒子，使用justify-content: space-between，可以想象成中间的盒子把左右盒子均匀向左和向右推移，并且可以随着屏幕拉伸而变化，这个方法的缺点就是，左右任意一个盒子被删除，就无法完成居中。

（3）也是用flex，把中间的文本用垂直居中 justify-content:center

（4）类似于方法一的延伸，左右的文本用float left right + margin，中间的文本用CSS3最新的绝对定位的算法 absolute+calc