今天完成的事情：
任务10部分内容

明天计划的事情：
任务10

遇到的问题：

1，：：after
在上个任务中接触到了：：after的用法，是为了解决之前日报提出的

在师兄的指导下，通过设置：：after伪元素配合hover

思路就是在给footer1-31设置一个：：after 通过定位的方式将这个下划线的样式写出来，然后配合：hover来覆盖after父元素的样式。由于after元素不会在html文件里面存在，所以结构上没有别的毛病。

所以到了任务10的难点之一
一开始尝试多种布局发现都无法实现如图中的hover效果，干脆一狠心不从布局（html）上下手了，从css文件上想办法，即通过给每个html元素都设置一个hover之后的after效果，通过定位使之重合，用hover来控制元素的visiblity：hidden与visiblity：visible来实现样式的切换（覆盖或被覆盖）。这样一来效果是实现了，但是代码感觉非常复杂。希望以后遇到这种问题能再多考虑一下布局的问题。


2，：hover联动
前面的任务使用hover伪元素大多是直接给该元素设置：hover，关系直观。由于上面提到的第一个问题导致css代码比较复杂，所以使用hover的时候脑壳有点痛

现在用多了比较熟练，在之前做任务的时候实现一个元素hover效果是另一个元素，当初还不是很理解，所以上手经常出错误。但是现在在多处使用after伪元素之后我发现联动的hover效果与after效果有相似的地方。
after的内容是固定跟随在他的父级html标签后面的，无论是用绝对定位还是浮动的什么定位方式，after跟他的父元素必然是联系在一起的，当父元素的宽度高度发生变化，after也必然会随之而变。
同样的，一个元素的hover效果是另一个元素的时候，这两个元素的联系一定很紧密（一般而言位置是很近的），但又不是像某个子元素跟他的before after元素是强制捆绑的关系。明白了这一点，在实现两个元素的hover联动就容易找到目标了，理解了这种关系之后发现用hover很简单，位置大小颜色这些属性什么的修改起来也是得心应手。


3.不引用bootstrap写出汉堡菜单
任务89的header导航栏部分是引用的bootstrao库，写任务10的时候没有引用bootstrap库，就想着怎样通过html css代码来写出自己需要的导航栏。其本质也是围绕着媒体查询来做文章，画一个折叠框先隐藏起来，媒体查询之后再显示，用hover链接到之前的各导航按钮，改一改导航按钮的样式，就能实现响应式导航栏的效果。
我琢磨着大体思路应该没错，但是因为i时间关系这部分还没做完0.0  研究一下细节问题 这个就能解决了
还知道了visibility：hidden 与display：none的去别。

收获：

掌握了：：before ：：after的用法，明白其意义以及其局限性。
实现复杂的hover效果该怎么去布局
开始手写样式库：）