<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT="">

<style>

body { font-size: 12px; }

#n { margin:10px auto; width:920px; border:1px solid #CCC;	 font-size:14px; line-height:30px; }

#n a { padding:0 4px; color:#333 }

.Bar ,.Bars { position: relative; width: 200px;		/* 宽度 */ border: 1px solid #B1D632; padding: 1px; }

.Bar div,.Bars div { display: block; position: relative;

background:#00F;/* 进度条背景颜色 */ color: #333333;	 height: 20px; /* 高度 */ line-height: 20px;	  /* 必须和高度一致，文本才能垂直居中 */ }

.Bars div{ background:#090}

.Bar div span,.Bars div span { position: absolute; width: 200px;	 /* 宽度 */ text-align: center; font-weight: bold; }

.cent{ margin:0 auto; width:300px; overflow:hidden} </style></HEAD>

<BODY>

<div class="cent">

<p> 百分比进度条样式: </p>

<p>

<div class="Bar"> <div style="width: 50%;">        <span>50%</span>    </div></div> </p>

<p> <div class="Bar">     <div style="width: 80%;">         <span>80%</span>     </div> </div> </p>

<p> <div class="Bars">     <div style="width: 33%;">         <span>33%</span>     </div> </div> </p>

</div>

</BODY></HTML>

　　

纯css进度条,各种兼容的更多相关文章

  1. 纯css进度条效果

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

  2. css 进度条

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

  3. 纯css实现省略号，兼容火狐，IE9，chrome

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

  4. div+css进度条

    效果图: 进度条代码: <style type="text/css"> 红色:background-color:f05153:border:1px solid #f05 ...

  5. JS框架_(JQuery.js)纯css3进度条动画

    百度云盘 传送门 密码:wirc 进度条动画效果: <!DOCTYPE html> <html lang="zh"> <head> <me ...

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

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

  7. css进度条

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

  8. 纯css制作带三角(兼容所有浏览器)

    如何用 border 来制作三角. html 代码如下: 代码如下: <div class="arrow-up"></div> <div class= ...

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

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

随机推荐

  1. [LOJ3052] [十二省联考 2019] 春节十二响

    题目链接 LOJ:https://loj.ac/problem/3052 洛谷:https://www.luogu.org/problemnew/show/P5290 BZOJ:https://www ...

  2. 查看Mysql正在执行的事务、锁、等待

    一.关于锁的三张表(MEMORY引擎) ## 当前运行的所有事务 mysql> select * from information_schema.innodb_trx\G; ********** ...

  3. BZOJ 3524 Couriers | 主席树

    BZOJ 3524 Couriers 题意 求一个区间内出现超过区间长度的一半的数,如果没有则输出0. 题解 我可能太菜了吧--这道题愣是没想出来-- 维护权值主席树,记录每个数都出现过多少次: 查询 ...

  4. hdu6057 Kanade's convolution 【FWT】

    题目链接 hdu6057 题意 给出序列\(A[0...2^{m} - 1]\)和\(B[0...2^{m} - 1]\),求所有 \[C[k] = \sum\limits_{i \; and \; ...

  5. wazhu之agent功能详解

      一.日志数据收集 日志数据收集是从服务器或设备生成的记录中收集的实时过程.此组件可以通过文本文件或Windows事件日志接收日志.它还可以通过远程syslog直接接收日志,这对防火墙和其他此类设备 ...

  6. Webpack 学习笔记总结

    Webpack安装 Linux系统默认已经安装了node&npm,但版本比较低,而且没法升级,可以重新下载Node然后通过软链接替换系统自带的node和npm; ln -s /path_to/ ...

  7. 【数学】【CF1091D】 New Year and the Permutation Concatenation

    Description 给定一个数 \(n\),将所有 \(1~\sim~n\) 的排列按照字典序放到一个序列中,求有多少长度为 \(n\) 的子序列 \(p_i~p_{i+1}~\dots~p_{i ...

  8. 字符串连接比较(std::unique_ptr实现)

    比较代码之间可能相差大,可是速度相差很大,而且目的在于测试unique_ptr使用...; C/C++: #include <iostream> std::unique_ptr<ch ...

  9. 三、Linux学习之命令基本格式篇

    一.命令格式 命令 [选项] [参数] 注意: 1.和别命令使用不遵循此格式 2.当有多个选项时,可以写在一起 3.简化选项与完整选项(-a 等价于--all) 4.中括号为可选,意思是可以有可以没有 ...

  10. 视音频数据处理入门：H.264视频码流解析

    ===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...