发表于： 2018-11-07 22:33:36
1 684
今天完成的事情：今天的任务做的还是任务7的中间投票页面，在做这个问题的时候，上午的时候只要是用来研究audio的样式，再网上找下能否利用css来更改样式，下午的话是页面主题部分，主要就是卡在其中的四个小图片显示上边。晚上的话解决的话是鼠标点击的hover效果
明天计划的事情：明天的话把任务7做完，其中的一些问题再修改下
遇到的问题：
1第一个问题就是上面所说的audio样式问题，网上的audio样式不管是在谷歌还是百度上找的，样式修改的话所能找的的都是通过css来改变其中的长度和宽度，但是其中的点击效果都是通过js来修改的，后来在查看这个页面深度思考问题的时候，发现其中有一个更改透明度的效果
通过网上查阅。opacity 属性设置元素的不透明级别。后来我尝试把播放按钮的opacity设置为0，测试来下，果然点击还在，只是透明来，后来我尝试把这个元素和图片放到一行来解决问题，但是在把播放按钮放到图片上的时候发先，如果直接把图片放到播放按钮的上面，直接点击的是话不生效的，得把按钮放到图片的上面点击播放效果才没有问题，但是在其中放入图片的话间距问题不是很好控制，所以我尝试采用css的方式来把播放按钮写出来，
audio{ /* 播放器样式*/
width: 5rem;
height: 50px;
opacity: 0;
position: relative;
left: 69px;
}
.in{ /*圆形*/
width: 40px;
height: 40px;
background: #F8A629;
-moz-border-radius: 50px;
-webkit-border-radius: 50px;
border-radius: 20px;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10px;
position: relative;
}
.in-one{ /*三角*/
width: 0;
height: 0;
border-top: 15px solid transparent;
border-left: 20px solid #FFFFFF;
border-bottom: 15px solid transparent;
margin-left: 5px;
}
.main-top-audio{ /* 包含播放按钮的div*/
display: flex;
flex-direction: row-reverse;
align-items: center;
overflow: hidden;
}
<div class="main-top-audio">
<div class="main-top-audio">
<div class="in">
<div class="in-one"></div>
</div>
<audio controls autoplay="autoplay" controlsList="nodownload" oncontextmenu="return false">
<source src="audio/test.mp3">
</audio>
</div>
</div>
controlsList="nodownload" oncontextmenu="return false
上面这行代码是隐藏播放器的下载按钮
2，这个问题是关于点击hover的效果，首先我按照菜鸟教程的方法写出来hover效果，但是最后点击的时候发现根本没有效果，后来经过排查发现hover效果所呈现的效果得是父子效果这个才会生效，对于同级的话这个效果是不生效的。在改完后我发现竟然还是没有作用，后来又去网上寻找发现
:hover :hover前面有无效果呈现的是两种效果，: hover 前加空格，本身不会有: hover 的效果，而后代元素会有: hover 的效果
测试的代码在这里
<!DOCTYPE html>
<html>
<head>
<title></title>
</head>
<body>
<h1>测试</h1>
<div class="one">
<div class="two">
</div>
<div class="three">
</div>
<div class="four">
</div>
</div>
</body>
</html>
<style type="text/css">
.one {
margin: 0 auto;
width: 400px;
height: 300px;
background: #ced05d;
}
.two {
margin: 0 auto;
width: 100px;
height: 100px;
background: #5a5aea;
}
.three {
margin: 0 auto;
width: 200px;
height: 100px;
background: #4b9c49;
}
.four {
margin: 0 auto;
width: 300px;
height: 100px;
background: #7b4141;
}
.one:hover {
background: #da56d0;
}
</style>
当加上空格的时候
.one :hover {
background: #da56d0;
}
，鼠标放到黄色会是这种效果
当没有空格的时候
.one:hover {
background: #da56d0;
}
鼠标黄色上面会显示如图所示效果
收获：对于audio样式有了初步的了解，以及怎样更改其显示效果。
对于hover效果，必须是父子关系才可以，还有就是hover的空格和无空格的区别，这方面在书写代码的时候一定要仔细规范
返回列表
评论