今天完成的事情：

网页效果和css代码如下：

之前我给宽度设的是百分比，所以在自适应的时候button也会随着浏览器的宽度来变化，就把图片挤歪了，后来我改了px值才算是正常。

footer页脚的宽度用的还是百分比。

:hover 选择器用于选择鼠标指针浮动在上面的元素。:hover 选择器可用于所有元素，不只是链接。

注释：在 CSS 定义中，:hover 必须位于 :link 和 :visited 之后（如果存在的话），这样样式才能生效。

html代码如下：

这里button的类名是用的同一个，这里用click类名设置css样式就能作用于两个button。也可以简化代码的书写，代码如图：

还是一样给button设置样式，因为要做成两个button按钮交叠一起的的效果，这里我用了margin-left的负数值，在网页上看的效果如下：

右边的button可以覆盖住左边这个。

3、完成了任务6的提交审核，然后有几处小问题被打回重新编写。

明天的计划：

1、查看任务七的资料和完成ps的切图。

遇到的问题：

（1）header中的button按钮要两个点上去互相压住对方，如图：

解决方法只需要给：hover设置z-index。

原因：因为这里我给button设置的是一个class类名，所以是没有发生嵌套关系的。如果定位元素z-index没有发生嵌套（并列的）遵循后来居上的准则：就是第二个覆盖第一个。所以就会如上图的那样。

（2）这里的边距有点大，我的百分比没有设置好，需要调整下width的百分比。

（3）同上图中的边框边角有弧边，因为用的是bootstrap中的下拉组件自带了border-radius的属性，所以我需要用权重给.btu-default设置border-radius覆盖掉组件自带的属性。

（4）如下图，文字和图片没有对齐，文字偏高了，我试了好几种方法还是不行，后来师兄看不过去。提点了我

解决方案：

给“服务日期”用div嵌套，然后给display：inline-block属性，然后通过相对定位给其设置top值就能解决这个问题。

收获：

对于flex布局的初步了解。

官方脑图：

个人脑图：

任务总结：

这个任务六就是在header头部的样式和列表头哪里耗时时间最长。

header头部第一次了解了flex布局，运用了justify-content这个属性，达到了button居中的效果。flex布局是真的好用，特别是在使用过绝对定位后，不需要用设置margin、padding值，也不需要为了居中去调试它的值，只用三个属性就能解决居中的问题。flex弹性盒子是真的好用。

因为要做出点击背景字体变换的效果，就还苦恼了，查资料都看着很复杂，最后才找到原来只需要用hover这个选择器就能解决。这里也有运用到z-index。

列表头用到bootstrap，第一次了解这个当时很懵，列表头的制作就是运用了bootstrap的下拉菜单组件，然后在通过权重去覆盖它本身自带的属性，然后通过自己修改样式来达到自己想要的效果，它的类名是固定不能修改的，我现在是能理解师兄说的不用理解，知道怎么用就行。在这个上面纠结了一天，囧。。。

主体部分和footer页脚的制作在任务五中就做过，只是后面的一些小细节需要修改下，这里用的是绝对定位和的方法，毕竟对于flex运用的不是很熟，因为任务进度比较慢的原因，我还是选择用了绝对定位。后面有时间要多了解下flex。

在做任务遇到问题的时候真的很烦躁，心情很难静下来，但是后面慢慢的就能解决，其实在师兄们眼里都是小问题，提点下就知道原来就这么简单。

任务耗时5天，没有延期。