如何用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
- 阅读 ( 842 )
- 分类：电脑网络
admin
0 篇文章
作家榜 »
-
xiaonan123
189 文章
-
汤依妹儿
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
华志健
23 文章