效果图：

进度条代码：

<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. C/C++使用HTTP协议上传

    上传文件: http://zengrong.net/post/2088.htm #include <stdio.h> #include <string.h> #include ...

  2. 【Solr】 solr对拼音搜索和拼音首字母搜索的支持

    问:对于拼音和拼音首字母的支持,当你在搜商品的时候,如果想输入拼音和拼音首字母就给出商品的信息,怎么办呢? 实现方式有2种,但是他们其实是对应的.  用lucene实现 1.建索引, 多建一个索引字段 ...

  3. Ansible简明使用手册

            Ansible使用简明手册 1.简介 ansible是新出现的自动化运维工具,基于Python开发,集合了众多运维工具(puppet.cfengine.chef.func.fabric ...

  4. OC第六节—— 继承与类别

    1.继承:    父类和子类的关系.    1.1 生活中的继承        父类           子类           父类              子类                 ...

  5. wordpress不用插件实现Pagenavi页面导航功能

    Pagenavi 是一个很好的功能,现在 WordPress 博客一般都是使用 WP-Pagenavi 插件来实现,但是如果插件一多的话整个wordpress效率就降低了,我们力求用尽量少的插件来实现 ...

  6. LUXURY 7

    A.Little Pony and Expected Maximum Time Limit:1000MS     Memory Limit:262144KB     64bit IO Format:% ...

  7. mongoDB－－1 概念

    1.结构 (1)关系型数据库,数据库,对应mongo中的,数据库 (2)关系型数据库,表,对应mongo中的,集合 (3)关系型数据库,一条记录,对应mongo中的,一个文档(是一条json结构的数据 ...

  8. 【转】phpcms授课学习

    来自:http://blog.csdn.net/yanhui_wei/article/category/1220735 <?php 思路: 一.目前在企业中使用比较多的cms内容管理有如下几种: ...

  9. linux 下安装ftp服务器

    最后重启    # service vsftpd restart   1.查看是否安装vsftp rpm -qa | grep ftp 如果出现    vsftpd-2.0.5-16.el5_5.1 ...

  10. Java Io（数据输入输出流）

    Java Io 字节流中的DataInputStream 和 DataOutputStream,使用流更加方便,是流的一个扩展,更方便读取int, long,字符等类型数据. 事例代码如下: pack ...