HTML怎麼製作靜態進度列？ （例）
- 藏色散人原創
- 2018-08-14 15:48:566156瀏覽
本篇文章主要來介紹html靜態進度條是怎麼實現的。這裡只要用HTML和css程式碼結合就可以實現了，非常容易操作。
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靜態進度條的製作有一定的了解呢？希望這篇能讓有需要的朋友得到幫助。
以上是HTML怎麼製作靜態進度列？ （例）的詳細內容。更多資訊請關注PHP中文網其他相關文章！
陳述：
本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn