91超碰碰碰碰久久久久久综合_超碰av人澡人澡人澡人澡人掠_国产黄大片在线观看画质优化_txt小说免费全本

溫馨提示×

溫馨提示×

您好,登錄后才能下訂單哦!

密碼登錄×
登錄注冊×
其他方式登錄
點擊 登錄注冊 即表示同意《億速云用戶服務條款》

HTML如何制作靜態進度條

發布時間:2020-09-26 14:33:10 來源:億速云 閱讀:217 作者:小新 欄目:web開發

這篇文章主要介紹HTML如何制作靜態進度條,文中介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們一定要看完!

html進度條代碼示例如下:

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>html靜態進度條示例</title>
    <meta charset="UTF-8">
    <style type="text/css">
        .mask{
            position:absolute;
            left:0px;
            top:0px;
            height:100%;
            width:100%;
            background-color: #eee;

        }
        .out{
            margin:auto;
            margin-top:20%;
            text-align:center;
            height:30px;
            width:500px;
            background-color: #fff;
            border:1px solid #000;
            position:relative;
        }
        .in{
            position:absolute;
            left:0px;
            top:0px;
            height:30px;
            width:250px;
            background-color: #ddd;
        }
        .num{
            position:absolute;
            left:0px;
            top:0px;
            height:30px;
            line-height:30px;
            width:500px;
            text-align:center;
            position:relative;
        }

    </style>
</head>
<body>
<div class="mask">
    <div class="out">
        <div class="in"></div>
        <div class="num">50%</div>
    </div>
</div>

</body>
</html>

以上代碼在網頁上顯示效果如下圖:

HTML如何制作靜態進度條

如圖顯示,頁面中有一個靜態進度條并且顯示50%的進度。由于是html靜態進度條所以html進度條速度改變也是可以的也就是將數字更改,只要將對應的樣式改好即可。這里的原理其實就是,在一個div中分成兩個部分,一個是深色部分表示進度量,一個是空白部分表示剩余量。然后主要設置進度量部分的樣式也就是顏色寬度區分開來即可。

以上是HTML如何制作靜態進度條的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!

向AI問一下細節

免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。

AI

海宁市| 双桥区| 交城县| 白玉县| 开封市| 喀喇沁旗| 林周县| 余干县| 潼关县| 鹤峰县| 太保市| 和田市| 武义县| 成武县| 日喀则市| 建瓯市| 越西县| 邢台县| 江山市| 芦山县| 安龙县| 称多县| 改则县| 宁德市| 上杭县| 涞水县| 定州市| 洛隆县| 信宜市| 冀州市| 比如县| 贡嘎县| 武平县| 大荔县| 辽阳市| 武胜县| 白城市| 石林| 太和县| 神木县| 天气|