您好,登錄后才能下訂單哦!
小編給大家分享一下html和CSS制作一個靜態(tài)進度條的示例,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
用CSS制作一個簡單的進度條需要用到CSS中的基本知識,比如border-radius圓角,居中等等,如有不清楚的同學可以參考億速云的相關(guān)文章,或者訪問 CSS視頻教程,一定要把基礎(chǔ)學好啊!
實例:用html和CSS制作一個簡單的靜態(tài)進度條
HTML部分:
觀察進度條可以發(fā)現(xiàn),進度條由兩部分組成,一個是進度條的總長度,一個是進度的長度,所以我們創(chuàng)建兩個div,一個div作為父元素,另一個div作為子元素,并分別給他們一個class類名,便于對其設(shè)置樣式,具體代碼如下:
<p>進度條</p> <div class="container"> <div class="skills loading">70%</div> </div>
CSS部分:
基本框架已經(jīng)出來了,現(xiàn)在需要給兩個div設(shè)置樣式。將第一個div的長設(shè)置為300px,高設(shè)為30px,背景顏色設(shè)為#ddd,為了美觀,我們還可以用border-radius屬性將其變?yōu)閳A角。將第二個div的長設(shè)置為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制作一個靜態(tài)進度條的示例有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注億速云行業(yè)資訊頻道,感謝各位的閱讀!
免責聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。