<!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. 【HDU5469】Antonidas（点分治，字符串哈希）

    [HDU5469]Antonidas(点分治,字符串哈希) 题面 HDU Vjudge 题解 啊哈?什么垃圾一眼点分治+Hash判断,哈哈哈哈哈,让我来码码码. 诶,怎么WA了.改改改改改. 诶,怎么 ...

  2. AtCoder Grand Contest 002

    AtCoder Grand Contest 002 A - Range Product 翻译 告诉你\(a,b\),求\(\prod_{i=a}^b i\)是正数还是负数还是零. 题解 什么鬼玩意. ...

  3. 洛谷 P1270 “访问”美术馆 解题报告

    P1270 "访问"美术馆 题目描述 经过数月的精心准备,Peer Brelstet,一个出了名的盗画者,准备开始他的下一个行动.艺术馆的结构,每条走廊要么分叉为两条走廊,要么通向 ...

  4. Centos7搭建redis集群及安装sentinel

    准备三个节点,系统版本为CentOS7.3 11.0.8.15 master 11.0.8.16 slave01 11.0.8.17 slave02 1.安装redis # yum install - ...

  5. redis协议

    Redis的通讯协议可以说大集汇了……消息头标识,消息行还有就行里可能还有个数据块大小描述.首先Redis是以行来划分,每行以\r\n行结束.每一行都有一个消息头,消息头共分为5种分别如下: (+) ...

  6. Redis学习基础二

    回顾:上一基础中已了解 ( 什么是redis .redis 的三大特点.安装,和数据配置) 接下来浅尝Redis的数据类型,时间煮雨...... 一.Redis数据类型 redis支持五中数据类型(s ...

  7. P4889 kls与flag

    P4889 kls与flag 一堆杆子, 每个有特定高度 \(a_{i}\) , 现想把杆子弄倒, 可以在一维内往左弄倒和往右弄倒, 求最大优秀对数, 定义优秀对数为两杆倒后顶点重合 Solution ...

  8. Hadoop生态圈-Hbase的协处理器(coprocessor)应用

    Hadoop生态圈-Hbase的协处理器(coprocessor)应用 作者:尹正杰 版权声明:原创作品,谢绝转载!否则将追究法律责任.

  9. Kafka 0.8 Consumer Rebalance

    1 Rebalance时机 0.10kafka的rebalance条件 条件1:有新的consumer加入 条件2:旧的consumer挂了 条件3:coordinator挂了,集群选举出新的coor ...

  10. Ubuntu14.04 Tab键自动补全

    Unbuntu14.04 终端中使用Tab键不能自动补全 解决方案 1.利用vi编辑器打开 /etc/bash.bashrc文件(需要root权限) sudo vi /etc/bash.bashrc ...