今天完成的事情：

修复任务七bug 完成任务八导航栏 和轮播 

明天计划的事情：继续任务八

遇到的问题

#链接下划线

解决方法

     a:link { text-decoration: none;}
　　 a:active { text-decoration:blink}
　　 a:hover { text-decoration:underline;}
　　 a:visited { text-decoration: none;}

#投票页出现横向滚动条

调试发现 误用相对定位，导致宽度超出2rem

解决办法： 去除相对定位，设置 padding-left: 2rem;

#hover闪烁

解决方法： 设置空元素，预留出隐藏图片的高度

# 图标添加右边距对齐后，页面出现横向滚动条，

解决方法：调试发现由于bootstrap中 nav-link默认padding-right为0.5rem ，导致 “关于向左偏移”，重置为0即可

收获

#掌握了bootstrap 轮播组件

轮播效果是一个幻灯片效果，使用CSS 3D变形转换和一些JAvaScript构建一内容循环播放，它适用于一系列图像、文本或自定义标记，还包括对上一个/下一个图的浏览控制和指令支持。

在支持 Page Visibility API（页面可见性）的浏览器中，当网页对用户不可见时（如浏览器选项卡处于非活动状态、窗口最小化时），轮播效果控件会停止运动，从而节省性能。

轮播不带幻灯片尺寸标准化处理，因此你可能需要使用其它通用样式可自定义样式来调整其大小使之适当匹配。虽然轮播组件支持上一个/下一个控制和指令，但它们不是必备元素，可根据你的需要添加或自定义（展现不同的效果）。

通过 .carousel 命名样式引入轮播组件，同时为此控件设置唯的ID-尤其是当你在同一页面使用多个轮播效果时这是必须的。

带字幕、指示器、控制器的轮播

<!--轮播-->

<div id="carouselExampleIndicators" class="carousel slide" data-ride="carousel">
    <ol class="carousel-indicators">
        <li data-target="#carouselExampleIndicators" data-slide-to="0" class="active"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="1"></li>
        <li data-target="#carouselExampleIndicators" data-slide-to="2"></li>
    </ol>
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img class="d-block w-100" src="img/1.jpeg" alt="First slide">
            <div class="carousel-caption d-none d-md-block">
                <h3>我是字幕O(∩_∩)O哈哈~</h3>
                <p>我也是字幕\(^o^)/~</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/3.jpg" alt="Second slide">
            <div class="carousel-caption d-none d-md-block">
                <h3>我是字幕O(∩_∩)O哈哈~</h3>
                <p>我也是字幕\(^o^)/~</p>
            </div>
        </div>
        <div class="carousel-item">
            <img class="d-block w-100" src="img/2.png" alt="Third slide">
            <div class="carousel-caption d-none d-md-block">
                <h3>我是字幕O(∩_∩)O哈哈~</h3>
                <p>我也是字幕\(^o^)/~</p>
            </div>
        </div>
    </div>
    <a class="carousel-control-prev" href="#carouselExampleIndicators" role="button" data-slide="prev">
        <span class="carousel-control-prev-icon" aria-hidden="true"></span>
        <span class="sr-only">Previous</span>
    </a>
    <a class="carousel-control-next" href="#carouselExampleIndicators" role="button" data-slide="next">
        <span class="carousel-control-next-icon" aria-hidden="true"></span>
        <span class="sr-only">Next</span>
    </a>
</div>

#导航栏组件

导航栏需要使用.navbar 来定义，并使用 .navbar-expand{-sm|-md|-lg|-xl} 用于响应式布局以及使用配色方案Class 。 导航栏默认内容是流式的，使用 containers容喇来限制它们的水平宽度。

使用提供的 间隙间距 和 flex 布局 classes 来定义导航栏中元素的间距和对齐。 Navbars导航栏默认支持响应式，在修改上也很容易，你可以使用轻松的来定义它们-这取决于我们提供的 JavaScript 插件。

使用<nav>导航通用元素来确保可访问性（易用性），或者如果使用更通用的元素，例如<div>添加一个role="navigation"，可以为使用者的辅助浏览提供明确标识。

Navbar导航栏内置支持少量子组件。根据需要从以下选择：:

.navbar-brand 为您的公司，产品或项目名称。

.navbar-nav 提供完整的高和轻便的导航（包括对下拉菜单的支持）。

.navbar-toggler 用於我們的折疊插件和其他 navigation toggling 行為。

.form-inline 用于任何表单控件和操作。

.navbar-text 用于添加垂直居中的文本字符串。

.collapse.navbar-collapse用于通过父断点进行分组和隐藏导航列内容。

深度思考

1.如何实现轮播图？ 见收获