今天完成的事情：优化任务7首页，制作任务7投票页优化，调试最终完成两个页面。

                            寻找利用js修改audio样式。给各个按钮加上链接，在首页和投票之间跳转。

明天计划的事情：制作完成结果页面，调试优化。

遇到的问题：这个任务涉及的东西还挺多的，比以前难了，小圆点说是用css制作，我找了一个css绘制图形的做法，绘制圆点。 黄色箭头说是滑动页面保持                     不变，这里不是很懂应该怎么做，定位？还是什么做法？

                 主体用了之前九宫格的做法，用一个正方形框以九宫格方法分布，在里面再放个小正方形，设置其为水平垂直居中，再把小正方形分上下        部分放名字和号码，文字垂直居中没解决，底部会突出小正方形，因为是比例高度，所以line-height无效，最后用了display：table  vertical；align的         方法来设置垂直居中。

              对于鼠标事件，用了之前的父元素hover，display：block，子元素display；none的方法；我把四个小图标放在一个小盒子里，在把四个小盒子放在一个大盒子里，定位到黄色正方形下方。因为我想不应该是直接四个图放一起显示，因为要点击每个不同图标，如果放一起那么点击的就是一整个，但是我好像记得之前学过一个图片区域选择之类的方法，是创建图像映射，应该也可以这么做。

                audio修改，网上找了半天，有的太多看不懂，太复杂，js不懂，后来终于找到一个最简单的，

                 <audio src="images/财富自由.mp3" id="aud"></audio>

                 <div id="playpause" class="icon-play"></div>

                <script type="text/javascript">

                var aud = document.getElementById("aud");

                     var img = document.getElementById("playpause");

                img.onclick = function() {

                  if (aud.paused) {

                    aud.play();

                  } else {

                   aud.pause();

                     }

               }

             aud.addEventListener("play", function (e) {

                 img.src="images/play.png";

           }, false);

                aud.addEventListener("pause", function (e) {

                 img.src="images/play.png";

         }, false);

             </script>

最终实现效果。

收获：

简单了解了css制作三角，圆点，如和用js修改audio样式，还没学js，不是很懂，制作网页，最重要的还是先构思好布局方式，就像写文章，先构思好，之后便如行云流水，当然，知识一定要扎实。