今天完成：

拆分底部组件，跟头部一样的拆分方法，引用也是一样。

完成任务13.提交任务。

明天计划：

开始任务14，看媒体查询了，具体怎么使用还没有弄清楚，写完日报就去学习  - -， 

看了下任务要求，增加了js任务的预习，看来要增加难度了。

遇到困难：暂无

收获：

1、媒体查询嵌套，摘点在w3cplus的文章

‍‍使用Sass，你可以在原型声明中嵌套媒体查询，在样式表编译之后，这些样式会根据写的查询判断条件，出现在各自查询范围内的声明中。这真是太好了。

‍‍嵌套媒体查询避免了每次你想要调节多个判断媒体的断点（断点的意思是在浏览器宽度变化时，布局跟着发生变化的临界点）时都重写选择器（如例子中的section.main）的问题。在原型声明中嵌入媒体查询声明为我们带来了极大的便利。我发现这样做更容易理解，一个元素在可视范围（viewports）发生变化时通过媒体查询上下文附近的样式来显示，而不是在样式表最后或单独的一个文档中写这个可视范围（viewport）的样式。（我理解的意思是在一个选择器中就可以看到不同浏览器宽度下的布局，而不是在样式表最后或其他导入到这个样式表中的文档中，按照可视范围（viewport）不同，把布局样式再写一遍，写在一个选择器中对于后期维护修改时是方便的。）‍‍

2、使用变量定义断点。

‍‍‍‍Sass配合媒体查询为响应式设计带来了很大的便利，但仍然还有一些重复的地方，不是很完美。在每次声明时，我们都需要指定的断点（前面例子中举例的800px和500px）。在设计的过程中经常发生这种情况，因为基于每个项目的设计不同，我需要在每个项目中修改这些断点来适应当前设计对应不同设备宽度的布局。换句话说，你每次指定嵌套的媒体查询断点是变化的。我想要一次定义所有的断点并且可以在一个地方编辑它们。Sass变量可以完成这个需求。‍‍

让我们创建3个断点变量，稍后会在媒体查询中使用它们。我会把命名定的灵活一些，不要让变量名表示一个指定的设备或是固定的值。

‍‍用Sass变量定义断点，我们就可以在整个文档中无论什么时候 使用嵌套媒体查询，都可以参考这些变量。例如：

‍‍编译之后: