您的位置:CSS主页 > CSS模块 >

纯DIV+CSS百分比进度条

 

DIV+CSS进度条-百分比进度条特效演示与LOADING进度条打包下载

CSS进度条目录
  1. 进度条效果截图
  2. 使用说明
  3. HTML+CSS代码
  4. 在线演示
  5. 在线下载

1、进度条效果截图   -   TOP

CSS百分比进度条截图
DIV+CSS进度条截图

2、CSS进度条使用说明   -   TOP

此进度条是纯DIV+CSS制作实现,通过对DIV宽度按照百分比来实现百分比进度条效果,大家可以将背景美化、边框美化实现自己需要的漂亮美化的进度条效果。

3、HTML+CSS代码:   -   TOP

HTML div代码对应片段:

  1. <div class="cent"> 
  2. <p> 
  3. 百分比进度条样式: 
  4. </p> 
  5. <p> 
  6. <div class="Bar"> 
  7.     <div style="width: 50%;"> 
  8.         <span>50%</span> 
  9.     </div> 
  10. </div> 
  11. </p> 
  12. <p> 
  13. <div class="Bar"> 
  14.     <div style="width: 80%;"> 
  15.         <span>80%</span> 
  16.     </div> 
  17. </div> 
  18. </p> 
  19. <p> 
  20. <div class="Bars"> 
  21.     <div style="width: 33%;"> 
  22.         <span>33%</span> 
  23.     </div> 
  24. </div> 
  25. </p> 
  26. </div> 

CSS代码:

  1. .Bar ,.Bars { position: relative; width: 200px;
    /* 宽度 */ border: 1px solid #B1D632; padding: 1px; } 
  2. .Bar div,.Bars div { display: block; position: relative;
    background:#00F;/* 进度条背景颜色 */ color: #333333;
    height: 20px; /* 高度 */ line-height: 20px;  /* 必须和高度一致,文本才能垂直居中 */ } 
  3. .Bars div{ background:#090} 
  4. .Bar div span,.Bars div span 
    { position: absolute; width: 200px; /* 宽度 */ text-align: center;
     font-weight: bold; } 

4、进度条在线演示   -   TOP

http://www.thinkcss.com/yanshi/2012082601/

5、在线打包下载   -   TOP

点击我下载(或鼠标右键另存为)

标签(Tag): 进度条

更多

 

HTML必备基础教程

 

CSS必备基础教程

 

 

如对文章有任何疑问请提交到DIV CSS论坛,或有任何网页制作CSS问题立即到CSS论坛发贴求解。
CSS教程文章修订日期:2012-08-26     点击:
原创来源:ThinkCSS     来源网址:http://www.thinkcss.com/view/m70.html
本文WWW.ThinkCSS.COM(DIV CSS) ThinkCSS版权所有,欢迎转载,并注明出处来源及URL!

 

推荐信息