文档章节

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

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

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

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

image.png

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

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

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

image.png

 

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

image.png

 

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

© 著作权归作者所有

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

山东-小木

粉丝 228
博文 48
码字总数 29892
作品 1
东营
CEO
私信 提问
加载中

评论(2)

山东-小木
山东-小木

引用来自“JFinal”的评论

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

是滴,js控制数值就可以做成动态的了
JFinal
JFinal
十分简洁的实现,可以再推广为动态变动的效果,用 js 控制一下 inner 的 width 值就可以了
议:如何做好项目管理

本人在一家针对校园互联网公司上班,因直接上司离职,其负责的项目全部由我接手,以前是做过管理之类的开发工作,但也只有3,4人左右,同时也是很传统的金融项目。 此次接手的是互联网金融、...

暖风醉意
2016/03/08
1
0
"前端"碎碎念

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

佣兵0926
2016/01/23
133
0
HTML+CSS+JAVASCRIPT 高仿低配网页版网易云音乐播放器

前言 没有使用任何框架,只是想用最简单纯js的代码实现下 前台: Javascript+jQuery 后台: php/nodejs(php是参考网上的例子写的,nodejs代码是在php的基础上重新写的) 还有她的姊妹篇(网易...

Yangfan
2018/10/29
0
0
【天赢金创】前后分离架构的探索之路

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

第三方支付接口
2015/09/21
41
0
北京东方网力诚聘HTML+CSS,Rails,js,as,java程序员

北京东方网力公司(http://www.netposa.com)诚聘HTML+CSS前端设计人员,Rails程序员,javascript程序员,actionscript程序员,java程序员等进行企业软件开发,包括办公自动化、项目管理、视频会议...

Imy
2011/02/13
439
0

没有更多内容

加载失败,请刷新页面

加载更多

数据库篇多表操作

第1章 多表操作 实际开发中,一个项目通常需要很多张表才能完成。例如:一个商城项目就需要分类表(category)、商品表(products)、订单表(orders)等多张表。且这些表的数据之间存在一定的关系...

stars永恒
今天
2
0
nginx日志自动切割

1.日志配置(Nginx 日志) access.log----记录哪些用户,哪些页面以及用户浏览器,IP等访问信息;error.log------记录服务器错误的日志 #配置日志存储路径:location / {      a...

em_aaron
昨天
3
0
java 反射

基本概念 RTTI,即Run-Time Type Identification,运行时类型识别。RTTI能在运行时就能够自动识别每个编译时已知的类型。   要想理解反射的原理,首先要了解什么是类型信息。Java让我们在运...

细节探索者
昨天
2
0
推荐转载连接

https://www.cnblogs.com/ysocean/p/7409779.html#_label0

小橙子的曼曼
昨天
3
0
雷军亲自打造的套餐了解下:用多少付多少

12月28日消息,小米科技创始人兼CEO雷军微博表示,小米移动任我行套餐方案,原则上就是明明白白消费,用多少付多少,不用不花钱!上网、电话和短信都是一毛钱,上网0.1元/M,电话0.1元/分钟,...

linuxCool
昨天
6
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部