溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
小編給大家分享一下html和CSS制作一個靜態進度條的示例，希望大家閱讀完這篇文章后大所收獲，下面讓我們一起去探討吧！
用CSS制作一個簡單的進度條需要用到CSS中的基本知識，比如border-radius圓角，居中等等，如有不清楚的同學可以參考億速云的相關文章，或者訪問 CSS視頻教程，一定要把基礎學好啊！
實例：用html和CSS制作一個簡單的靜態進度條
HTML部分：
觀察進度條可以發現，進度條由兩部分組成，一個是進度條的總長度，一個是進度的長度，所以我們創建兩個div，一個div作為父元素，另一個div作為子元素，并分別給他們一個class類名，便于對其設置樣式，具體代碼如下：
<p>進度條</p> <div class="container"> <div class="skills loading">70%</div> </div>
CSS部分：
基本框架已經出來了，現在需要給兩個div設置樣式。將第一個div的長設置為300px，高設為30px，背景顏色設為#ddd，為了美觀，我們還可以用border-radius屬性將其變為圓角。將第二個div的長設置為70%，也就是進度條的值，給div一個不同于父元素的顏色，便于看出效果，最后用line-height和text-align: center讓位置水平垂直居中，具體代碼如下：
.container {
width: 300px;
height: 30px;
background-color: #ddd;
border-radius: 20px;
}
.skills {
line-height: 30px;
color: white;
border-radius: 20px;
text-align: center;
width: 70%;
background-color: #4CAF50;
}效果圖：
由圖可見，一個70%的綠色進度條就制作好了。
看完了這篇文章，相信你對html和CSS制作一個靜態進度條的示例有了一定的了解，想了解更多相關知識，歡迎關注億速云行業資訊頻道，感謝各位的閱讀！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
