为什么我的class为volumBar的span宽和高是0
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>video</title>
<link rel="stylesheet" href="css/video.css">
<style>
*{
margin:0;
padding:0;
}
.vContainer{
width: 640px;
height: 360px;
margin:30px auto;
position: relative;
overflow: hidden;
}
.clear {
clear: both;
}
.caption{
position: absolute;
top: 0;
left: 0;
width: 100%;
padding-top: 10px;
font-size: 20px;
font-weight: bold;
color: #ccc;
text-align: center;
background-color: #1f1f1f;
z-index: 1;
}
.control{
position: absolute;
bottom: 0;
left: 0;
background-color: #1f1f1f;
width: 100%;
color: #ccc;
z-index: 1;
}
.control .top{
height:10px;
padding: 1px 5px;
border-bottom: 1px solid #404040;
background-color: red;
}
.control .top .progress{
width: 85%;
height:10px;
float: left;
cursor: pointer;
position: relative;
background-color: #404040;
border-radius: 5px;
}
.control .top .progress .timeBar{
display: block;
width: 40%;
height:10px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
}
.control .top .time{
width: 15%;
height:10px;
float: right;
cursor: pointer;
position: relative;
background-color: #404040;
border-radius: 5px;
text-align:center;
font-size: 0;
}
.control .top .time span{
font-size: 11px;
line-height: 11px;
}
.control .bottom{
clear: both;
background-color: red;
}
.control .bottom .button{
float:left;
width:32px;
height:32px;
cursor: pointer;
padding-top: 10px;
padding-left: 5px;
}
.control .bottom .play{
background: url("../img/play.png") no-repeat 10px 10px;
}
.control .bottom .pause{
background: url("../img/pause.png") no-repeat 10px 10px;
}
.control .bottom .stop{
background: url("../img/stop.png") no-repeat 10px 10px;
}
.control .bottom .sound{
background: url("../img/sound.png") no-repeat 10px 10px;
}
.control .bottom .mute{
background: url("../img/mute.png") no-repeat 10px 10px;
}
.control .bottom .text{
font-size: 16px;
font-weight: bold;
line-height: 22px;
text-align:center;
color: #777;
}
.control .bottom .selected{
color: #fff;
}
.control .bottom .sound,
.control .bottom .mute{
float: right;
}
.control .bottom .volum{
float: right;
width: 70px;
height: 10px;
background-color: #404040;
border-radius: 5px;
margin:17px 10px;
position: relative;
cursor: pointer;
}
.control .botto .volum .volumBar{
display: block;
width: 40%;
height:10px;
border-radius: 5px;
position: absolute;
top: 0;
left: 0;
background-color: blue;
z-index: 2;
}
</style>
</head>
<body>
<div class="vContainer">
<video id="myvideo">
<source src="http://video.mukewang.com/mk.mp4" type="video/mp4">
<source src="../video/imooc.mp4" type="video/mp4">
<source src="../video/imooc.wav" type="video/wav">
<source src="../video/imooc.webm" type="video/webm">
您的浏览器不支持
</video>
<div class="caption">我自己的视频播放器</div>
<div class="control">
<div class="top">
<div class="progress">
<span class="timeBar"></span>
</div>
<div class="time">
<span id="currentTime">00:00</span>
<span>/</span>
<span id="duration">00:00</span>
</div>
<div class="clear"></div>
</div>
<div class="bottom">
<div class="button play"></div>
<div class="button stop"></div>
<div class="button text selected">x1</div>
<div class="button text">x2</div>
<div class="volum">
<span class="volumBar"></span>
</div>
<div class="button sound"></div>
<div class="clear"></div>
</div>
<div class="loading"></div>
</div>
</div>
</body>
</html>
正在回答 回答被采纳积分+1
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 2198 份
- 解答问题 5012 个
如果你有web端基础，既想进阶，又想进军移动端开发，那就来吧，我们专题为你带来的课程有HTML5、CSS3、移动基础、响应式、bootstrap、less等，让你在前端道路上畅通无阻！
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星