今天完成的事：

1.开始任务八学习

2.学习了Bootstrap

3.学习了如何用多种方法，用CSS实现“小三角形”

4.学习了clear: both的含义

5.区分了 / ./ ../路径的问题

明天的计划：

1.继续任务八

2.继续掌握Bootstrap的使用

目前任务八的疑惑：

1.每个col可以按照 width比例分配每行的位置，但是如何用媒体查询，拉小屏幕，改变从横着 到竖着排列？——现在发现好像是给了百分比，但是无法在缩小屏幕换行呀？（demo里是这样的，但是百度又能实现） 

 ——但是，另一个demo用的是“col-md-”选项，确实可以在缩小屏幕，从水平变成平行。 所以到底如何结合这两者？

————所以，经过一番纠结，我参照着demo，按照 col-md-3 *4的排列，真的把文本做出来变窄就竖直排列的样式了？？ 明天可以上CSS看看效果了 小激动

收获：

0.学习了bootstrap:

刚刚接触了bootstrap,由于不是很了解，所以做了一个demo，感觉一下子豁然开朗！

大于992后马上变平行：

1.探究了如何多种方法 制作小三角

首先明确一点，我们平时所用的Border，其实是由4个三角形构成的，所以我们才能够做出三角形这个效果，我们设四个不同颜色的border，就可以看到。

懂了原理，再来做三角形就非常简单了，只需要把想显示的哪个方向的三角形留下，其余都设tranparent透明，就可以做出来了。 另外还可以利用：：after伪元素来实现，这里我就不展示了，有兴趣自己可以别探讨。

2. clear:both到底有何用？？

为了探究这个，我特地搞一个demo，自己动手后记忆犹新！

简单的来说，就是，现在有两个div的块级盒子，如果第一个盒子设了float，那么浮动的原理就会把第二个盒子往上面带，形成同一行。我们知道DIV是块级元素，有自动形成一行的行为，但是在float前就失效了，这时候，用clear就可以拯救他！！来看demo

清除浮动后：

今天提交了任务七，做一个任务七总结：

总的来说，任务七还是有些许坎坷的，首先第一天晚上我就很顺利的把三个页面的所有html骨架搭好，本以为两天可以轻松搞定，可是哪知道等我完工了，师兄说第二章页面的格子是必须手动做出来的！我一开始切图的时候顺手就切了这个，所以当时的第二章都是用图片实现的，虽说看着也挺不错，可是我不得不遵照要求来呀！

就这样第二章才是我困难的开始，我一开始就在想如何实现上下双色的盒子？我用absolute先试了一遍，两个盒子被我硬生生的拼到了一起，可是所有的盒子都必须自适应，我用定位做出来的终究想不出怎么自适应（后来我知道了，这种方法其实也可以实现），后来我就开始想办法用弹性布局，最后我发现用flex-basis可以非常方便完美的实现上下拼接，主要放在同一个盒子内，按照80%-20%的比例分配，双色完美合成了。

第二个然我困惑的就是盒子下面的小图标，我一开始想用一个绝对定位，让它相对于这个大盒子，可是一到不同分辨率的屏幕上，这四个图标就乱跑了。

还有，我一直搞混了rem和vw的使用，之前一直以为rem就可以完美实现自适应-，但其实我误解了，rem是对于不同设备标准下的字体适应，而vw才是根据屏幕变宽变窄而适应。 搞清楚这个后，我才把盒子、字体的单位改过来。

最终我采用了让margin-top 然后以vw做单位，解决了四个图标和大盒子的相对位置关系。

一波三折下，我终于完成了整个任务，总结一下，一个任务里学到的知识点大大小小真的不少！

（1）我对于flex布局和其中的属性更加能掌控了

（2）对于盒子嵌套盒子，再利用定位，vw等属性的连招，更加熟练

（3）雪碧图的定位，又学习到了

（4）对于图上的三角形 叉叉 方块等等图形，CSS我都能实现了

（5）透明色的使用会了

（6）audio添加效果Ok

（7）hover效果添加熟悉了一些

最后，多谢我付师兄的耐心指点！最后提交任务审核的时候非常严格，让我更加能够以高标准鞭策我自己，继续以百分百的干劲儿努力！