一、今天完成的事情

1.继续写页面2：

①将主体分为4行，每行3个小方块；row使用flex布局，设置justify-content: space-between使两侧方块贴边，中间方块居中；

②使用css3实现三角形样式；

③添加音频播放功能；

④查看技能树参考资料（https://blog.csdn.net/phoooob/article/details/51565483）,设置鼠标hover状态，悬停时显示另一个div；使用absolute定位使小图标脱离文档流，避免显示隐藏层占据一行导致后续对象下移；

⑤实现css半透明。

二、明天计划的事情

1.任务8

2.学习js控制html5 audio标签。

三、遇到的问题

1.鼠标离开父容器则自动隐藏4个小图标，导致无法选取。

解决方法：设置父容器尺寸，使其包含小图标，鼠标悬停于父容器内，小图标始终显示。

2.移动端测试存在问题：

①底部margin布局失效。

解决方法：将margin改为padding-bottom。

②窗口以外内容不显示。

解决方法：发现css里写了overflow: hidden，将其修改为overflow-x: hidden。

③底部颜色显示不完全，两侧存在白色小方块。

解决方法：去掉.main的height: 100%。

④投票页音频播放按钮偏移。

解决方法：使用调试工具，在absolute定位中添加top实际边距。

四、收获

1.了解css的优先级；因为html渲染是自上而下的，应将自定义样式置于bootstrap样式之后以达到覆盖效果；

2.理解content-box和border-box的区别；

3.css半透明实现方式：

①css2：为div添加opacity样式，整体实现半透明，但子div也会变为透明；

②css3：通过rgba设置div背景色和透明度。