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

        今天的心态真的炸啊，划水了一天，下午在写任务七总结和更新wiki，感觉回到了做任务6的时候，引用bootstrap的组件，然后自己再设置样式覆盖自身的样式，没头绪，有点点烦躁，虽然师兄们说引用bootstrap很简单，只需要它的组件修改css样式就行了，但是感觉bootstrap中有的属性是多余的，但是自己也不知道怎么去删掉，怕删掉会影响到导航栏组件再网页上的效果。导航栏也可以自己写，但是自己更没头绪都静不下心看自己查的资料，有点不想面对，但是想想不想面对也要面对的，就看师兄的任务效果，后面发现一点小细节。

       之前在找bootstrap中的导航栏组件的时候找成了bootstrap4的组件了，所以出来的效果就看上去不对，后面重新找了搜索总算是找到了，但是在网页上的效果如下图：

有很多样式效果是不需要的，因为有的是固定类名不能变更，我不确定能不能自己改类名，看了师兄的任务后发现用<li>无序列表元素里的内容是可以随自己任意修改的，组件的主要部分如下：

这些是主要部分不能变更的，在320px分辨率下会隐藏菜单栏变成汉堡菜单，下面就用<ul>和<li>标签来写自己想要的内容。

后面自己写出来在网页上的效果如下：

发现不对，怎么会是这样呢，后来发现是我把导航栏和技能树的logo放在一个div里，然后logo img大小撑大了div的content。把img删掉就行了。

如图：

看上去就正常了，接下来就需要设置我想要的样式效果。

其实在实践之前觉得好难一直不想弄，但是你要细细研究下发现就一个小时的事情。

明天计划的事情：（一定要写非常细致的内容）

继续接下来的任务 。

感觉这个任务需要用到媒体查询还有一些响应式自适应的效果，感觉自己有点吃力难以理解，可能又是一个漫长的时间了，所以很烦躁。
遇到的问题：（遇到什么困难，怎么解决的） 

收获：（通过今天的学习，学到了什么知识）

学习了bootstrap导航栏菜单组件的引用。

任务名称：css任务7

成果链接：https://guilinxi.github.io/task7/task7/task7-1/task7-1.html

任务耗时：11.29~12.7   耗时共计7天

官方脑图：

个人脑图：

任务总结：

任务七我以为做起来不难，毕竟是前面所学的知识点，第一个页面和第三个页面其实都很简单，写起来比较快，最后提交任务给师兄审核的时候都是些小细节没有注意修改下样式就可以了。

重点是在第二个页面上挣扎太久，耗费的时间最长，大概有3天的时间是在第二个页面上的，header头部写起来并不难，当时对于flex弹性盒子并不是很熟悉，不能熟练的运用，所以写头部的时候主要是以position位置定位来写的，只是运用了justify-content：center水平居中的属性。所以在写主体main部分的时候，因为要做到自适应的效果，就涉及到新的知识点Viewport的vh和vw单位，给div设置width和height用这两个单位是可以在拉伸页面的时候div中的content可以自适应屏幕的大小，没写之前以为很难写，后面发现其实挺简单的。

我遇到的问题基本上是在主体中怎么运用div的嵌套，还有怎样在自适应中做出和效果图上一样的效果。

其中比较重点的几个问题：

因为主体部分需要使用hover来达到鼠标触及的效果，页面二是后面要修改自适应的效果，所以当时只是为了要做出与效果图一样就运用了很多属性，在改的时候就遇到了属性之间的冲突，改的我真的是要崩溃。我给每一行的最大的div设置了margin值撑开了之间的边距，所以在使用display：none隐藏效果的时候，原本被hover图片效果撑开的下面边距在隐藏的时候又还原了，就导致触及上下跳动很奇怪，如图：

在这里学到了另一个方法，用opacity透明值一样可以做成hover效果，不需要用到none隐藏，直接给需要触及效果的div设置一个opaticy:0，直接让图片透明化，再设置hover效果opacity：1就可以了，这里的顺序不能弄反了。跟使用z-index可以一样理解。这样就不会因为display：none的隐藏出现缩小边距的问题。

给div设置宽高的vh和vw值后，是可以自适应，但是在div里底部的1号就被挤上去了，如图：

下面内容挤上去了，主要原因只有一个：因为这里我是嵌套了3个div，我给最大的div里设置了background背景，所以再调试的过程中拉伸移动端页面就会露出背景颜色，不管怎么调margin值都没有用的，因为给div设的背景色也是一个属性，给1号标签里设的背景色也是单独的属性，所以会互相影响。后面我还改成给水民的div设背景色就好了，之前我以为是背景色设反的问题，但是自适应效果还是会被挤上去，所以问题就不是背景设反的问题。后来发现主要问题是div嵌套设样式设反了。给顺序调换下就正常了。

给这两个div的css样式顺序设反了，所以按照自己写的顺序来写样式，避免在div嵌套中过多的时候自己把自己弄晕写错。

就是这么个小细节我找了几个小时的原因，头疼。。。

其实页面二中对我比较难的点就在这两个问题上。

整个任务下来收获最大的还是对flex的运用，认识了另外两个属性align-items垂直效果和fiex-direction属性，和justify-content属性一起叠加运用。顺便还学了相对定位+transform的居中方法，

任务时间超出了两天。