小編給大家分享一下html和CSS制作一個靜態(tài)進(jìn)度條的示例,希望大家閱讀完這篇文章后大所收獲,下面讓我們一起去探討吧!
創(chuàng)新互聯(lián)公司主要從事成都網(wǎng)站設(shè)計、成都做網(wǎng)站、網(wǎng)頁設(shè)計、企業(yè)做網(wǎng)站、公司建網(wǎng)站等業(yè)務(wù)。立足成都服務(wù)蕉嶺,十多年網(wǎng)站建設(shè)經(jīng)驗,價格優(yōu)惠、服務(wù)專業(yè),歡迎來電咨詢建站服務(wù):18980820575
用CSS制作一個簡單的進(jìn)度條需要用到CSS中的基本知識,比如border-radius圓角,居中等等,如有不清楚的同學(xué)可以參考創(chuàng)新互聯(lián)的相關(guān)文章,或者訪問 CSS視頻教程,一定要把基礎(chǔ)學(xué)好??!
實例:用html和CSS制作一個簡單的靜態(tài)進(jìn)度條
HTML部分:
觀察進(jìn)度條可以發(fā)現(xiàn),進(jìn)度條由兩部分組成,一個是進(jìn)度條的總長度,一個是進(jìn)度的長度,所以我們創(chuàng)建兩個div,一個div作為父元素,另一個div作為子元素,并分別給他們一個class類名,便于對其設(shè)置樣式,具體代碼如下:
進(jìn)度條
70%
CSS部分:
基本框架已經(jīng)出來了,現(xiàn)在需要給兩個div設(shè)置樣式。將第一個div的長設(shè)置為300px,高設(shè)為30px,背景顏色設(shè)為#ddd,為了美觀,我們還可以用border-radius屬性將其變?yōu)閳A角。將第二個div的長設(shè)置為70%,也就是進(jìn)度條的值,給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%的綠色進(jìn)度條就制作好了。
看完了這篇文章,相信你對html和CSS制作一個靜態(tài)進(jìn)度條的示例有了一定的了解,想了解更多相關(guān)知識,歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道,感謝各位的閱讀!