今天完成的事情：

1.任务八界面一基本完成。

导航栏有悬停效果。

明天计划的事情：

1.推进任务八界面二。

遇到的问题：

1.如何学习栏，最初的圆一直会被挤压。此处也用了bootstrap栅格。圆是用css写的，圆和文字在一个盒子里，使用了display：flex布局。但文字栏并没有完整的占据空白部分，于是查到一个代码flex：1，让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。实现所有文字栏长度相等。于是布局完成

2.导航栏在浏览器宽度减少时，下拉按钮会变得被隐藏，此处应该是使用媒体查询来解决，专门写一个分辨率来解决。

3.轮播图不随浏览器宽度而缩放。

后面发现是没有对图片宽度定义，定义为100%后，就会随浏览器宽度自适应了。

4.还有一个问题，就是在html和body里都设置了font-size=62.5%之后，10rem展现的效果是120px。

关于切图时测量文字的问题，如图，测量出的结果是文字本身的高度。

如果按照这个高度写入css，则浏览器展现的效果会比这个大，

原因是文字浏览器展现的文字多了上下边距，并不会按照测多少就展示多少。

如果给文字设置line-height：1，则展示效果如下：

但同时文字也失去了上下间隔，和UI图上显示也不符合。怎样找到一种方法来解决？我暂时没有搜到。

收获：

1.hover的使用。hover能实现鼠标的悬停效果。

nav-4 .word-nav-1:hover {
    border-bottom: 5px solid #fff;
}

2.了解了flex：1的使用，它能让所有弹性盒模型对象的子元素都有相同的长度，忽略它们内部的内容。

3.国庆快乐~