一个进度条demo

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

实现代码如下:

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>??

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

赞(0) 打赏
未经允许不得转载:WEB前端开发 » 一个进度条demo

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏