今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin） 

今天完成了任务八九
明天计划的事情：（一定要写非常细致的内容） 

开始十
遇到的问题：（遇到什么困难，怎么解决的） 

做任务八的时候，右上角的三个小图标，我使用了栅格系统，左右设置了COL-6以后发现右边没有办法贴有，不知道为什么
收获：（通过今天的学习，学到了什么知识）

任务八-九任务总结

成果链接 https://jksmiss.github.io/start-a-project/task8/task8-1/task8-1.html

任务耗时2018.10.5~10.21

官方脑图

我的脑图

在任务八和任务九的时候我学习了下

Bootstrap4 的东西

在设置这个东西的时候，我先是看了下栅格布局，接着我就开始了进行第一步的布局，但是没有看源代码

一开始的时候，我运用了栅格布局的左右两边各设置了COL-6，也就是一半的部分，因为栅格布局，就是把

一个页面分为12部分，就看自己怎么去运用这个东西了。然后我就开始了看下导航栏部分，就是折叠的导航栏

就直接就进行缩放的时候出现下拉框的那个图标样式，那么我这边就直接的用了教程的导航栏下来使用了

然后成功的运用了在上面的部分

这个就是页面在展开的时候，那么页面在缩放的时候是这样的

还有下面的部分是这样的

然后接着的部分是这样的

也就是中间的轮播图的部分，那么我这边的话，就直接开始了根据官网的要求，直接的COPY

这个部分是前两个的页面

那么这边就开始了接下来的部分

下面的部分我就使用了栅格布局的每一个部分成了3个，这样的话就会成为了十二个

接着我再插入了雪碧图，然后使他们都是这样的布局，都是这样的

接着的话在不考虑响应式布局的情况下，我使用了栅格布局的样式，做出了下面的画面

然后是这样的画面在配合雪碧图的情况下

接着是IMG图片的部分，接着我再使用了最底下的部分

上面的部分，简单的个每个都设置成一样的样式，等分一样就可以了

底部的样子，右边的雪碧图，一开始的我的是使用了偏移的样子，但是后面发现还是很麻烦就干脆在师兄的帮助下，我换了个布局的方法就可以了

第二个页面也是这样的

上下两边都是一样的，然后这部分我使用了IMG的图片插入然后下面的设置也是一样的

左右的两边设置成12份就可以了

然后右边的文字上面设置了一下左边的缩进部分就行了

就是上面的这样的样式设置

接着是第三个页面的部分

这个部分也是用的栅格布局就可以做出来的部分

这个是使用

Bootstrap4

的东西，里面的表格标签做出来的部分

还有这个部分的动画效果

最后的这个部分，也就是响应式的页面

这个是就是上面部分的最小页面的自适应样式了

还有最底部的部分的自适应样式

这个部分就是最小页面的样式

这个就是第一个页面的样式

中间的部分，为了保持样式的好看，我就把右边的图标就都给取消了

最底下的部分我就只好采用了图片缩进的方式了

整体就这样完成 了

通过使用transition进行过渡动画的显示。这里要注意，如果是hover触发式的transition。。其元素显示类型不可以使用display：none，hover {display：block}进行触发。

要使用visibility：hidden。

因为display none，是将元素从html渲染树中清除，在渲染文档流内没有给它留位置。父元素的display：none导致子元素隐藏是因为，它从渲染树中摘除了。display:none不继承

而visibility：hidden只是元素隐藏，但是他还存在于渲染树中。子元素的隐藏是因为visibility是继承属性，子元素的隐藏是因为继承了visibility的值。