效果图：

进度条代码：

<style type="text/css">

红色：background-color:f05153；border:1px solid #f05153

.dk-cgl .jdt-box i{position:absolute;display:block;left:0;top:0;height:100%;background-color:#BFEFFF}

.dk-cgl .jdt-box{position:relative;display:block;height:10px;font-size:0;line-height:0;margin:4px auto;border:1px solid #BFEFFF}

.dk-cgl{width:37%}

</style>
<td class='center'>${var.Z_TOTALCOMPLETE}/${var.Z_TOTALQUESTIONS}<span class="dk-cgl"><b class="jdt-box"><i style="width:${var.z_percent}%"></i></b>${var.z_percent}%</span></td>

<td class='center'>${var.Q_TOTALCOMPLETE}/${var.Q_TOTALQUESTIONS}<span class="dk-cgl"><b class="jdt-box"><i style="width:${var.q_percent}%"></i></b>${var.q_percent}%</span></td>

<td class='center'>${var.C_TOTALCOMPLETE}/${var.C_TOTALQUESTIONS}<span class="dk-cgl"><b class="jdt-box"><i style="width:${var.c_percent}%"></i></b>${var.c_percent}%</span></td>

div+css进度条的更多相关文章

  1. css 进度条

    <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8&quo ...

  2. css 进度条的文字根据进度渐变

    需求 1.进度条里面的文字需要根据进度的长度而变化 原理 用两个一模一样的样式的 div 重叠起来 效果 字体开始为 蓝色,跟随进度条变为 白色 在线预览: https://jsfiddle.net/ ...

  3. css进度条

    1.环形进度条 源码 <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> &l ...

  4. 纯css进度条,各种兼容

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD&g ...

  5. 纯css进度条效果

    <!--html代码--> <!DOCTYPE html> <html lang="zh"> <head> <meta cha ...

  6. bootstrap.css 进度条没有动画效果

    操作系统设置会影响浏览器的行为 Win+R 输入 sysdm.cpl ,3 打开 性能 的 设置 确保 窗口内动画控件和元素 被勾选

  7. css 实现进度条

    <select id="progress" onchange="changeProgress(this)"> <option value=&q ...

  8. 纯css使用线性渐变实现滚动进度条(来自于微信前端早读课）

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  9. 详解Bootstrap进度条组件

    在网页中,进度条的效果并不少见,如:平分系统.加载状态等,进度条组件使用了css3的transition和animation属性来完成一些特效,这些特效在IE9及IE9以下版本.Firefox的老版本 ...

随机推荐

  1. protect和private 的区别

    protect和private 的区别 public 表示全局,类内部外部子类都可以访问: private表示私有的,只有本类内部可以使用: protected表示受保护的,只有本类或子类或父类中可以 ...

  2. 如何给wordpress外部链接自动添加nofollow

    wordpress多作者博客可以丰富网站的内容,但同时也会产生一些无关的链接,例如有些投机的人会考虑在文章中随意添加外部链接,如果你不想给这些外部链接传递权重,你需要给这些外部链接加上 rel=&qu ...

  3. "A transport-level error has occurred when sending the request to the server,指定的网络名不在可用"的解决办法

    项目在外网服务器上运行的时候,遇到一个异常:"A transport-level error has occurred when sending the request to the ser ...

  4. java中线程分两种，守护线程和用户线程。

    java中线程分为两种类型:用户线程和守护线程. 通过Thread.setDaemon(false)设置为用户线程: 通过Thread.setDaemon(true)设置为守护线程. 如果不设置次属性 ...

  5. HDU 4803 Poor Warehouse Keeper

    题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=4803 解题报告:有一个记录器,一共有两个按钮,还有两行屏幕显示,第一行的屏幕显示的是数目,第二行的屏幕 ...

  6. 瀑布流js排列

    var _px = document.getElementById("px"); var con=document.getElementById("content&quo ...

  7. Codeforces 727 D T-shirts Distribution

    Description 有 \(6\) 种尺码的衣服,有的人只适合 \(1\) 种衣服,有的人适合相邻的 \(2\) 种,问是否存在合法方案,并输出. Sol 贪心. 首先,只适合 \(1\) 种衣服 ...

  8. Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法

    Tomcat异常 Multiple Contexts have a path of "/qqshl".解决方法 找到tomcat映射文件Service.xml,将文件中的conte ...

  9. redis3.0.0 集群安装详细步骤

    Redis集群部署文档(centos6系统) Redis集群部署文档(centos6系统) (要让集群正常工作至少需要3个主节点,在这里我们要创建6个redis节点,其中三个为主节点,三个为从节点,对 ...

  10. php for循环建数据

    $data = []; ; $i<; $i++) { $data[] = $i; } print_r($data); 执行后打印的结果为: Array ( [] => [] => [ ...