<!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. HDU.5692 Snacks ( DFS序 线段树维护最大值 )

    HDU.5692 Snacks ( DFS序 线段树维护最大值 ) 题意分析 给出一颗树,节点标号为0-n,每个节点有一定权值,并且规定0号为根节点.有两种操作:操作一为询问,给出一个节点x,求从0号 ...

  2. Vulkan vs OpenGL ES

    Vulkan 简介 Vulkan是一个免费开放的.跨平台的.底层的图形API,在一定程度上比AMD Mantle.微软DirectX 12.苹果Metal更值得开发者关注. Vulkan的最大任务不是 ...

  3. Android ProgressBar的使用

    Android 基础教程之-------Android ProgressBar的使用http://blog.csdn.net/Android_Tutor/article/details/5695170 ...

  4. 解题：CF570D Tree Requests

    题面 DSU on tree确实很厉害,然后这变成了一道裸题(逃 还是稍微说一下流程吧,虽然我那个模板汇总里写过 DSU on tree可以以$O(n\log n)$的复杂度解决树上子树统计问题,它这 ...

  5. 数据库之SQLite的介绍与使用20180705

    一.SQLite 简介 1.介绍 SQLite,是一款轻型的数据库,是遵守ACID的关系型数据库管理系统,它包含在一个相对小的C库中.它是D.RichardHipp建立的公有领域项目.它的设计目标是嵌 ...

  6. apt代理设置

    内网apt使用代理 /etc/apt/apt.conf Acquire::http::Proxy "http://guest:password@ip:port";

  7. 博世传感器调试笔记（一）----加速度传感器BMA253

    公司是bosch的代理商,最近一段时间一直在公司开发的传感器demo板上调试bosch sensor器件.涉及到的器件有7,8款,类型包括重力加速度.地磁.陀螺仪.温度.湿度.大气压力传感器等.在调试 ...

  8. 完美解决github访问速度慢

    1. 解决方法 2.解决方法 1. 修改本地hosts文件 windows系统的hosts文件的位置如下:C:\Windows\System32\drivers\etc\hosts mac/linux ...

  9. codevs 3327 选择数字

    3327 选择数字  时间限制: 1 s  空间限制: 256000 KB 题目描述 Description 给定一行n个非负整数a[1]..a[n].现在你可以选择其中若干个数,但不能有超过k个连续 ...

  10. Docker中执行Shell出现乱码

    问题描述 最近遇到一个问题: 执行命令 docker exec f4af9b sh -c 'bash /tmp/build.sh' 命令在docker中执行shell,会出现中文乱码的问题.但是在do ...