任务八

今天完成的事情

1. 1. 使用ps对任务八的psd进行切图，并对图片进行命名。
2. 2. 利用媒体查询和display：none实现首页的顶部的响应式效果。
3. 3.利用flex的align-items属性实现垂直居中布局。
4. 4. 使用bootstrap的轮播插件实现首页的轮播效果。

明天计划的事情

1. 1.完成任务八的首页
   
2. 2.整理水平居中的方法

遇到的问题

1. 1.内联元素之间存在空白间距，使用font-size：0可以清除.。之前看张鑫旭的博客，里面举的例子是一个不定高的div内有一个img，img距离底部有一点空白距离。解释的原理是内联元素后面有一个幽灵空白节点，然后一般默认的对齐方式是基线对齐，然而空白元素有行高，默认的行高是根据font-size为基础计算的，将font-size设为0后默认的行高也就为0，img与空白节点底部对齐，所以div内不会出现空白缝隙。除此之外，还可以通过设置对齐方式为middle和top来解决空白缝隙，并以此引申除了垂直对齐的几种方法。但是我遇到的问题是内联元素之间水平方向上的空白缝隙，设置对齐方式无效，设置font-size则可以消除（或者使用flex布局），暂时不清除原理。

收获

1. 1.小课堂上师兄讲解了自适应与响应式设计。自适应‍‍指可以自动识别屏幕宽度、并做出相应调整的网页设计，其实广义上来讲，响应式也是自适应的一种。不过一般来说自适应的网页随着宽度的变化而变化，但是响应式的网页则会随着宽度的变化，选择不同的布局方式。在经济条件和人力等资源有限的情况下，选择自适应可以节约成本，在资源充足的情况下，选择响应式设计可以获得更好的浏览效果。‍
2.