今天完成的事情：（一定要写非常细致的内容，比如说学会了盒子模型，了解了Margin）

了解Bootstrap的栅格系统

了解UI伪类

 学会直接在HTML5页面播放音频和视频

明天计划的事情：（一定要写非常细致的内容） 

继续任务7

继续了解Bootstrap的栅格系统

遇到的问题：（遇到什么困难，怎么解决的） 

投票页面注意每个玩家的方块上，hover时会怎样出现4个操作选择实现?

UI（User Interface，用户界面）伪类会在 HTML 元素处于某个状态时（比如鼠标 指针位于链接上），为该元素应用 CSS 样式。

UI 伪类会基于特定 HTML 元素的状态应用样式。最常使用 UI 伪类的元素是链接（a 元素），利用 UI 伪类，链接可以在用户鼠标悬停时改变文本颜色，或者去掉文本的 下划线。此外，还可以有其他响应方式，比如悬停时显示一个信息面板，相关内容 在我们讨论交互组件的时候再聊。 1. 链接伪类 针对链接的伪类一共有 4 个，因为链接始终会处于如下 4 种状态之一。 

1. Link。此时，链接就在那儿等着用户点击。

2. Visited。用户此前点击过这个链接。

3. Hover。鼠标指针正悬停在链接上。

4. Active。链接正在被点击（鼠标在元素上按下，还没有释放）。 

以下就是这些状态对应的 4 个伪类选择符（使用了 a 选择符和一些示例声明）： 

a:link {color:black;} 

a:visited {color:gray;} 

a:hover {text-decoration:none;} 

a:active {color:red;}

收获：（通过今天的学习，学到了什么知识）

bootstrap的栅格系统的代码是怎么写的？

Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列。

栅格系统用于通过行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。

 Bootstrap 栅格系统的工作原理：

1. 1. “行（row）”必须包含在 .container （固定宽度）或 .container-fluid （100%   宽度）中，以便为其赋予合适的排列（aligment）和内边距（padding）

2. 2. 通过“行（row）”在水平方向创建一组“列（column）”。你的内容应当放置于“列（column）”内，并且，只有“列（column）”可以作为行（row）”的直接子元素。

3. 3. 类似 .row 和 .col-xs-4 这种预定义的类，可以用来快速创建栅格布局。Bootstrap 源码中定义的      mixin      也可以用来创建语义化的布局。4. 通过为“列（column）”设置 padding 属性，从而创建列与列之间的间隔（gutter）。通过为 .row 元素设置负值 margin 从而抵消掉为 .container 元素设置的 padding，也就间接为“行（row）”所包含的“列（column）”抵消掉了padding。

4. 5. 负值的           margin就是下面的示例为什么是向外突出的原因。在栅格列中的内容排成一行。

5. 6. 栅格系统中的列是通过指定1到12的值来表示其跨越的范围。例如，三个等宽的列可以使用三个 .col-xs-4 来创建。

6. 7. 如果一“行（row）”中包含了的“列（column）”大于 12，多余的“列（column）”所在的元素将被作为一个整体另起一行排列。

• 栅格类适用于与屏幕宽度大于或等于分界点大小的设备 ， 并且针对小屏幕设备覆盖栅格类。           因此，在元素上应用任何 .col-md-*栅格类适用于与屏幕宽度大于或等于分界点大小的设备           ， 并且针对小屏幕设备覆盖栅格类。 因此，在元素上应用任何 .col-lg-*不存在， 也影响大屏幕设备。

From <https://v3.bootcss.com/css/#grid>

 如何实现点击结束游戏?

通过bootstrap的按钮属性，再加上JavaScript的鼠标点击事件 onclick 触发前往不同的页面实现。

代码如下：

  <div>

    <div>

      <div>确定要结束本轮游戏吗？</div>

      <div>

        <button type="button" class="btn mask-button-left" onclick="location.href='task07-1.html'">确定</button>

        <button type="button" class="btn mask-button-right" onclick="location.href='task07-2.html'">取消</button>

      </div>

    </div>

在投票页面添加音频播放功能? 

src 属性表示音频资源的动作

hideen 表示隐藏控制组件

    <audio src="task7.mp3" controls="controls" preload id="music" hidden></audio>

      <button onclick="music();">

      <img src="images/play-circle.png">

     </button>

  <script>

    function music(){

      var audio = document.getElementById('music');

      if(audio.paused){

        audio.play();//audio.play();// 播放

      }

      else{

        audio.pause();// 暂停

      }

    }

  </script>