发表于： 2019-10-25 22:39:20
1 988
今天完成的事情：完成任务七的第二个页面
明天计划的事情：继续进行任务七
遇到的问题：处理音频播放器的的时候遇到麻烦，播放器的样式无法改变，直接设置会破坏掉布局，解决方案为旋转180度后透明化后覆盖上去就好了
研究隐藏四个小图标鼠标悬浮出现花费较长时间
收获：了解透明化覆盖设置实现点击播放点击暂停的效果，代码
先把音频固定在右端后用transform: rotate(180deg);沿着中心旋转180度，使其播放键移动到最右边，接着通过绝对定位的方式把图标固定在右边，实际效果图
正好可以点击播放点击停止
在处理点击出现小图标时最开始使用：hover；来进行操作，但是一直没变反应，在排查之后查到使用该标签需要注意元素之间的关系，不同的关系代码些微不同，一般使用方式为.father:hover .son，这也是我最开始用的，但是这种事父元素与子元素之间的用法，在我写的代码是两个元素是兄弟元素那么就需要用.father:hover ~.son的方法来使用，实际代码
写出来的实际效果如图
实现点击出现四个按钮选项，明天继续任务七争取做完
返回列表
评论