老师，请回答
来源：4-3 video-布局（3）
慕设计6552984
2020-04-24 16:21:47
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
*{
margin:0;
padding:0;
list-style:none;
}
.outerNode{
width:540px;
height:332px;
position:absolute;
left:50%;
top:50%;
margin:-166px 0 0 -270px;
box-shadow:0 0 4px #5b606d;
}
.outerNode .videoNode{
width:540px;
height:305px;
float:left;
background:black;
}
.outerNode .controlsNode{
width:540px;
height:27px;
float:left;
background:url(1/ctrs_bg.gif) repeat-x;
cursor:pointer;
}
.outerNode .controlsNode .playNode{
width:13px;
height:15px;
margin:6px 0 0 14px;
float:left;
background:url(1/playNode.png) no-repeat;
}
.outerNode .controlsNode .loadNode{
width:267px;
height:10px;
margin:9px 0 0 14px;
float:left;
background:url(1/load_bg.gif) repeat-x;
position:relative;
}
.outerNode .controlsNode .loadNode .loadLeft{
width:100%;
height:3px;
position:absolute;
left:0;
top:0;
background:url(1/left_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .loadRight{
width:100%;
height:3px;
position:absolute;
right:0;
top:0;
background:url(1/right_bg.png) no-repeat;
}
.outerNode .controlsNode .loadNode .crlNode{
width:17px;
height:17px;
background:url(1/crl_bg.png) no-repeat;
position:absolute;
top:-3.5px;
left:-8.5px;
cursor:pointer;
}
.outerNode .controlsNode .timeNode{
width:55px;
height:10px;
float:left;
margin:9px 0 0 9px;
}
.outerNode .controlsNode .timeNode span{
font-size:10px;
float:left;
color:white;
line-height:10px;
}
.outerNode .controlsNode .volumeNode{
width:17px;
height:16px;
float:left;
margin:5px 0 0 16px;
background:url(1/volume_bg.png);
}
.outerNode .controlsNode .volumeLine{
width:61px;
height:8px;
float:left;
margin:10px 0 0 4px;
background:url(1/volumeLine_bg.png) repeat-x;
}
.outerNode .controlsNode .volumeLine .v_left{
width:3px;
height:100%;
position:absolute;
left:0;
top:0;
background:url(1/v_left.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_right{
width:3px;
height:100%;
position:absolute;
left:0;
top:0;
background:url(1/v_right.png) no-repeat;
}
.outerNode .controlsNode .volumeLine .v_DragNode{
width:15px;
height:13px;
position:absolute;
left:-5.5px;
top:-3.5px;
background:url(1/vo_d.png) no-repeat;
cursor:pointer;
}
.outerNode .controlsNode .fullNode{
float:left;
margin:6px 0 0 50px;
width:15px ;
height:17px;
background:url(1/full_bg.png) no-repeat;
cursor:pointer;
}
</style>
</head>
<body>
<!-- 最外层的元素 -->
<div class="outerNode">
<!-- video元素 -->
<video class="videoNode" src="imooc.mp3" poster="poster.jpg" ></video>
<!-- 控制器的元素 -->
<div class="controlsNode">
<!-- 控制播放暂停的按钮 -->
<div class="playNode"></div>
<!-- 控制video的进度条 -->
<div class="loadNode">
<div class="loadLeft"></div>
<div class="loadRight"></div>
<!--拖动进度条的按钮-->
<div class="crlNode"></div>
</div>
<!--时间的元素-->
<div class="timeNode">
<span class="now">1:30</span>
<span>-</span>
<span class="all">4:30</span>
</div>
<!--声音的标志-->
<div class="volumeNode"></div>
<!--声音的进度条-->
<div class="volumeLine">
<div class="v_left"></div>
<div class="v-right"></div>
<div class="v_DragNode"></div>
</div>
<!--全屏按钮-->
<div class="fullNode"></div>
</div>
</div>
</body>
</html>
老师，声音控 的控制条上的小圆点怎么不显示啊
1回答
-
好帮手慕慕子
2020-04-24
同学你好，因为没有给小圆点的父元素volumeLine设置定位属性（static除外），导致小圆点参考有定位属性的先辈元素outerNode进行定位了，
建议：给volumeLine添加相对定位属性。
如果我的回答帮助到了你，欢迎采纳，祝学习愉快~
0
相似问题