纯DIV+CSS百分比进度条
来源:互联网 发布:集贤一中网络 编辑:程序博客网 时间:2024/05/16 19:10
纯DIV+CSS百分比进度条实现如下(支持chrome、IE)
<!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>
1 0
- 纯DIV+CSS百分比进度条
- div+css 百分比进度条
- 纯DIV+CSS实现进度条
- css实现百分比进度条
- 进度条动画(纯css)
- css+div模拟进度条
- div+css进度条
- 纯CSS+DIV对联
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- 纯css实现进度条效果
- css+div中的百分比自适应宽度格局
- 百分比进度条
- 几款漂亮的纯css进度条
- 用纯css做环形进度条
- 点击变input编辑内容,点击变下拉框
- 【数据结构】: 树状数组 (Binary Indexed Trees)
- 【Leetcode长征系列】Swap Nodes in Pairs
- Android--Intent和Intent Filters
- GridView中使用CheckBox
- 纯DIV+CSS百分比进度条
- 链路层常见报文格式及长度
- eoe源码阅读(一)
- 计算机视觉
- java socket通信总结笔记2——Socket和ServerSocket
- 一致性哈希算法
- 社交网络feed系统浅析
- 60行代码:Javascript 写的俄罗斯方块游戏
- Matlab计算机视觉/图像处理工具箱推荐