今日完成的内容：

1、因为之前任务六并未用bootstrap框架写，于是用bootstrap框架重构任务六。

2、任务六总结。

2、完成任务七首页面。

明天计划的事情：

1、完成任务七其余页面。

遇到的问题：

1、用bootstrap重构任务六页面时，想用row做主体的布局，每一个row表达不同的属性，但要怎样给每一个row下达不同的含义呢？

2、栅格系统col一行12列的问题。

原来col-md-1 代表十二分之一列宽，col-md-5 代表十二分之五列宽。开始以为col-md-1仅仅代表一个序号···开始思路就错了，难怪布局弄半天都没调好。理解了栅格系统设计的出发点，其实蛮好用的，能大大提高工作效率，布局显得更规范统一。

另外

container 中左右各有15px的 padding

row左右各有 －15px 的 margin

colunmn 本身又有 15px 的 padding

他们之间相互嵌套弥补，运用起来还不太明白，碰到边距太宽我一般之间加padding：0  消除他们的默认样式。

3、任务七首页三角标签定位的问题。

这个问题花了蛮久的时间琢磨，开始想通过行列之间的嵌套来达到三角标签固定在白底框右侧中间的位置。后来被反复嵌套搞晕了。

吃晚饭时在想还有没有别的办法能实现，原来我忘了absolute绝对定位————绝对定位的元素的位置相对于最近的已定位父元素。

用绝对定位确定位置，将父元素中的高度全部设置为rem，然后给三角标签一个上下方向的rem，就能居中定位了。

现在回头想想是挺简单的，但为什么在思考的时候会卡那么久呢````````

收获：

1、栅格系统。

还得反复唠叨唠叨bootstrap的那些事，对格栅系统又了解一些了，确实不掉坑里发现不了问题，以为看懂了格栅系统，其实才摸到点皮毛。

2、栅格系统相关的布局介绍：

从堆叠到水平排列。

使用单一的一组 .col-md-* 栅格类，就可以创建一个基本的栅格系统，在手机和平板设备上一开始是堆叠在一起的（超小屏幕到小屏幕这一范围），在桌面（中等）屏幕设备上变为水平排列。所有“列（column）必须放在 ” .row 内。

流式布局容器

将最外面的布局元素 .container 修改为 .container-fluid，就可以将固定宽度的栅格布局转换为 100% 宽度的布局。

响应式列重置

即便有上面给出的四组栅格class，你也不免会碰到一些问题，例如，在某些阈值时，某些列可能会出现比别的列高的情况。为了克服这一问题，建议联合使用 .clearfix 和 响应式工具类。

移动设备和桌面屏幕

是否不希望在小屏幕设备上所有列都堆叠在一起？那就使用针对超小屏幕和中等屏幕设备所定义的类吧，即 .col-xs-* 和 .col-md-*。

多余的列（column）将另起一行排列

如果在一个 .row 内包含的列（column）大于12个，包含多余列（column）的元素将作为一个整体单元被另起一行排列。

列偏移

使用 .col-md-offset-* 类可以将列向右侧偏移。这些类实际是通过使用 * 选择器为当前元素增加了左侧的边距（margin）。例如，.col-md-offset-4 类将 .col-md-4 元素向右侧偏移了4个列（column）的宽度。

嵌套列

为了使用内置的栅格系统将内容再次嵌套，可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。被嵌套的行（row）所包含的列（column）的个数不能超过12（其实，没有要求你必须占满12列）。

列排序

通过使用 .col-md-push-* 和 .col-md-pull-* 类就可以很容易的改变列（column）的顺序。

变量

通过变量来定义列数、槽（gutter）宽、媒体查询阈值（用于确定合适让列浮动）。

mixin

mixin 用来和栅格变量一同使用，为每个列（column）生成语义化的 CSS 代码。

进度：task7

任务开始时间：2018.5.14

预计结束时间：2018.5.15

是否有延期风险：无

禅道：http://task.jnshu.com/zentao/project-task-684.html