如何用HTML5制作进度条方法教程
进度条是指网络上文件、上传下载与浏览网页的可视化显示条。用HTML5制作,可以简练代码,防止网页冗余,下面,就让我们一起学习如何用H5制作一个即简单又美观的进度条吧
操作方法
- 01
先在<body>标签里面嵌入一个<progress>标签,max最大值设置为100,value为20,运行程序,结果如图
- 02
运行程序,结果如图
- 03
用CSS样式为<progress>标签设置大小,代码如下图3 运行程序,结果如图
- 04
运行程序,结果如图
- 05
看上面的运行结果,在CSS样式里面设置了背景颜色为红色,程序显示并无变化,原因是HTML5与各浏览器的兼容性各不相同,那如何来改变兼容性问呢?下面以谷歌浏览器为例: 在CSS样式表增加一组progress::-webkit-process-value{}样式,背景颜色为红色,如图
- 06
运行程序,看下结果与前面的有什么不同?
- 07
除了改变滑块以后,我们还可以改进整个进度条样式,代码如下图
- 08
最后运行程序,就能得到基础的内存条样式了。
- 09
用图片做背景,可以让进度条更华丽。
赞 (0)