今天完成的事情：

完善第二个页面，页面二中的弹窗、音频图标自设定样式并控制音频的播放与停止

完成了第三个页面

学习到了js的一些用法：获取当前窗口宽高、通过id、class、标签获取到该元素，并对其添加事件

学习到了如何使css半透明

改变z-index值的大小可以改变元素的堆叠顺序，但浮动元素不受控制，且该属性只适用于已经设置了position的元素，z-index的值越大，显示顺序会在越前面

明天的计划：

（1）页面一一直不是很完善，控制轮播图切换的图标一直没能达到想象中的效果，需要再完善

（2）规范一下自己的css代码

遇到的问题：

（2）设置底部背景透明度，最开始直接用opacity:0.6;出来的效果是连button都一起变得透明了，后来查了一下资料，发现如果只想背景变透明的话，可以使用background-color: rgba(153,223,240,0.6);其中前面三个值表示red，green，blue三色，最后一个是透明度，当值为1时，背景不透明

修改前：

修改后:

（3）使弹窗居中问题

最开始为弹窗设定位置时只使用了top:50%; left:50%; 效果并不理想

后来添加了一句代码就好了transform: translateX(-50%) translateY(-50%);

收获：

（1）了解了使用css设置背景透明度的方法

（2）学习到了z-index的使用方法

（3）弹窗在页面大小发生变化后仍旧居中