今天完成的事情：

任务七全部完成

html加入音频

<audio controls="controls">
    <source src="../img/kldy.mp3" type="audio/mp3"/>
    <source src="../img/kldy.ogg" type="audio/ogg"/>
</audio>
audio{
    opacity: 0;
    float: right;
    transform: rotate(180deg);
    margin-right: 4vw;
    margin-top: 7px;
}

明天计划的事情：开始任务八

遇到的问题：今天卡在如何加入音频播放器的问题，后来在师兄的帮助下，看了html关于的音频的教程就解决了。

收获：今天学会了使用html音频的使用，说实话今天卡在实现音频播放器的问题上，卡了好久好久，也搜了很多的资料也都试了，但是结果一直不理想，让我感觉到还是html的教程看的不够多，之前都没看到这个，所以才造成今天这么为难。

                                                                                      任务七总结：

    今天终于完成任务七的全部页面，说实话直到今天我才感觉自己有点前端程序员的样子了，怎么说呢，就看着自己写出来的东西还是蛮自豪的，也许在其他师兄看来这很简单，但是对于我来说这已经很厉害了。讲真的这些天感觉像做梦一样，当初趁着自己脑子正热的时候来选择学前端的，也算是目前我自己为数不多的正确的选择吧！加油吧！骚年！

                                                                 深度思考：

1.什么是CSS sprites？

CSS Sprites其实就是把网页中一些背景图片整合到一张图片文件中，再利用CSS的“background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position可以用数字能精确的定位出背景图片的位置。

当页面加载时，不是加载每个单独图片，而是一次加载整个组合图片。这是一个了不起的改进，它大大减少了http请求的次数，减轻服务器压力，同时缩短了悬停加载图片所需要的时间延迟，使效果更流畅，不会停顿。缺点：就是在拼图时，比较麻烦，还有后期维护也比较麻烦，比如做好的图，然后一个图标改了大小，但是图标之间留的位置不够，那你就要重写很多css，，当然现在已经很多这方面的软件，或者在线生成代码。。。但这个麻烦还是存在的。

在层中的有浮动属性的元素最后边加上来清除

（1）<</SPAN>divstyle="background:#eee;"><</SPAN>divstyle="height:100px;width:100px;background:Green;float:left;"></</SPAN>div><</SPAN>divstyle="height:100px;width:100px;background:Red; float:right;"></</SPAN>div>style="clear:both;">></</SPAN>div>

（2）将display设置为table

一般来说，外层宽度都是固定的，设置宽度后可以将外层的显示模式设置为：display:table

（3）添加overflow设置为hidden，将外层的overflow设置为：hidden:

3.rgba和opacity的透明效果有什么不同？display和visiblity有什么区别？

rgba()和opacity都能实现透明效果，但最大的不同是opacity作用于元素，以及元素内的所有内容的透明度，

而rgba()只作用于元素的颜色或其背景色。（设置rgba透明的元素的子元素不会继承透明效果！）

display属性设定为“none”的元素将不产生任何的框（Box），也就是说，元素对布局没有影响，浏览器将不显示该元素，包括其后代元素。更不会占位。

而如果设定“visibility : hidden”则会生成元素框，只是元素“不可视”，而其他非视觉的属性都将生效，例如widht、padding等。

4.描述下z-index和叠加上下文是如何形成的？

层叠上下文，就是在呈现的时候决定哪个元素在上、哪个元素在下，初学的时候觉得这东西应该就是跟z-index的大小有关，然而并没有这么简单。

5.如果是在手机上查看投票页，没有hover效果时应该怎么办？

:hover用于选择鼠标指针浮动在上面的元素，可用于所有元素，不只是链接。:hover用于选择鼠标指针浮动在上面的元素。手机端上只需要添加一个触摸事件就可以了。