今天完成的事情：学习了bootstrap的了轮播框组件，改了前期任务的一些bug
明天计划的事情：继续进行任务八
遇到的问题： 前期改bug花费较长时间，在网页加入轮播组件之后变得很奇怪，花费较长时间调整也没调整好，明天继续任务八
收获：学会了调整bootstrap按钮组件下拉框的样式调整，原本是这样

在加入代码

li{

    text-align:center;

    font-size: 12px;

    color: #5fc0cd;

}

.dropdown .dropdown-menu a:hover{

    background-color: #e2eaec;

}

后效果图

下拉内容居中并且鼠标移上去可以有背景颜色

学会了设置bootstrap的轮播组件，只要设置一个class=“carousel”就可以创建一个轮播框

例如代码

<div id="demo" class="carousel slide" data-ride="carousel">

  <!-- 指示符 -->

  <!-- 轮播图片 -->

  <div class="carousel-inner">

    <div class="carousel-item active">

      <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">

      <div class="carousel-caption">

        <h3>第一张图片描述标题</h3>

        <p>描述文字!</p>

      </div>

    </div>

    <div class="carousel-item">

      <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">

      <div class="carousel-caption">

        <h3>第二张图片描述标题</h3>

        <p>描述文字!</p>

      </div>

    </div>

    <div class="carousel-item">

      <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">

      <div class="carousel-caption">

        <h3>第三张图片描述标题</h3>

        <p>描述文字!</p>

      </div>

    </div>

  </div>

  <!-- 左右切换按钮 -->

  <a class="carousel-control-prev" href="#demo" data-slide="prev">

    <span class="carousel-control-prev-icon"></span>

  </a>

  <a class="carousel-control-next" href="#demo" data-slide="next">

    <span class="carousel-control-next-icon"></span>

  </a>

</div>

就可以设置一个简单的的轮播框

效果图

但是一用到写的任务网页上比例就会变得很奇怪，明天继续解决该问题然后做后续的页面