其實實現進度條的方法最簡單的就是先定義好這個標籤的背景顏色這樣容易區分,還要設置好高端,一開始寬度爲0,隨之寬度的增寬進度條也會隨之變長。
<div class="propess"></div>
.propess{
backgroundColor: skyblue;
height: 10px;
width: 0;
}
如果想體驗更好一些,讓進度條有一個外邊框,則需要在這個標籤外層在包圍一層div,給外層的div,設置好邊框顏色,這個div的寬度設置的要跟進度條最長的寬度一致。
<div class="out">
<div class="inside"></div>
</div>
.out{
border: 1px solid blue;
width: 600px; // 這裏的寬度要跟最終進度條的寬度一致寬
}
.inside{
backgroundColor: skyblue;
height: 10px;
width: 0;
}