明輝手游網(wǎng)中心：是一個免費提供流行視頻軟件教程、在線學習分享的學習平臺！

HTML如何制作靜態(tài)進度條？（示例）

發(fā)表時間：2023-09-06 來源：明輝站整理相關(guān)軟件相關(guān)文章人氣：

[摘要]本篇文章主要給大家介紹html靜態(tài)進度條是怎么實現(xiàn)的。這里只需要用HTML和css代碼結(jié)合就可以實現(xiàn)了，非常容易操作。html進度條代碼示例如下：<!DOCTYPE HTML> <html lang="en"> <head><title...
本篇文章主要給大家介紹html靜態(tài)進度條是怎么實現(xiàn)的。這里只需要用HTML和css代碼結(jié)合就可以實現(xiàn)了，非常容易操作。

html進度條代碼示例如下：

<!DOCTYPE HTML>
<html lang="en">
<head>
    <title>html靜態(tài)進度條示例</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)頁上顯示效果如下圖:

6a58af981f97d86b66a6cef6aa8a6e8.png

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

通過上述代碼示例，大家是不是對html靜態(tài)進度條的制作有一定的了解呢？希望本篇能讓有需要的朋友得到幫助。

以上就是HTML怎么制作靜態(tài)進度條？（示例）的詳細內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！


網(wǎng)站建設(shè)是一個廣義的術(shù)語，涵蓋了許多不同的技能和學科中所使用的生產(chǎn)和維護的網(wǎng)站。