今天完成的事情：

1.修改完了任务8的首页，并做了响应式布局以适应手机端。

使用了flex的flex-shrink：0；来确保左右两侧的元素在缩小时不会被挤压缩小变形。

为了确保右边的箭头始终保持在右侧，给中间的元素使用了bootstrap框架里的flex-grow-1，设置了这个属性的元素会占据剩下的全部空间，右边的元素就会保持在右侧。

在给某一个子元素覆盖原本的背景色时，因为优先级问题，需要被覆盖的背景色无法被覆盖，然后查了下选择器的优先级问题。css有一种可以完全忽略优先级规则的方法，在属性后插入!important的属性可以拥有最高级。

明天计划的事情：

写完任务8的第二和第三个页面。

调试页面至同时适应移动端和pc端。

优化、精简掉多余的代码，修改不符合语义化的地方。

遇到的问题：

1.在给这部分的元素添加：hover 效果时，设置的box-shadow 只能显示上、下、左三遍，右边的阴影效果无法显示，之后用谷歌的开发者工具查看时，发现阴影效果与左右两侧的盒子重叠在一起，右侧的元素显示层级比左边的高，所以右侧的阴影效果被覆盖掉了。给: hover 里面添加了z-index属性，让元素在被鼠标悬停时显示层级高于右侧的元素，右边的阴影就不会被覆盖了。

收获：

1.学会了使用!important给来属性设置最高的优先级。

z-index设置元素的显示层级，数值越大，显示的优先级越高。

2.了解bootstrap4 的 弹性布局：

3.给父元素设置需要创建显示在同一行上的弹性盒子容器可以使用d-inline-flex ，这样就能使弹性盒子变为行内；