效果图：

进度条代码：

<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. 利用PHP从淘宝采集评论和成交数据

    如果不想通过淘宝开放平台API获取数据,那么另外一个很好的办法就是采集了.一般来说,采集一个网页上的内容,只需要用CURL获取源代码,然后用正则表达式取出需要的内容就可以,不过如果这样载入一个淘宝的页 ...

  2. 7个Linux和Ubuntu下的免费CSS编辑器

    一个好的编辑器是世界上所有程序员和web开发人员梦寐以求的东西.代码编辑器和集成开发环境是程序员工作时的左膀右臂.还在纠结使用什么编辑器么?下面我们将推荐7个主要用于Linux操作系统的免费CSS代码 ...

  3. GridView控件隐藏列

    GridView隐藏列visible="false" 后你就无法取得这列的值了 下面是迄今为止最简洁的解决方法了. protected void GVList_RowDataBou ...

  4. 一道Twitter面试题

    在微博上看到的这个问题,忍住没看答案自己解决了.建议没看过的同学也自己先尝试下. “看下面这个图片” 在这个图片里我们有不同高度的墙.这个图片由一个整数数组所代表,数组中每个数是墙的高度.上边的图可以 ...

  5. PHP封装一个通用好用的文件上传处理类

    封装一个文件上传类完成基本功能如下: 1.可上传多个或单个文件 2.上传成功返回一个或多个文件名 3.上传失败则返回每个失败文件的错误信息 上传类中的基本功能: 1.构造参数,用户可以自定义配置参数, ...

  6. 在 Ubuntu 16.04 上安装 LEMP 环境之图文向导

    导读 LEMP 是个缩写,代表一组软件包(注解 ① L:Linux OS,E:Nginx 网络服务器,M:MySQL/MariaDB 数据库和 P:PHP 服务端动态编程语言),它被用来搭建动态的网络 ...

  7. C++笔试题（转）

    http://blog.csdn.net/hxz_qlh/article/details/16864567 这里面列举的题考察的东西都非常细,包括strcpy,字符串,大.小端的判断,很容易犯错,值得 ...

  8. Python 学习笔记四

    接着三继续写http://www.cnblogs.com/dzzy/p/5295019.html 文件和函数操作: from sys import argv script,input_file=arg ...

  9. zend framework2 入门实例代码album模型

    下载album模型 一.目录结构说明 - zf_project - config    - autoload      global.php    -- 数据库在这里配置      local.php ...

  10. IOS路线图

    存档,存档...