今天完成的事情： 今天自己把代码码了出来，写出了响应式导航栏。想法是，先做一个导航条，然后设置媒体查询。在小屏幕时。出现一个图片按钮，点击图片按钮出现下拉菜单。

于是先写出html代码

由于之前都是使用的bootstrap 引入的响应式导航栏，一时不知道怎么入手，师兄告诉我可以用 input 跟label，

把input的默认样式去掉，用label代替，laber插入一个图片

设置媒体查询

实现效果的原理就是用laber插入图片代替input单选框，在点击图片时，由于laber与input用for 相连接，所以点击图片效果会默认点击input单选框。点击效果是 checked~ .nav-list 也就是下面的ul li 变为display：block；

于是显现出下拉菜单的效果。

其次做了个footer的组件，由于footer需要使用栅格系统，于是查找百度，在百度的帮助下自己写了一个栅格。

使用伪元素清楚浮动，因为栅格是需要使用浮动来制作的！ 

[class*='col-'] {

float: left;

｝

作用是选择出所有col- 开头的元素，让他们左浮动。

然后就是设置媒体查询，因为官网是四格比较多。于是设置出不同宽度下的样式。

做出了栅格的效果。

然后就是写footer的组件，利用之前的栅格系统。分为三列，左右占50%，中间占50%。

然后对比ui图，做出ui图的大屏幕效果，设置媒体查询，做出小屏幕效果。代码就不多贴了：

然后根据之前布局的内容，引用过来，因为觉得之前的问题不大，加上自己也想快点进入js的学习，就没有多修改之前的布局，只是把bootstrap的栅格系统，换成了自己做的栅格。

现在在做轮播图。

明天计划的事情： 明天计划完成任务十四、十五剩下的界面加上第一个界面的轮播图完成。
遇到的问题：响应式导航栏刚开始想不通，师兄提点之后想通了，然后就是轮播图，不懂原理，只能百度，慢慢跟着写一个轮播图。
收获：自己写出了栅格系统，自己写了响应式导航栏。