【前端】【萌狼原创】播放器的控制条-CSDN博客

点击查看代码

<!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>