HTML如何制作靜態(tài)進(jìn)度條

發(fā)布時(shí)間：2020-09-26 14:33:10 來源：億速云閱讀：215 作者：小新欄目：web開發(fā)

這篇文章主要介紹HTML如何制作靜態(tài)進(jìn)度條，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

html進(jìn)度條代碼示例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>html靜態(tài)進(jìn)度條示例</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>

以上代碼在網(wǎng)頁上顯示效果如下圖:

HTML如何制作靜態(tài)進(jìn)度條

如圖顯示，頁面中有一個(gè)靜態(tài)進(jìn)度條并且顯示50%的進(jìn)度。由于是html靜態(tài)進(jìn)度條所以html進(jìn)度條速度改變也是可以的也就是將數(shù)字更改，只要將對應(yīng)的樣式改好即可。這里的原理其實(shí)就是，在一個(gè)div中分成兩個(gè)部分，一個(gè)是深色部分表示進(jìn)度量，一個(gè)是空白部分表示剩余量。然后主要設(shè)置進(jìn)度量部分的樣式也就是顏色寬度區(qū)分開來即可。

以上是HTML如何制作靜態(tài)進(jìn)度條的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識，歡迎關(guān)注億速云行業(yè)資訊頻道！

向AI問一下細(xì)節(jié)

HTML如何制作靜態(tài)進(jìn)度條

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標(biāo)簽