<!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. BZOJ 4802 欧拉函数

    4802: 欧拉函数 Description 已知N,求phi(N) Input 正整数N.N<=10^18 Output 输出phi(N) Sample Input 8 Sample Outp ...

  2. hdu 6311 欧拉回路

    题意:求一个图(不一定联通)最小额外连接几条边,使得可以一笔画出来 大致做法 1.找出联通块 2.统计每一个连通块里面度数为奇数的点的个数, 有一个性质 一个图能够用一笔画出来,奇数点的个数不超过2个 ...

  3. D65光源

    D65光源是标准光源中最常用的人工日光,其色温为6500K.英文名:Artificial Daylight 6500K.标准光源箱中的D65光源是模拟人工日光,保证在室内.阴雨天观测物品的颜色效果时, ...

  4. ajax的坑

    $('#mkcode').on('click',function(){ $.ajax({ type : 'POST', url : '__URL__/mkcode', data : {}, dataT ...

  5. IOS TableView滑动不灵敏问题

    TableView的默认的不常用的属性,我们尽量不要去改,如下面标注的几个

  6. MySQL学习(一)——Java连接MySql数据库

    MySQL学习(一)——Java连接MySql数据库 API详解: 获得语句执行 String sql = "Insert into category(cid, cname) values( ...

  7. 容器启动报iptables错误

    # systemctl stop docker # iptables -t nat -F # ifconfig docker0 down # brctl delbr docker0   # 命令由br ...

  8. 介绍一个基于jQuery的Cookie操作插件

    在网页客户端,我们经常会遇到读取或者设置cookie的情况,如果用纯生的js我们可能会遇到一些兼容性带来的麻烦,这里给大家介绍一个比较实用jquery操作cookie的插件,插件的源代码如下: jQu ...

  9. LintCode 35: Reverse Linked List

    LintCode 35: Reverse Linked List 题目描述 翻转一个链表. 样例 给出一个链表1->2->3->null,这个翻转后的链表为3->2->1 ...

  10. python加速包numba并行计算多线程

    1.下面直接上代码需要注意的地方numba的官网找到 1)有一些坑自己去numba的官网找找看,下面是我的写的一个加速的程序,希望对你有帮助. #coding:utf-8 import time fr ...