今天完成的事情：

1.修复了第二个图的几个小bug。

2.第一个图写了一小半。

明天计划的事情：

1.写完第一个页面。

遇到的问题：

1.菜单栏合并的时候并不是滑动回去的。想了一些办法都失败了，暂时没有解决方案。

2.

想让footer折叠起来的时候有个下划线，更美观一些。一开始想到的方法是给每个部分都加上border-bottom。但是造成如上图的重叠效果，很不好看。后来觉得只能通过响应式来解决了，才学习了一下媒体查询。

画一条线出来，让他只在屏幕变最窄时出现。有点像css模拟下拉菜单。

收获：

1.学习了响应式。响应式和自适应虽然一定程度上都是随着屏幕尺寸的变化来改变样式的大小，但是自适应更像是一种被动的行为，因为窗口变小之后才做出改变。而响应式是一种积极的行为，主动查询设备的宽度大小来选择css样式。

语法为@media screen and (max-width: 300px) 意思是响应屏幕尺寸小于300px的设备。

2.自己画菜单栏的样式的时候。menu圆角的部位留出来了白色。原因是只设置了bgc为绿色。应该要在父元素设置bgc为绿色就可以了。子元素的背景颜色就不用了设置了。最后自己画出来的颜色很丑陋。。

3.

隐藏的导航栏怎么样才能放到下一行呢。

首先这个按钮所在的位置是col-md-9. 所以就算设置隐藏下拉菜单col-12 。也只能占满屏幕宽度的四分之三。

所以不能要让下拉菜单是按钮下面的子元素。要注意移出来，成为container的第三个部分。并且设置

col-sm-12，使出现的下拉菜单铺满整行。

最后记得用媒体查询设置隐藏菜单display：none。不然页面会崩。

4.

指示符的位置太靠图片中心点了。原因是

bootstrap中默认 ul有1rem的margin-bottom。而且也无法更改ul的css。只能再添加一个类（图中的uldown）

设置类margin-bottom：0；让指示符回到正常的位置。