今天完成的事情：任务6布局进度还差主体内容。

明天计划的事情：完成任务6.

遇到的问题：

任务5的布局顶部的文字居中，使用的弹性盒子居中属性，但是因为有一个退出键，导致无法很好的居中，使用的解决方法是使用绝对定位把后退图标设置到了左边，还查到的一种是在右边添加一个空元素，大小等同于左边，这样就可以很好的居中了。

使用position：relative定位后，字体重叠了position：flixed的字体，需使用z-index属性分别设定数值，数值高的不会被数值低的重叠到。

z-index 值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而z-index 值为负数的对象在其之下。

设定下划线左右的空隙时，设定的margin-left和margin-right过大，撑开了宽度超过100%，导致出现左右滚动条，调整了下数值就修复了。

任务6的布局顶部，文字垂直居中，text-aline:center是水平居中，开始使用的padding属性挤开空间不行，后改成行高line-height属性调整数值解决。

布局按钮组的时候，因为一个按钮是全圆角一个是只有一边是圆角开始使用的各自按钮圆角属性，但是中间产生了空隙，后面使用一个盒子包裹按钮形成按钮组，盒子背景颜色和圆角等同于左按钮达到效果。

布局右边的地图按钮的时候，因为按钮属性自带轮廓，padding和border属性，需要重置按钮样式，搜索到了outline：none进行重置样式。

收获：

hover属性：在鼠标移到链接上时添加的特殊样式

弹性盒子分配空间使用justify-content：space-evenly进行平均分布水平空间，进行底部布局的时候挺好用的。

background-position：使用百分比来设置属性值，是以自身容器的长宽 减去 图片的长宽 乘以 百分比，若为50% 50%相当于图片居中。

雪碧图制作与应用。

下拉栏的制作：

这是首先考虑到的实现方法，给 .drop-down-content 添加display:none，当悬浮在.drop-down上时 .drop-down-content的display变成block，缺点是不能添加过渡属性，慢慢弹出下来菜单。当.drop-down-content显示时会把后面的盒子往下挤，因为.drop-down-content 显示时是存在于文档流中的，给.drop-down设置position:relative，.drop-down-content设置position:absolute，使下拉菜单脱离了文档流来解决

我的个人理解是：首先设定css给列表display：none属性隐藏该框，再给他设定一个hover设定为display：block，这样鼠标放上去他的none元素就会变成block元素从而显示出来，但是因为有文档流挤开其他项目，所以要设定一个position：absolute来脱离文档流，而父级设置relative，使文档不会造成遮掩效果。