HTML+css制作簡易進度條
發(fā)布時間:2013-09-30 15:52:41 作者:佚名
我要評論

進度條想必大家并不陌生吧,而且實現(xiàn)方法各種各樣,在本文為大家講解下利用html+css實現(xiàn)進度條的制作,感興趣的朋友可以嘗試操作下
1、HTML代碼
復制代碼
代碼如下:經(jīng)驗值:
<span class="progress-bar"><b style="width:50px;"> </b></span>
2、CSS樣式
復制代碼
代碼如下:.progress-bar, .progress-bar b{background: url("/images/ico.png") no-repeat scroll 0 0; display: block;}
.progress-bar {background-position: 0 0; height: 15px;width: 430px;}
.progress-bar b {background-position: 0 -17px; height: 12px;}
附件:

相關(guān)文章
- 這篇文章主要介紹了網(wǎng)頁加載進度條,文中解釋了屬性和應(yīng)用,具體操作步驟大家可查看下文的詳細講解,感興趣的小伙伴們可以參考一下。2017-08-17
- 本文詳細介紹了如何利用HTML和CSS實現(xiàn)多種風格的進度條,包括基礎(chǔ)的水平進度條、環(huán)形進度條以及球形進度條等,還探討了如何通過動畫增強視覺效果,內(nèi)容涵蓋了使用HTML原生標簽2024-09-19