css实现百分比进度条
2016-07-25 10:33
656 查看
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>测试</title> <style type="text/css"> .Bar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; } .Bar div{ display: block; position: relative; background:peachpuff;/* 进度条背景颜色 */ color: #333333; height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */ } .Bar div span{ position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; } </style> </head> <body> 百分比进度条样式: <div class="Bar"> <div style="width:70%;"> <span>70%</span> </div> </div> </body> </html>
相关文章推荐
- HTML&CSS基础学习笔记1.17-表格的头部与尾部
- css实现鼠标放到图片旋转效果
- 自定义Dialog样式 虚拟键盘的隐藏 TextView的图标
- css3 如何实现圆边框的渐变
- CSS深入理解之margin
- 前端开发:css技巧,如何设置select、radio 、 checkbox 、file这些不可直接设置的样式 。
- QPainter就是手里的作图工具,只需要三洋东西:笔(颜色,宽度,样式),字体(写字),刷子(大面积作画),这里有三个典型例子
- css input[type=file] 样式美化,input上传按钮美化
- css3记录
- CSS样式,雪碧,图片替换,渐变小析
- css伪类选择器详细解析及案例使用-----伪类选择器(2)
- [php入门] 5、初学CSS从中记下的一些基础点(For小白)
- CSS 定位规则之 BFC
- DW——CSS——3D环境
- 前端基本功—CSS 实战第二天
- 9个优秀的CSS框架
- css中px,em和rem的区别要弄清楚
- bootcss编辑
- 鼠标移动实现样式改变
- 鼠标移动实现样式改变