您好,登錄后才能下訂單哦!
這篇文章主要介紹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>
以上代碼在網頁上顯示效果如下圖:
如圖顯示,頁面中有一個靜態進度條并且顯示50%的進度。由于是html靜態進度條所以html進度條速度改變也是可以的也就是將數字更改,只要將對應的樣式改好即可。這里的原理其實就是,在一個div中分成兩個部分,一個是深色部分表示進度量,一個是空白部分表示剩余量。然后主要設置進度量部分的樣式也就是顏色寬度區分開來即可。
以上是HTML如何制作靜態進度條的所有內容,感謝各位的閱讀!希望分享的內容對大家有幫助,更多相關知識,歡迎關注億速云行業資訊頻道!
免責聲明:本站發布的內容(圖片、視頻和文字)以原創、轉載和分享為主,文章觀點不代表本網站立場,如果涉及侵權請聯系站長郵箱:is@yisu.com進行舉報,并提供相關證據,一經查實,將立刻刪除涉嫌侵權內容。