从品牌网站建设到网络营销策划,从策略到执行的一站式服务
这篇文章主要介绍如何使用CSS实现进度条,文中介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们一定要看完!
进度条是一个非常常见的功能,实现起来也不难,一般我们都会用div
来实现。
作为一个这么常见的需求, whatwg 肯定是不会没有原生组件提供(虽然有我们也不一定会用),那么就让我们来康康有哪些有意思的进度条实现方式。
这是比较常规的实现方式,先看效果:
源码如下:
这种方法的核心就是以当前盒子为容器,以 源码如下: 写完这个 demo 才发现, 另一个是因为range 有专属语意 —— 范围,所以它更适合做下面这种事: 以上demo来自:https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range 当然,上述两种方式都是模拟进度条,实际上我们并不需要模拟,因为whatwg 有为我们提供原生的进度条标签 —— 我们先看效果: 实现如下: 虽然有原生的进度条标签,但是规范里并没有规定它的具体表现,所以各个浏览器厂商完全可以按照自己的喜好去定制,样式完全不可控,所以标签虽好。。可用性却不强,有点可惜。 当然,能够实现进度条功能的标签,除了上面所说的,还有 代码如下: 这个标签可能比较陌生,实际上它跟 以上是“如何使用CSS实现进度条”这篇文章的所有内容,感谢各位的阅读!希望分享的内容对大家有帮助,更多相关知识,欢迎关注创新互联行业资讯频道!::before
为内容填充。用进阶版 — input type="range"
是一个非常实用的替换元素,不同的type 可以做不同的事情。第二种就是用
来实现的。首先我们来看看效果:
并不适合做这个功能。。一个是实现困难,这个type 组件的每个元件都可以单独修改样式,但是效果并不是很好。
高级版 — progress 鸭
。
终极版 — meter 赛高
标签。先看效果:
的语义是一样的,用来显示已知范围的标量值或者分数值。不一样的就是。。。它样式改起来更麻烦。
分享名称:如何使用CSS实现进度条-创新互联
网页网址:http://cdkjz.cn/article/iipsd.html
成都网站建设公司地址:成都市青羊区太升南路288号锦天国际A座10层 建设咨询028-86922220
成都快上网科技有限公司-四川网站建设设计公司 | 蜀ICP备19037934号 Copyright 2020,ALL Rights Reserved cdkjz.cn | 成都网站建设 | © Copyright 2020版权所有.
专家团队为您提供成都网站建设,成都网站设计,成都品牌网站设计,成都营销型网站制作等服务,成都建网站就找快上网! | 成都网站建设哪家好? | 网站建设地图