CSS3制作一个简单的进度条
2017-05-23 13:57
423 查看
这里只是一个小demo,一个用CSS3写的进度条。
如图所示:
具体代码如下:
如图所示:
具体代码如下:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <title> new document </title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="initial-scale=1"> <style> .process-bar { width:100px; display:inline-block; *zoom:1; } .pb-wrapper { border:1px solid #cfd0d2; position:relative; background:#cfd0d2; border-radius: 8px; } .pb-container { height:12px; position:relative; left:-1px; margin-right:-2px; font:1px/0 arial; padding:1px; } .pb-highlight { position:absolute; left:0; top:0; _top:1px; width:100%; opacity:0.6; filter:alpha(opacity=60); height:6px; background:white; font-size:1px; line-height:0; z-index:1 } .pb-text { width:100%; position:absolute; left:0; top:0; text-align:center; font:10px/12px arial; color:black; font:10px/12px arial } </style> </head> <body> <div class="process-bar skin-green"> <div class="pb-wrapper"> <div class="pb-highlight"></div> <div class="pb-container"> <div class="pb-text">50%</div> <div class="pb-value" style="height: 100%;width: 50%;background: #19d73d;border-radius: 8px;"></div> </div> </div> </div> </body> </html>
相关文章推荐
- 用Canvas制作一个简单的操作菜单
- [ASP.NET]制作一个简单的多页Tab功能
- 通过制作一个简单的时钟学习WPF中DispatcherTimer的使用 Level 100
- 昨天才会用VS2005制作一个非常非常简单的程序,有点晕啊!还是不会呢!
- 制作一个简单的WPF图片浏览器
- 怎样为你的Windows Live Writer制作一个简单的插件
- Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条
- 制作演示的福音,推荐屏幕录制软件:Adobe Captivate 2,特意使用这个录制一个简单的录制使用过程,让大家有直观印象
- installshield制作一个简单的vc++安装程序
- 用C#制作一个最简单的Web Service
- 用C#制作一个最简单的Web Service
- ASP.NET制作一个简单的等待窗口
- 一个简单的猜谜游戏的代码(高级用户界面制作)
- Asp+xml===》制作个简单的留言本 三个asp文件,与一个xml
- 制作一个简单的setup
- [ASP.NET]制作一个简单的多页Tab功能
- 组件制作之二(一个简单组件的制作过程)
- [ASP.NET]制作一个简单的多页Tab功能 -Ajax也可以按照这个来做
- 制作一个简单的天气预报
- Vml+Dhtml:制作一个应用渐变颜色效果不错的进度条