效果图：

进度条代码：

<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. 关于360的META设置，强制使用极速模式

    我的网站,为了使360浏览器打开时默认为极速模式,给用户良好的体验!避免网页由于细节而导致页面布局错乱~ <!DOCTYPE HTML> <html> <head> ...

  2. php连接mysql

    一.php连接mysql的函数 1.mysql_connect 作用:连接mysql eg:$con=mysql_connect('localhost','root','123456'); 2.mys ...

  3. CF #305(Div.2) D. Mike and Feet(数学推导）

    D. Mike and Feet time limit per test 1 second memory limit per test 256 megabytes input standard inp ...

  4. java遍历map的四种方式

    在Java中如何遍历Map对象 How to Iterate Over a Map in Java 在java中遍历Map有不少的方法.我们看一下最常用的方法及其优缺点. 既然java中的所有map都 ...

  5. 动态导入(import)和静态导入(import)的区别

    import static静态导入是JDK1.5中的新特性.一般我们导入一个类都用 import com.....ClassName;而静态导入是这样:import static com.....Cl ...

  6. JAVA-Excel文件操作

    使用环境:JAVA 1.8 一.安装 1.下载Poi包 Apache POI 当前最新稳定版本为3.14.下载poi-bin-3.14.zip即可. 2.将下载下来的压缩包解压,将其中的所有jar文件 ...

  7. Java项目相关监控与调优

    Linux  JVM Tomcat =========Linux =============== 监控 nmon  命令:nmon -s 10 -c 60 -f -m /home -s 10 每10s ...

  8. Android学习笔记（二十一）——实战：程序数据共享

    //此系列博文是<第一行Android代码>的学习笔记,如有错漏,欢迎指正! 我们继续在Database项目的基础上继续开发,通过内容提供器来给它加入外部访问接口.首先将 MyDataba ...

  9. [codevs1380]没有上司的舞会（[BZOJ2060][Usaco2010 Nov]Visiting Cows 拜访奶牛）

    [codevs1380]没有上司的舞会 试题描述 Ural大学有N个职员,编号为1~N.他们有从属关系,也就是说他们的关系就像一棵以校长为根的树,父结点就是子结点的直接上司.每个职员有一个快乐指数.现 ...

  10. 剑指Offer 替换空格

    题目描述 请实现一个函数,将一个字符串中的空格替换成“%20”.例如,当字符串为We Are Happy.则经过替换之后的字符串为We%20Are%20Happy.   思路: 替换空格,先遍历一遍记 ...