今天完成的事情：
           完成了任务7的投票页面，本该昨天完成的，可惜有事，只好拖到今天了，那个H5的audio标签用了js了，为的是自动更换播放暂停图标

明天计划的事情：
           继续做任务7的游戏结果页面，如果提前做好了并且三个页面都改好了上交完成任务就开始接触任务8

遇到的问题：

        1. 一开始想把audio按钮的图标给换成能切换的，用纯CSS不行，所以网上找了点资料，用JS来实现播放暂停按钮的切换效果，用到了js的addEventListener监听功能。

           2.切换不同的设备时，发现字体大小不太协调，所以用了个新的长度单位vw和vh。

           3.footer元素的底部固定后,在main元素设置overflow:auto和min-height限制后，无法覆盖溢出内容使其隐藏产生滚动效果（原因可能使溢出内容使用的是vw，导致了只认浏览器的宽度，无视父元素了吧），所以就把overflow:auto和height限制放在了溢出内容所在最近的直属父元素上面了，但height无法使用百分比，所以只能用vw来限制溢出内容的高度。

收获：

           1.学会了如何用js替换audio播放暂停的切换图标动作

           2.了解了vw和vh这两个长度单位,在涉及到单位的属性基本都能应用，如果子元素用了这两个长度单位，则父元素无法用百风比来限高，用px这类是可以的，还有兼容性差。

           3.A元素的内容超出范围后，如果在A元素上用voerflow:auto，则A元素的padding区域会显示超出的内容，而且padding的宽度不变，也就是A元素整体的长度大小保持不变，跟padding内会显示背景颜色是一样的和保留宽度也是一样的。

           4.<img style="display:block;width:auto;height:auto; /> 随便改个 auto，另一边就自动等比例缩放了

           5.当使用text-align:center让文本居中后，多余的字跳到第二行时也会出现居中，解决方法是其所在元素更换text-align:justify;，也就是两端对齐方可