HTML+CSS的一个进度条demo

来源:互联网 发布:java中调用方法本身 编辑:程序博客网 时间:2024/04/30 15:54

今天一个朋友问我一个问题,效果如图:

实现代码如下:

XML/HTML代码
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5. <title>无标题文档</title>  
  6. </head>  
  7.   
  8. <body>  
  9. <div style=" position:relative; border:1px #CCC solid; height:28px; width:500px; margin:0 auto; padding:1px">  
  10.   <div style=" background:#3F9; height:28px; width:200px"></div>  
  11.   <strong style=" position:absolute; width:500px; top:7px; text-align:center; overflow:hidden">你的经验是1000,下级是2000</strong>  
  12. </div>  
  13. </body>  
  14. </html>  

期待大家有更好的解决方案。

原创粉丝点击