效果图：

进度条代码：

<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. R-数据导入

    目录 键盘输入 导入文本文件 导入Excel文件 访问数据库管理系统 键盘输入 > mydata <- data.frame(age=numeric(0), gender=characte ...

  2. JS替换函数

    var id= id.replace(/\,/g, "','"); 记一下,

  3. 清除浮动（clearfix hack）

    eg:

  4. UI第四节——UIImageView详解

    - (void)viewDidLoad { // super调用是必须的 [super viewDidLoad]; UIImage *image = [UIImage imageNamed:@&quo ...

  5. 使用Ant部署应用程序系统

    1. 首先下载Ant http://ant.apache.org/ 配置环境变量 2. 编写build.xml部署文件如下: <?xml version="1.0" enco ...

  6. MongoDB的学习和使用

    一.下载mongodb. 官网下载, 或者http://www.360sdn.com/opensource-datasource/2015/0403/5584.html下载: http://fastd ...

  7. POJ3461——Oulipo

    1.题目大意:单字符串匹配问题 2.分析:经典KMP问题 存个模板QAQ #include <cstdio> #include <cstdlib> #include <c ...

  8. 在Android工程中运行main函数

    在main函数中右键 --> Run As --> Run Configurations.. Java Application中的类 --> Classpath --> Boo ...

  9. Opencv SkinOtsu皮肤检测

    void SkinRGB(IplImage* rgb, IplImage* _dst) { assert(rgb->nChannels == && _dst->nChann ...

  10. PyCharm 入手第一记

    因为我是忠实的Linux用户,所以一下操作是在Linux下的完成,除了下载,因为Linux的下载着实有点让人捉急. PyCharm 下载地址: http://www.jetbrains.com/pyc ...