点击查看代码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <!-- 字体图标库 --> <link rel="stylesheet" href="//at.alicdn.com/t/font_3159328_nn2imegqd7.css"> <!-- <link rel="stylesheet" href="./source/css/font-awesome-4.7.0/css/font-awesome.min.css" /> --> <script src="./source/js/jquery.min.js"></script> <style> .controller { /* 边距问题 */ margin: 0 auto; padding: 0; box-sizing: border-box; /* 大小问题 */ width: 100%; height: auto; /* 边框问题 */ /* border: 1px solid black; */ background-color: rgb(34, 200, 255, 0.5); /* 边框问题 */ border-radius: 5px; /* 其他美化 */ box-shadow: 1px 1px 1px 1px rgb(19, 141, 255, 0.2); } .bar { /* 大小 */ width: 100%; height: 0.5em; /* 背景 */ background-color: rgb(34, 200, 255, 0.5); /* 边框问题 */ border-radius: 5px; /* 其他美化 */ box-shadow: 0px 1px 1px 0px rgb(19, 141, 255, 0.2); } .bar .line { width: 45%; height: 100%; background-color: pink; border-radius: 5px; box-shadow: 1px 0px 1px 0px rgb(19, 141, 255, 0.2); } /* 控制栏 */ .basep, .morep, .timer { padding-left: 1em; box-sizing: border-box; height: 1.5em; color:snow; line-height: 1.5em; display:table-cell;/*尽可能的让元素垂直居中*/ } .basep span { /* display: block; */ font-size: 1.25em; } .timer span { font-size: 1em; } </style> </head> <body> <div class="controller"> <!-- 进度条 --> <div class="bar"> <div class="line"></div> </div> <!-- 功能区 --> <div class="power"> <!-- 播放按钮 --> <div class="basep"> <span id="state" class="iconfont icon-bofang1"></span> <span id="restate" class="iconfont icon-zanting1"></span> </div> <!-- 时间 --> <div class="timer"> <span class="current">00:00:00</span> / <span class="total">00:00:00</span> </div> <!-- 功能按钮 --> <div class="morep"> </div> </div> </div> </div> </body> </html>
