今天完成的：

        之前对em、rem等单位解决响应式的方法不太理解，今天看了些文章了解了下。

        完成了第一个页面的重构，第二、三个页面的结构。

明天计划的：

        完成第二第三个页面的css样式，用scss优化代码。

        了解样式表组织规范，拆分样式表。

        将任务十三完成，然后提交。

        还有时间的话，了解一下 js 事件。

遇到的问题：

        因为这几个页面都是之前写过的，没遇到什么问题。

今日收获：

  >>> 重新理解了一下各种布局的特点，之前也就是一直在用，也不知道用的具体是个啥，能写出来东西就行。今天在看em、rem这些的时候重新了解了一下。

    静态布局：传统的Web设计，固定宽高的布局，移动端、PC端需要分开布局。关于移动端采用静态布局有两种方式：

        1.viewport meta标签中设width=320px，通过用JS动态修改标签的initial-scale使得页面进行缩放到占满整个屏幕。

        2.viewport meta标签上设置content“width=640，user-scalable=no”，由于640px超出了手机宽度，浏览器自动缩小至满屏。

    流式布局：通常是用百分比设定宽度，固定高度，这样可以在屏幕变宽或者变窄时保证整体布局不变。代表作有栅栏系统。（不过目前还没怎么用过栅格系统，对其特性不太了解。不过倒是一直在使用百分比布局。）

    自适应布局：为不同分辨率屏幕创建多个静态布局，每个静态布局对应多个屏幕分辨率范围。然后通过@media媒体查询切换不同样式。（这个布局不太理解，不过媒体查询还是知道的。总是跟响应式布局分不清。）

    响应式布局：简单来讲就是流式布局+弹性布局+媒体查询。创建多个流式布局对应不同屏幕分辨率范围。（这个应该就是任务中经常用到的那个布局了。看别的博文上说：响应式的模板在不同的设备上看上去是不一样的，会随着设备的改变而改变展示样式，而自适应不会。额，这个说的是做官网页面的时候，缩小屏幕改变布局么？）

    弹性布局：（rem/em布局）

         这类布局的特点：包裹文字的各元素的尺寸采用em/rem做单位，而页面的主要划分区域的尺寸仍使用百分数或px做单位。

        关于使用rem（及em）来进行响应式设计，之前一直不太理解，不明白怎么能响应式。今天又看了一下，大概明白了些，原理应该就是使用了rem布局之后，在不同的屏幕分辨率下，在html里修改rem的大小就可以改变整体的布局，会方便不少。不过具体特点，还是有机会了亲自试用下试试来得好。

（参考链接：https://www.cnblogs.com/yanayana/p/7066948.html）

  >>> 然后，还看了一篇博文，简单的列举了一些sass中常用的mixin，虽然目前可能并用不到，但对现在的我还是能打开一点思路，帮助理解一下sass的使用，不仅仅是用来优化border、padding、background这些的。。。。

（链接在这：https://blog.csdn.net/u013909970/article/details/52231026）

/* 文件夹还没整理，明天抽空会整理一下。效果就不贴了，样子跟之前任务没啥区别，scss也还没写好。。 */