一、今天完成的事情：

1.学习了用js控制audio音频播放的功能

2.学习了通过超链接实现css鼠标事件

3.学习了制作半透明效果

二、明天计划的事情：

1.学会链接页面，将任务7的几个页面之间的链接跳转加上

2.学习实现CSS3轮播图片效果 

3.了解学习不定宽布局

三、遇到的问题：

主要还是Bootstrap布局的问题，在做任务7投票页面的时候，给了每个方形定了高宽，只在元素外部使用了col来基本定位。这样就有个问题，方形位置是固定的（居中，间距），大小也是固定的（高宽）。不知道这样是否符合任务要求。如果要做成随着窗口的拉动，方形的大小也随之改变，但不变形，各方形间的相对位置也不变，不知道如何实现呢？因为我一开始不定高宽，使用col的时候，拉长窗口的话，方形也会拉长，变更成长方形。

四、收获：

1.学习了用js控制audio音频播放的功能

效果：将audio音频播放样式修改为自定义样式，更换了背景图标，点击图标实现播放暂停的功能

HTML:

    <div class="vote-audio"><audio id="mp3Btn"><source src="images/audio.mp3" type="audio/mpeg" /></audio></div>

    （type="audio/mpeg"为指定标准音频编码，mp3就属于其中一种）

    <script type="text/javascript" src="jquery.min.js"></script>

    （连接js）

CSS:

    .vote-audio{

        width: 10px;

        height: 10px;

        background:url(images/voice_stop.png) no-repeat center bottom;  （ 添加音频背景图 ）

    }

JS:

$(function(){

    var audio = document.getElementById('mp3Btn');     ( var 命名，将ID为mp3Btn的元素命名为 audio )

    audio.volume = 0.3;      ( 播放音量为30% )

    $('.vote-audio').click(function() {     （ 点击事件：当点击类 .vote-audio元素时 ）

        if(audio.paused){     （ 如果当前是暂停状态 ）

            audio.play();     （ 播放 ）

            return;

        }else{      （ 当前是播放状态 ）

            audio.pause();    （ 暂停 ）

        }

    });

})

2.学习了通过超链接实现css鼠标事件

效果：鼠标移动到方框里，下方四小格出现

<a href="#" onMouseOver="document.all.act_1.style.visibility=''"

onMouseOut="document.all.act_1.style.visibility='hidden'">123</a>

（ onMouseOver 鼠标移动到元素时，act_1元素visibility=""可见。onMouseOut 鼠标离开元素时，act_2元素visibility="hidden"隐藏 ）

上面这段是超链接的文字部分，要注意的是其中的“act_1”，这个可以自定义命名，一个超链接关联一个，不可重复。

<div id="act_1" class="act" style="visibility: hidden;">one two three</div>  ( id名要与上面的超链接匹配，这样才能链接到元素 )

3.学习了制作半透明效果

3.1  opacity:0.5    

       全透明，规定不透明度：从 0.0 （完全透明）到 1.0（完全不透明）。会使得包含的其他内容也一起半透明。

.footer {
    width: 100%;
    height: 1.29rem;
    background-color: #2aabd2;
    opacity: 0.5;
    border-top: transparent;
}

3.2  background-color:rgba(0,0,0,0.2);

      背景半透明，内含元素不透明。从左到右以为为

      R：红色值。正整数 | 百分数

      G：绿色值。正整数 | 百分数

      B：蓝色值。正整数 | 百分数

      A：Alpha透明度。取值0~1之间

.footer {
    width: 100%;
    height: 1.29rem;
    background-color: rgba(41,189,224,0.5);
    border-top: transparent;
}

进度：任务7

任务开始时间：06.04

预计demo时间：06.07

是否有延期风险：无

禅道：http://task.ptteng.com/zentao/project-task-725.html