今天完成的事情：

1.任务八界面一优化细节。

2.开始做界面二。

明天计划的事情：

1.完成界面二，着手界面三。

遇到的问题：

1.界面一下拉按钮不能显示完全，其余选项显示不出来。原来是导航栏设置了一个高度，取消即可。

2.关于昨日提到的字体问题。

在html里声明

font-size: 62.5%;

作用是把浏览器默认字体变为原大小的62.5%，浏览器默认字体大小为16px，1rem=16px，换算不方便。声明后就变成了16*62.5%=10px。故此时1rem=10px。但谷歌浏览器最小字体是12px，故需要更改最小字体为10px。但改了没什么效果。查找原因后发现需要把浏览器默认语言改为英文。此时换算才能成功。另外浏览器显示的字体有上下边距，通过每段文字的行高设置似乎就能和原设计图一样。

收获：

1.使用了媒体查询，它能对不同的屏幕尺寸设计不同的样式。如：

@media (max-width: 992px) {
    #study .display-arrow {
    display: none;
    }
}

display-arrow是一个箭头。此段意义为，当屏幕尺寸小于992px，则箭头消失。媒体查询在界面一用到了很多地方，如

@media (max-width: 576px) {
    header {
    display: none;
    }
}

当屏幕尺寸小于576px时，header消失。

顶部消失。

2.界面二也有很多地方可以用bootstrap布局，如面包屑导航栏，普通导航栏，鼠标滑过时会显示出绿色的背景色。

不过目前卡片栏对栅格的使用出了点问题。明日解决。