今天完成的事情：

1.任务八处理细节和完善布局

明天计划的事情：

1.把界面一的链接加上，细节处理完后入手第二个界面。

遇到的问题：

1.优秀学员展示栏，浏览器宽度减少时，并没有按照栅格的设置来变成一行2个，反而会被压缩。找了很久不知道原因。后面请教师兄，师兄建议我把bootstrap的链接改为bootstrap4.0的，因为之前用的都是bootstrap3.0。于是把链接都改掉之后，确实没有被压缩了。不过4.0和3.0有所区别。之前3.0布局的轮播图就全乱了。学员展示栏的细节也修改了很久。

2.还是关于细节的修改，顶部导航栏，浏览器宽度缩小后首页等四个按钮会变成一个按钮下拉形式。但此处显示效果并不好。还需要修改样式。比较麻烦。

收获：

1.bootstrap3和4有所不同。

bootstrap 4 共有5种栅格类，依次是特小(col-)、小(col-sm-)、中(col-md-)、大(col-lg-)、特大(col-xl-)

偏移列通过 offset- 类来设置，例如：.offset-md-4 是把.col-md-4 往右移了四列格。

bootstrap3使用float的布局方式

bootstrap3 共有4种栅格类，依次是特小(col-xs-)、小(col-sm-)、中(col-md-)、大(col-lg-)。

这里变为特小时一直没有到我想要的占据一行的效果，原来是3.0和4.0有所区别，3.0的特小是col-xs，而4.0则是col-。调整后效果完好。

2.鼠标悬停显示hover，此处是一个比较简单的效果，即鼠标停止后显示出隐藏的阴影部分。

.box-company .icon-company:hover {
    box-shadow: 0 0 0.5em rgba(8, 1, 3, 0.3);
    z-index: 1000;
}                                            /*卡片hover阴影*/

隐藏部分和主体部分要在一个父项里。显示即可成功。

3.布局进度一般，还需要更多的练习。