今天完成的事情：

      1. 将任务八要求的网站首页完成。

      2. 学会用box-shadow属性来给div添加阴影。

      3. 学会使用折叠（Collapse）、Carousel插件。

明天计划的事情：

     1. 了解iframe内联框架。

     2. 尽量完成第二个页面的制作。

遇到的问题：

    1. 让div进行左浮动的时候，高度增加了，清除浮动之后高度还是和之前的不一样，只能重新调整格式。问题：左浮动之后div高度为什么会自动增加？

收获：

    1. box-shadow 属性：向框添加一个或多个阴影，语法为：

box-shadow: h-shadow v-shadow blur spread color inset;

   h-shadow: 必需。水平阴影的位置。允许负值。

   v-shadow: 必需。垂直阴影的位置。允许负值。

   blur: 可选。模糊距离。

   spread: 可选。阴影的尺寸。

   color: 可选。阴影的颜色。请参阅 CSS 颜色值。

   inset: 可选。将外部阴影 (outset) 改为内部阴影。

   2. 折叠（Collapse）插件：可以很容易地让页面区域折叠起来。无论用它来创建折叠导航还是内容面板，它都允许很多内容选项。

       用法：

        可以通过以下两种方式使用折叠（Collapse）插件：

• 通过 data 属性：向元素添加 data-toggle="collapse" 和 data-target，自动分配可折叠元素的控制。data-target 属性接受一个 CSS 选择器，并会对其应用折叠效果。请确保向可折叠元素添加 class .collapse。如果您希望它默认情况下是打开的，请添加额外的 class .in。

  为了向可折叠控件添加类似折叠面板的分组管理，请添加 data 属性 data-parent="#selector"。

• 通过 JavaScript：可通过 JavaScript 激活 collapse 方法，如下所示：

  $('.collapse').collapse()

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

       用法：

• 通过 data 属性：使用 data 属性可以很容易控制轮播（Carousel）的位置。
  • 属性 data-slide 接受关键字 prev 或 next，用来改变幻灯片相对于当前位置的位置。
  • 使用 data-slide-to 来向轮播传递一个原始滑动索引，data-slide-to="2" 将把滑块移动到一个特定的索引，索引从 0 开始计数。
  • data-ride="carousel" 属性用于标记轮播在页面加载时就开始动画播放。
• 通过 JavaScript：轮播（Carousel）可通过 JavaScript 手动调用，如下所示：

  $('.carousel').carousel()