天完成的事情：今天做完了任务8的三个页面，已经大体完成。但是遇到一个小问题：就是下图，左右两边内容高度不一样，却由于外面的盒子用了弹性布局，而导致左右两列等高。造成这个问题的应该是弹性布局的原因，所以把布局改成了左边定宽且浮动，右边自适应的布局。

 任务8做的差不多，看了任务9，是要将页面做成响应式，所以今天一直在看bootstrap的栅格系统：
明天计划的事情：明天继续做任务8，9
遇到的问题：感觉对于整个网页的布局还是不太熟悉 ，而且由于任务8没有用bootstrap布局，所以今天一天都很崩溃，引了bootstrap这个页面的布局都乱掉了
收获：栅格系统：Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

• 行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100% 宽度）中，以便为其赋予合适的排列（aligment）和内补（padding）。
• 通过“行（row）”在水平方向创建一组“列（column）”。
• 你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。
• 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。
• 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。
• 
• 由于之前写任务8的时候，布局没有引入bootstrap,今天一直在重构页面，有些烦躁，进度有点慢；戒急戒躁！