<!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. 【uoj131】 NOI2015—品酒大会

    http://uoj.ac/problem/131 (题目链接) 题意 给出一个字符串,每个后缀有一个权值${a_i}$,这些后缀两两之间存在公共前缀.问能够组成长度从0~n-1的公共前缀的后缀的方案 ...

  2. linux内核设计与实现一书阅读整理 之第十八章

    CHAPTER 18 调试 18.1 准备开始 需要的是准备是: - 一个bug - 一个藏匿bug的内核版本 - 相关内核代码的知识和运气 重点: 想要成功的进行调试,就取决于是否能让这些错误重现. ...

  3. response.sendRedirect()和request.getRequestDispatcher().forward(request,response)的区别

    转发方式:request.getRequestDispatcher().forward(); 重定向方式:response.sendRedirect();  下面是HttpServletRespons ...

  4. 导入eclipse工程到Android Studio中

    ref:从 Eclipse 迁移至 Android Studio | Android Studiohttps://developer.android.com/studio/intro/migrate. ...

  5. bzoj2758【scoi2012】Blinker的的噩梦

    题目描述 一天Blinker醒来,发现自己成为了一个二维世界的点,而且被标记上了一个奇怪的值. 这个世界是由N个边界互不相交(且不相切)的图形组成,这里图形仅包括圆和凸多边形.每个图形还有一个权值.每 ...

  6. python之旅：面向对象的程序设计

    一 面向对象的程序设计的由来 面向对象设计的由来见概述:http://www.cnblogs.com/moyand/p/8784210.html 二 什么是面向对象的程序设计及为什么要有它 面向过程的 ...

  7. php 性能优化

    php 性能测试工具 ab(Apache Benchmark) ab 是由 Apache 提供的压力测试软件.安装 apache 服务器时会自带该压测软件. 如何使用: ab -n1000 -c100 ...

  8. Xpath语法与lxml库的用法

    BeautifulSoup 已经是非常强大的库了,不过还有一些比较流行的解析库,例如 lxml,使用的是 Xpath 语法,同样是效率比较高的解析方法. 1.安装 pip install lxml 2 ...

  9. python的tuple()元组数据类型的使用方法以及案例

    一.元组的概念介绍 1.元组是列表的二次加工 列表可以被修改 列表的类型 list li = [1,2,3,4,5,6] 2.元组的元素不可被修改,不能被增加或者删除,(只是针对元组的一级元素是不可以 ...

  10. Ubuntu如何同步网络时间

    解决方法: 1.安装ntpdate工具 apt-get install ntpdate 2.将系统时间与网络同步 ntpdate cn.pool.ntp.org 3.将时间写入硬件 hwclock - ...