今天完成的事情：

1.完成任务7  2.了解了boostrap的概念 3.audio音频标签

明天计划的事情：

完成任务8

遇到的问题：

已解决

收获：

1.boostrap

了解了一下boostrap的概念，主要是格栅系统、导航页、下拉列表和轮播图。使用是依靠给元素设置boostrap中写好的类名，再依据个人需求增添个性化css

2.audio标签

主要是在投票页，如果设置了control=‘controls’，浏览器自带的音频控件会破坏布局。于是用css自己绘制了暂停图标和播放图标

.audio-btn {

    display: flex;

    justify-content: center;

    align-items: center;

    box-sizing: border-box;

    width: 25px;

    height: 25px;

    border-radius: 50%;

    background: rgb(248, 180, 69);

}

.audio-btn-1{

    width: 0;

    height: 0;

    border-left: solid 15px #fff;

    border-bottom: solid 8px transparent;

    border-top: solid 8px transparent;

    margin-left: 4px;

}

.audio-btn-2 {

    width: 5px;

    height: 15px;

    border-left: 3px solid #fff;

    border-right: 3px solid #fff;

}

再用js事件监控来控制播放。

<script src="tool/jquery-3.4.1.js" type="text/javascript" charset="utf-8"></script>

        <script type="text/javascript">

            $(function(){

                // 播放完毕

                $('#mp3').on('ended', function() {

                    console.log("音频播放完毕");

                    $('#audio-btn>:first').attr('class','audio-btn-1');

                })

                // 播放

                var audio = document.getElementById('mp3');

//这里使用document.getElementById('mp3');而不是$('#mp3')主要是因为使用第二种得到是jquery对象而不是DOM对象，jquery对象是没有audio.paused、audio.play();这种事件和函数的。

                $('#audio-btn>:first').click(function() {

                    event.stopPropagation(); //防止冒泡（就是将这个事件传到audio的祖先元素上去，但点击这个事件发生的时候，我们只需要音频和图标做出回应就可以了，无需传到更上级去）

                    if(audio.paused){

                        $('#audio-btn>:first').attr('class','audio-btn-2');

                        audio.play();

                    }

                    else{

                        $('#audio-btn>:first').attr('class','audio-btn-1');

                        audio.pause();

                    }

                })

            })

        </script>

 $('#audio-btn>:first')就是查找对应id元素的第一个子元素

3.结束页按钮背景透明，按钮不透明

如果设置了父元素opacity：.5，那么就算设置子元素opacity: 1，子元素依旧和父元素一样透明（应该是此时子元素的opacity：1已经为父元素当前的透明度了，相对的是已经更改的父元素透明度）

所以为了达到效果，设置了父元素的背景rgba(),直接设置背景色透明，这样就不会影响到子元素了。

深度思考

1.display和visiblity有什么区别？

隐藏元素的方法有：

1.display：none

这个元素存在于DOM树，不存于与渲染树，可以操作dom来使用它，但无法再页面上进行交互

2.visibility：hihdden

这个元素仍然存在于文档流中，但看上去隐藏了，读屏软件认为隐藏

3.opacity：0

布局仍然存在，读屏软件不认为它是隐藏的

4.position：absolute； left：-99999px；

不影响布局，而且可以交互

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

层叠顺序（同一个层叠上下文元素中）：

正z-index>z-index:0/auto>inline/inline-block盒子>float盒子>block盒子>负z-index>background/border

这里有一个前面没解决（换了另一种方式）的问题，就是固定定位的元素在手机端滚动会被覆盖，将元素的z-index设置为正值就可以解决了