今天完成的事情：

1、完成了任务7的首页

其中分页部分，将 .pagination应用于<ul>元素，

HTML：

<ul class="pagination">

  <li><a href="#"></a></li>

  <li><a href="#"></a></li>

  <li><a href="#"></a></li>

  <li><a href="#"></a></li>

</ul>

CSS：

ul.pagination {

    display: inline-block;

    list-style-type: none;

    padding: 0;

    margin: .5rem;

}

    ul.pagination li {

        display: inline-block;

        margin-right:.2em;

        border-radius: 50%;

        padding: .5rem .5rem;

        background-color: #f0f0f0;

    }

    ul.pagination li:hover,ul.pagination li:focus {

        background-color: #69d1e9;

    }

2、完成了任务7的投票页

投票页中的布局使用了弹性盒子，但当固定宽度或百分比设置宽度时，无法保证响应式布局下，每个小方格保持正方形，且每行3个。因此选用vw作为尺寸单位。之前使用的rem是相对于根元素的尺寸，vw是相对于视口宽度。vw更有助于响应式布局的实现。

什么是视口？ 

在桌面端，视口指的是在桌面端，指的是浏览器的可视区域；而在移动端，它涉及3个视口：Layout Viewport（布局视口），Visual Viewport（视觉视口），Ideal Viewport（理想视口）。

视口单位中的“视口”，桌面端指的是浏览器的可视区域；移动端指的就是Viewport中的Layout Viewport。

根据CSS3规范，视口单位主要包括以下4个：

      1.vw：1vw等于视口宽度的1%。

      2.vh：1vh等于视口高度的1%。

      3.vmin：选取vw和vh中最小的那个。

      4.vmax：选取vw和vh中最大的那个。

3、完成了任务7的结束页

结束页没有什么难点，综合之前的任务即可完成。

其中计数部分排列通过添加浮动完成。但后面的词汇受到浮动影响，挤在了人数旁边。

为此要消除浮动

.clear {  

    clear: both;

}/*消除类*/

将消除类应用在需消除的元素中。

4、页面跳转

所有页面完成后，添加超链接，将三个页面互相连接

<a href="link">元素</a>

用<a>元素包裹指定元素，便可以实现点击指定元素跳转到目标地址。

超链接的文字下会默认有下划线

去除下划线：在a中添加 text-decoration：none；

明天计划的事情：

开始任务8
遇到的问题：

1、在首页完成后，滚动条向下滑动时，上次游戏中的图标会上浮，显示在页眉上方。如下图

解决方法：header的css中添加z-index：99；

z-index表示层重叠顺序，和ps的图层同理

2、实现投票页时，出现的问题是，将写有序号的div置于方格内，为了文字的呈现设置了居中，但是序号div也因此处于中间位置，紧挨文字。

为了解决这一问题，将整个方框改为弹性盒子，分开橙色背景和茶色背景的div，对齐方式为

flex-flow：column nowrap；

justify-content：flex-end；

下面的4个方格也包含在弹性容器中。

4个方格也作为弹性容器中的弹性容器，对齐方式

flex-flow：row nowrap；

justify-content：space-between ；

3、鼠标悬停时出现4个元素

实现该功能的主要代码:

.box:hover .icon {

    display:initial;

}

.icon {

    display:none;

}

其中box为

icon为四个元素

 4、音频添加

使用embed元素嵌入音频，并自动播放。

<embed src="7audio.mp3" width=10px height=0

       type="audio/mpeg" loop="true" autostart="true"></embed>

5、结束页中的半透明

半透明有两种实现方法

第一是 opacity：0.5；

第二是 rgba（R，G，B，A）；

opacity的不足是，当设置元素背景opacity为0.5时，该元素中的内容也会半透明。

任务7中为了保持按钮不透明，选择第二种方式rgba。background-color: rgba(41,189,224,.5);

透明度值在0到1之间。

收获：

掌握了z-index、vw、透明度设置、超链接

熟悉了hover、emded、清除浮动

了解了分页，光标类型

光标类型：