文档章节

后端程序员的前端修炼01~纯html+css搞定简单进度条

山东-小木
 山东-小木
发布于 05/14 21:37
字数 328
阅读 58
收藏 0

在很多项目中我们前端页面要用到行内的进度条展示一些数据百分比和进度之类的样式。

例如下图:订单的时段分析

image.png

我们想使用更直观的方式去体现比例值或者进度,那么在不用js组件的情况下,我们是如何用两个span标签加上几行css搞定的呢?

让小木来告诉你,程序员做前端很容易,进度条这种组件,简单的就是两个分层而已,一层颜色显示总体长度,上层颜色显示当前进度比例值,颜色一区分,效果就出来了。

先看看代码,第一层class=“percent”是一个长度为100px的span 给一个底色

image.png

 

再看上层的绿色进度部分 class="inner" 长度是一个不确定的值 比例是多少 长度就是多少 这样就能体现出百分比效果了。

image.png

 

按照这样的思路 各位可以实现自己的简单进度显示了,如果想要更高级,可以配合css3动画或者js 进行升级,程序员轻松应对前端,很easy!;

© 著作权归作者所有

共有 人打赏支持
山东-小木

山东-小木

粉丝 214
博文 43
码字总数 26904
作品 1
东营
CEO
加载中

评论(2)

山东-小木
山东-小木

引用来自“JFinal”的评论

十分简洁的实现,可以再推广为动态变动的效果,用 js 控制一下 inner 的 width 值就可以了

是滴,js控制数值就可以做成动态的了
JFinal
JFinal
十分简洁的实现,可以再推广为动态变动的效果,用 js 控制一下 inner 的 width 值就可以了
"前端"碎碎念

看看前端圈子里,各种技术、理论,在这两年烈火烹油,花了众人眼。前端似乎这也能做,那也能搞,但是到底何为前端呢? 个人定义:前端,就是浏览器端。不管前端怎样发展,一定是比后端简单的...

佣兵0926
2016/01/23
133
0
【天赢金创】前后分离架构的探索之路

大约五年前,那时候我还是一个小小讲师(苹果 AATC 培训认证),完全不懂编程为何物的菜鸟,一个偶然的机会让我进入了公司的开发部门,任职什么呢?用户体验设计师,原因很操蛋——我以前干过...

第三方支付接口
2015/09/21
41
0
互联网项目经理工作到底是一种什么样的体验?

  一阶段:1个程序员   好吧!程序员就听老板口述做开发,想想就可怕。这种情况最好就是老板自己当程序员,否则脾气不好会打架。   二阶段:2-5人的小技术团队   下面三种情况都可以...

程序员客栈
2016/04/27
13
0
小蚂蚁学习Bootstrap(1)——导航条的设置和下拉菜单

久闻Bootstrap的大名,也没有亲手实践过,真是让人手痒的。这也难怪,后端的逻辑往往忙活的令人不可开交,平时几乎没有机会来做前端的东西。前两天在动弹里看到有人吐槽,话说什么一个java程...

嗜学如命的小蚂蚁
2015/11/07
0
2
推荐几个IT编程技术高效学习工具,总有你所需

  点击上方“java进阶架构师”,选择右上角“置顶公众号”   20大进阶架构专题每日送达      一路走来,从小学到大学,到工作,为什么有的人学习效率高?进步更快?为什么别人比你优...

java进阶架构师
09/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

可爱的python测试开发库(python测试开发工具库汇总)

欢迎转载,转载请注明来源: github地址 谢谢点赞 本文地址 相关书籍下载 测试开发 Web UI测试自动化 splinter - web UI测试工具,基于selnium封装。 链接 selenium - web UI自动化测试。 链...

python测试开发人工智能安全
53分钟前
2
0
Shiro | 实现权限验证完整版

写在前面的话 提及权限,就会想到安全,是一个十分棘手的话题。这里只是作为学校Shiro的一个记录,而不是,权限就应该这样设计之类的。 Shiro框架 1、Shiro是基于Apache开源的强大灵活的开源...

冯文议
今天
1
0
linux 系统的运行级别

运行级别 运行级别 | 含义 0 关机 1 单用户模式,可以想象为windows 的安全模式,主要用于修复系统 2 不完全的命令模式,不含NFS服务 3 完全的命令行模式,就是标准的字符界面 4 系统保留 5 ...

Linux学习笔记
今天
2
0
学习设计模式——命令模式

任何模式的出现,都是为了解决一些特定的场景的耦合问题,以达到对修改封闭,对扩展开放的效果。命令模式也不例外: 命令模式是为了解决命令的请求者和命令的实现者之间的耦合关系。 解决了这...

江左煤郎
今天
3
0
字典树收集(非线程安全,后续做线程安全改进)

将500W个单词放进一个数据结构进行存储,然后进行快速比对,判断一个单词是不是这个500W单词之中的;来了一个单词前缀,给出500w个单词中有多少个单词是该前缀. 1、这个需求首先需要设计好数据结...

算法之名
昨天
15
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部