文档章节

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

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

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

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

image.png

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

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

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

image.png

 

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

image.png

 

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

© 著作权归作者所有

共有 人打赏支持
山东-小木
粉丝 204
博文 43
码字总数 27191
作品 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
前端下载文件成功后执行回调的方法

在项目中经常会有下载文件的需求,大多数时候我都是一个a标签或者window.location.href = "";一行代码搞定,但是最近有一个文件下载需求,因为下载的文件有点大,所以速度确实慢,基本以10m...

消散了的诗意
昨天
0
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

day58-20180816-流利阅读笔记-待学习

苹果市值破万亿,iPhone 会涨价吗? Lala 2018-08-16 1.今日导读 苹果教父乔布斯曾经说过:“活着就是为了改变世界。”虽然他在 56 岁时就遗憾离世,但他极具创新和变革的精神早已深埋进苹果...

aibinxiao
18分钟前
4
0
[雪峰磁针石博客]python3快速入门教程1 turtle绘图-2函数

菲波那契序列: >>> # Fibonacci series:... # the sum of two elements defines the next... a, b = 0, 1>>> while b < 10:... print(b)... a, b = b, a+b...112......

python测试开发人工智能安全
今天
0
0
java环境变量配置最正确的方式

原贴:https://blog.csdn.net/qq_40007997/article/details/79784711,十分详细,亲测有效

kitty1116
今天
0
0
49.Nginx防盗链 访问控制 解析php相关 代理服务器

12.13 Nginx防盗链 12.14 Nginx访问控制 12.15 Nginx解析php相关配置(502的问题) 12.16 Nginx代理 扩展 502问题汇总 http://ask.apelearn.com/question/9109 location优先级 http://blog....

王鑫linux
今天
2
0
Nginx防盗链、访问控制、解析php相关配置、Nginx代理

一、Nginx防盗链 1. 编辑虚拟主机配置文件 vim /usr/local/nginx/conf/vhost/test.com.conf 2. 在配置文件中添加如下的内容 { expires 7d; valid_referers none blocked server_names *.tes......

芬野de博客
今天
1
0

没有更多内容

加载失败,请刷新页面

加载更多

下一页

返回顶部
顶部