今天完成的事情：

修改完成任务8.9

整理任务8.9的收获

明天计划的事情：

开始任务10的学习

遇到的问题：

任务8.9的动画效果无法实现。查了资料意识到display：none和过渡动画产生冲突，无法有过渡效果。使用Visibility：hidden来实现隐藏效果就会有过渡动画效果

细节调整上和ps地图有一些差距，需要更多地去注意，尽量全部按照ps地图来做。修改完成

收获：

完成了任务8.9

总结了一下8.9任务制作过程中所遇到问题，以及收获。

一开始做任务8.9的时候才接触到bootsarp框架。

一开始去使用十分迷茫。

containe，row，column，这些都是些什么鬼东西

深入了解后才发现containe是一个容器自带一个左右padding 15px。

row是一个行的意思自带一个左右-15px的magin。

而column就是一个自带padding：15px的小格子

而一个row里面被平均分成12个colum，

这个时候我就认识到了响应式，bootsarp自带的响应式

前面说到一个row里面被平均分成了12个column，

如果你在col（column）标签后面跟上bootstarp自带的媒体查询属性，至于什么是媒体查询后面再说。

bootsarp自带的媒体查询属性有：

xs（<768px屏幕） sm（786px≤屏幕＜992px） md（992px≤屏幕＜1200px） lg（屏幕≥1200px）

比如你给你的一个row里面的子集盒子设置了col-sm-6和col-md-4，

那么这个子集盒子在992px≤屏幕＜1200px之间它的宽度是一行row的12分之4.

而在786px≤屏幕＜992px 之间它的宽度是一行row的12分之6.

这个就是bootsarp的响应式。

这里还有一个很奇怪的地方，如果使用了bootsarp的栅格布局，一旦当你的屏幕尺寸超过780的时候，你containe的padding：15px，会随之你的屏幕增大随之增大，可以去试试

然而当我们遇到一些布局。比如一行5个不能用12整除，我们可以自己去设置你所需要的效果，运用媒体查询。

媒体查询 @media 

比如@media screen and （max-width：768px） and （min-width：992px）{类名标签}

在这个里面打的属性，只会在你媒体查询规定的屏幕尺寸内才会生效。同时要注意max和min都是包括你打的尺寸也就是≥≤的效果。