如何用HTML5制作進度條方法教程
進度條是指網絡上文件、上傳下載與瀏覽網頁的速度顯示，用HTML5制作度，即可以簡練代碼，防止網頁冗余，下面，就讓我們一起學習如何用H5制作一個即簡單又美觀的進度條吧
工具/材料
電腦
開發者工具（webstorm）IE 谷歌瀏覽器等
操作方法
-
01
先在<body>標簽里面嵌入一個<progress>標簽，max最大值設置為100，value為20，運行程序，結果如圖
-
02
運行程序，結果如圖
-
03
用CSS樣式為<progress>標簽設置大小,代碼如下圖3
運行程序，結果如圖 -
04
運行程序，結果如圖
-
05
看上面的運行結果，在CSS樣式里面設置了背景顏色為紅色，程序顯示并無變化，原因是HTML5與各瀏覽器的兼容性各不相同，那如何來改變兼容性問呢？下面以谷歌瀏覽器為例：
在CSS樣式表增加一組progress::-webkit-process-value{}樣式，背景顏色為紅色，如圖 -
06
運行程序，看下結果與前面的有什么不同？
-
07
除了改變滑塊以后,我們還可以改進整個進度條樣式,代碼如下圖
-
08
運行程序，結果如圖
- End
特別提示
-webkit 是用來設置谷歌瀏覽器的兼容性的
設置瀏覽器兼容性時注意progress后面必須加兩個冒號
- 發表于 2017-10-18 00:00
- 閱讀 ( 823 )
- 分類：電腦網絡
admin
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章