任务总结：

1.在此任务中学习了flex布局，并在页面布局中学会了运用。

2.处理更复杂的移动端页面

3.对于之前学到的知识理解的更加深刻，运用起来也更容易上手。

今天完成的事：

今天完成的事：

1.今天主要完成了任务八九的响应式布局，任务八九基本算是做完了。

2.对比官网UI图对成果图进行修改，优化代码。

3.bootstrap进度条：Bootstrap 进度条使用 CSS3 过渡和动画来获得该效果.

创建一个基本的进度条的步骤如下：

1.添加一个带有 class .progress 的 <div>

2.接着，在上面的 <div> 内，添加一个带有 class .progress-bar 的空的 <div>。

3.添加一个带有百分比表示的宽度的 style 属性，例如 style="width: 60%"; 表示进度条在 60% 的位置

实例如下：

    <div class="progress">    

         <div class="progress-bar" role="progressbar" aria-valuenow="60"        aria-valuemin="0" aria-valuemax="100" style="width: 40%;">        

               < span class="sr-only">40% 完成</span>    

         </div>

   </div>

4.Bootstrap 支持有序列表、无序列表和定义列表。

有序列表：有序列表是指以数字或其他有序字符开头的列表。

无序列表：无序列表是指没有特定顺序的列表，是以传统风格的着重号开头的列表。如果您不想显示这些着重号，您可以使用 class .list-unstyled 来移除样                   式。您也可以通过使用 class .list-inline 把所有的列表项放在同一行中。

定义列表：在这种类型的列表中，每个列表项可以包含 <dt> 和 <dd> 元素。<dt> 代表 定义术语，就像字典。接着，<dd> 是 <dt> 的描述。.dl-horizontal 可                  以让 <dl> 内的短语及其描述排在一行。开始是像<dl>的默认样式堆叠在一起，随着导航条逐渐展开而排列在一行。

5.Bootstrap 轮播（Carousel）插件是一种灵活的响应式的向站点添加滑块的方式。除此之外，内容也是足够灵活的，可以是图像、内嵌框架、视频或者其他您想要放置的任何类型的内容。

通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。

属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。

使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。

data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。

明天计划的事：明天计划在检查修改一遍代码，接触任务10

遇到的问题：使用flex布局的时候出现属性覆盖的情况，导致页面结构错误，从新定义了一个媒体查询后，添加flex优先级后解决了这个问题。

收获：基本完成任务8.9