<!DOCTYPE html><html><head><meta charset="UTF-8"><title>MyVideo</title><link rel="stylesheet" type="text/css" href="style.css"></head><body><div class="vContainer"><video id="myVideo"><source src="imooc.mp4" type="video/mp4">您的瀏覽器不支持</video><div class="caption">我自己的視頻播放器</div><div class="control"><div class="top clearfloat"><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><div class="bottom clearfloat"><div class="button play"></div><div class="button stop"></div><div class="button text1 text active">x1</div><div class="button text3 text">x3</div><div class="volume"><span class="volumeBar"></span></div><div class="button sound"></div></div></div><div class="loading"></div></div></body></html>*{ margin: 0; padding: 0;}?.clearfloat:after{? content: '';? height: 0;? line-height: 0;? display: block;? visibility: hidden;? clear: both;?}.vContainer{ width: 640px; height: 360px; margin: 30px auto; position: relative; overflow: hidden; background-color: #dedede;}.caption{ position: absolute; top: 0; left: 0; width: 100%; padding: 10px; font-size: 20px; font-weight: bold; color: #ccc; background-color: #1f1f1f; z-index: 1;}.control{ position: absolute; bottom: 0; left: 0; width: 100%; color: #ccc; background-color: #1f1f1f; z-index: 1;}.control .top{ height: 11px; border-bottom: 1px solid #404040; padding: 1px 5px; background-color: #1f1f1f;}.control .top .progress{ height: 10px; width: 85%; position: relative; float: left; cursor: pointer; background-color: #404040; border-radius: 5px;}.control .top .progress .timeBar{ height: 100%; position: absolute; top: 0; left: 0; display: block; border-radius: 5px; z-index: 3; background-color: #f9d43a; width: 0px;}.control .top .time{ width: 15%; float: right; text-align: center; line-height: 12px; font-size: 0;}.control .top .time span{ font-size: 12px;}.control .bottom{ /*clear: both;*/這里直接給父元素清除浮動(dòng)就可以正常顯示 background-color: #1f1f1f;}.control .bottom .button{ float: left; width: 32px; height: 32px; padding: 0 5px; cursor: pointer;}.control .bottom .play{ background: url('play.png') no-repeat 7px 2px;}.control .bottom .pause{ background: url('pause.png') no-repeat 7px 2px;}.control .bottom .stop{ background: url('stop.png') no-repeat 7px 2px;}.control .bottom .sound{ background: url('sound.png') no-repeat 7px 2px;}.control .bottom .mute{ background: url('mute.png') no-repeat 7px 2px;}.control .bottom .text{ font-size: 16px; line-height: 32px; font-weight: bold; text-align: center; color: #777;}.control .bottom .active{ color: #fff;}.control .bottom .sound,.control .bottom .mute { float: right;}.control .bottom .volume{ position: relative; cursor: pointer; float: right; width: 70px; height: 10px; margin-top: 10px; margin-right: 10px; background-color: #404040;}.control .bottom .volume .volumeBar{ display: block; width: 35px; height: 100%; position: absolute; left: 0; top: 0; background-color: #eee; z-index: 2;}.loading{ position: absolute; width: 54px; height: 55px; top: 50%; left: 50%; margin-top: -27px; margin-left: -27px; z-index: 1; background: url('loading.gif') no-repeat ;}如圖,用偽類清除浮動(dòng)底部右側(cè)音量條會(huì)距離右邊緣有一段距離,如果直接在父元素添加clear的話就會(huì)貼合右邊緣,不會(huì)有這段距離,這是為什么呢?
添加回答
舉報(bào)
0/150
提交
取消