文档介绍:js 进度条制作进度条的两种方法<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <title> 制作进度条的两种方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /* 进度条样式*/ .progressbar_1{ background-color:#eee; height:16px; width:150px; border:1px solid #bbb; color:#222; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0; } </style> </head> <body> <div class="wrap"> <h1>1 ,构建基本的 HTML 结构和 CSS 样式</h1> 0% 的状态: <div class="progressbar_1"> <div class="bar"></div> </div> 50% 的状态: <div class="progressbar_1"> <div class="bar" style="width: 50%;"></div> </div> 80% 的状态: <div class="progressbar_1"> <div class="bar" style="width: 80%;"></div> </div> 100% 的状态: <div class="progressbar_1"> <div class="bar" style="width: 100%;"></div> </div> 这步非常简单,相信大家都能看明白。</div> </body> </html> <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Transitional//EN" "/xhtml1/DTD/xhtml1-"> <html xmlns="9/xhtml"> <head> <title> 制作进度条的两种方法</title> <meta http-equiv="Content-Type" content="text/html; charset=gb2312" /> <style> *{ margin:0; padding:0; } body{font-size:12px;}h1{font-size:15px;} .wrap{ font-size: 12px; margin:40px auto; width:400px; } /* 进度条样式*/ .progressbar_1{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; } .progressbar_1 .bar { background-color:#6CAF00; height:16px; width:0; } /* 绝对定位*/ .progressbar_2{ background-color:#eee; color:#222; height:16px; width:150px; border:1px solid #bbb; text-align:center; position:relative; } .progressbar_2 .bar { background-color:#6CAF00; height:16px; width:0; position:absolute; left:0; top:0; } .progressbar_2 .text { height:16px; position:absolute; left:0; top:0; width:100%; line-height:16px; } /* 绝对定位+ z-index */ .progressbar_3{ background-color:#eee; color:#222; height:16px