今天完成的事情：

1、完成footer，让footer紧贴底部。

2、布局列表主体部分。

3、给header、footer、main增加按钮。

明天完成的事情：

1、完成列表头的下拉框，基本完成任务。

2、学习bootstrap。

3、使用bootstrap进行任务布局。

遇到的问题：

1、header、main、footer三个位置都设置了背景图，但是main随着滚动框滚动main里面雪碧图制成的背景图会浮动到header上，怎么回事？

请教了师兄。原来这个就是层级问题，三个部分的背景图处在同一个层级，写在后面的会覆盖前面的。

这个时候就要用到z-xindex，它可以定义显示元素的上下层的叠加顺序，数字越大级别越高，默认为零，支持负数。

别的没什么问题了。

收获：

1、z-index

①z-index是针对网页显示中的一个特殊属性。因为显示器是显示的图案是一个二维平面，拥有x轴和y轴来表示位置属性。为了表示三维立体的概念如显示元素的上下层的叠加顺序引入了z-index属性来表示z轴的区别。表示一个元素在叠加顺序上的上下立体关系。

②z-index值较大的元素将叠加在z-index值较小的元素之上。对于未指定此属性的定位对象，z-index 值为正数的对象会在其之上，而 z-index 值为负数的对象在其之下。

2、button

①<button> 标签定义一个按钮。

②在 <button> 元素内部，您可以放置内容，比如文本或图像。这是该元素与使用 <input> 元素创建的按钮之间的不同之处。

③请始终为 <button> 元素规定 type 属性。不同的浏览器对 <button> 元素的 type 属性使用不同的默认值。如果在 HTML 表单中使用 <button> 元素，不同的浏览器可能会提交不同的按钮值。请使用 <input> 在 HTML 表单中创建按钮。

3、bootstrap

①基本结构：Bootstrap 提供了一个带有网格系统、链接样式、背景的基本结构。这将在 Bootstrap 基本结构 部分详细讲解。

②CSS：Bootstrap 自带以下特性：全局的 CSS 设置、定义基本的 HTML 元素样式、可扩展的 class，以及一个先进的网格系统。这将在 Bootstrap CSS 部分详细讲解。

③组件：Bootstrap 包含了十几个可重用的组件，用于创建图像、下拉菜单、导航、警告框、弹出框等等。这将在 布局组件部分详细讲解。

④JavaScript 插件：Bootstrap 包含了十几个自定义的 jQuery 插件。您可以直接包含所有的插件，也可以逐个包含这些插件。这将在 Bootstrap 插件 部分详细讲解。

⑤定制：您可以定制 Bootstrap 的组件、LESS 变量和 jQuery 插件来得到您自己的版本。

进度：task6

任务开始时间：2018.5.9

预计结束时间：2018.5.12

是否有延期风险：无

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