今天完成的事情：

1、bootstrap自适应导航栏插入

导航对齐方式：.justify-content-center类设置导航居中显示，.justify-content-end 类设置导航右对齐。

2、轮播图插入

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

              <!-- 指示符 -->

              <ul>

                     <li data-target="#demo" data-slide-to="0"></li>

                     <li data-target="#demo" data-slide-to="1"></li>

                     <li data-target="#demo" data-slide-to="2"></li>

              </ul>

              <!-- 轮播图片 -->

              <div>

                     <div class="carousel-item active">

                            <img src="./images/1.png">

                     </div>

                     <div>

                            <img src="./images/1.png">

                     </div>

                     <div>

                            <img src="./images/1.png">

                     </div>

              </div>

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

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

                     <span></span>

              </a>

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

                     <span></span>

              </a>

       </div>

3、bootstrap行列设置

多列数值相加需为12的倍数。

圆圈背景阴影用box-shadow属性完成。

Eg:     box-shadow: 1px 1px 3px rgba(8, 1, 3, 0.15);

遇到的问题：

1、导航图的变化尺寸不容易实现，用媒体查询更改背景图片解决尺寸问题。

2、小屏幕文字排版，媒体查询更改不同样式

3、bootstrap样式优先级

Bootstrap大部分元素设有样式，在更改样式过程因优先级问题部分样式更改不成功，可增加嵌套层级，提高样式优先级。

明天计划的事情：

完成任务8页面一，完成底部信息分组排列，美化导航栏自适应样式，尝试添加hover交互效果。

开始任务8页面二。

收获：

能够初步运用bootstrap网格系统排版。