<!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. HDFS问题集（一），使用命令报错：com.google.protobuf.ServiceException:java.lang.OutOfMemoryError:java heap space

    仅个人实践所得,若有不正确的地方,欢迎交流! 一.起因 执行以下两条基本的HDFS命令时报错 hdfs dfs -get /home/mr/data/* ./ hdfs dfs -ls /home/m ...

  2. 【ARC083E】Bichrome Tree

    Description ​ 给一棵\(n\)个节点的树,和一个长度同样为\(n\)的非负整数序列\(x_i\). ​ 请尝试对每个节点染黑或白两种颜色,并确定一个非负整数权值. ​ 问是否存在一种方案 ...

  3. harbor的日常管理

    有情提示:docker-compose需要在 docker-compose.yml 存放的目录下执行. 1.Stopping Harbor: #docker-compose stop Stopping ...

  4. Android 如何从应用返回待机界面(HOME)

    Intent mIntent = new Intent(); mIntent.setAction(Intent.ACTION_MAIN); mIntent.addCategory(Intent.CAT ...

  5. 解题：CF983B pyramid

    题面 题目都告诉我们是“金字塔”了,不妨分析分析$f$的性质 $f(a_1,a_2)=f(a_1$ $xor$ $a_2)=a1$ $xor$ $a_2$ $f(a_1,a_2,a_3)=f(a_1$ ...

  6. 菜鸟合作伙伴日志接入规范之C#实现

    由于行业的业务功能需要,需要与菜鸟对接登录日志,将我们系统的用户登录信息提交给菜鸟,菜鸟分析通过分析日志,检查存在的一些安全问题.根据菜鸟提供的标准,实现了C#的接入,下面分享给大家,让需要的朋友少走 ...

  7. 【线段树】【P4198】 楼房重建

    Description 小A在平面上(0,0)点的位置,第i栋楼房可以用一条连接(i,0)和(i,Hi)的线段表示,其中Hi为第i栋楼房的高度.如果这栋楼房上任何一个高度大于0的点与(0,0)的连线没 ...

  8. 深入剖析linq的联接

    内联接 代码如下 from a in new List<string[]>{ ]{"张三","男"}, ]{"李四"," ...

  9. SpringBoot + WebSocket 开发笔记

    1. 服务端的实现,我尝试了两种方式: 第一种是用“@ServerEndPoint”注解来实现,实现简单: 第二种稍显麻烦,但是可以添加拦截器在WebSocket连接建立和断开前进行一些额外操作. 不 ...

  10. 跨域ajax请求携带cookie

    通过withCredentials 方式: getCompanySubject: function () { return axios.get(this.apiUrls.getCompanySubje ...