纯css做漂亮好看的进度条，看了绝对不后悔。
关键词:
效果
50%
兼容
IE6/7/8
Chrome 4
Firefox 3.5 等等
更多效果
<!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=gb2312″ /> <style> .process-bar { width:100px; display:inline-block; *zoom:1; } .pb-wrapper { border:1px solid gray; border-style:solid none; position:relative; background:#cfd0d2; } .pb-container { border:1px solid gray; border-style:none solid; 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; } .pb-value { height:100%; width:50%; background:#19d73d; } .pb-text { color:black; font:10px/12px arial } /* — 以下是重写的皮肤 — */ /* green */ .skin-green .pb-wrapper { border-color:#666; border-top-color:#628c2d; } .skin-green .pb-container { border-color:#666; border-left-color:#628c2d; } .skin-green .pb-text{ color:black } /* blue */ .skin-blue .pb-wrapper { border-color:#0e7c78; border-top-color:#41beb9; } .skin-blue .pb-container { border-color:#0e7c78; border-left-color:#41beb9; } .skin-blue .pb-text { color:white } .skin-blue .pb-value { background:#159b96; } /* red */ .skin-red .pb-wrapper { border-color:#8e1411; border-top-color:#cb3d3a; } .skin-red .pb-container { border-color:#8e1411; border-left-color:#cb3d3a; } .skin-red .pb-text { color:#470200; } .skin-red .pb-value { background:#d70500 } /* orange */ .skin-orange .pb-wrapper, .skin-orange .pb-container { border-color:#d55110; } .skin-orange .pb-text { color:#250f00; } .skin-orange .pb-value { background:#d75a00; } /* purple */ .skin-purple .pb-wrapper, .skin-purple .pb-container { border-color:#a90561; } .skin-purple .pb-text { color:#720040; } .skin-purple .pb-value { background:#9d118e } /* black */ .skin-black .pb-wrapper, .skin-black .pb-container { border-color:black } .skin-black .pb-text { color:gray; } .skin-black .pb-value { background:#111111; } /* 分割线样式 */ .hua-li-de-fen-ge-xian { border-bottom:2px dashed #eee; height:1px; font-size:1px; margin:5px 0 } </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”>10%</div> <div class=”pb-value”></div> </div> </div> </div> <div class=”hua-li-de-fen-ge-xian”></div> <div class=”process-bar skin-blue”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>100%</div> <div class=”pb-value” style=”width:100%”></div> </div> </div> </div> <div class=”hua-li-de-fen-ge-xian”></div> <div class=”process-bar skin-red”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>18%</div> <div class=”pb-value” style=”width:18%”></div> </div> </div> </div> <div class=”hua-li-de-fen-ge-xian”></div> <div class=”process-bar skin-orange”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>55%</div> <div class=”pb-value” style=”width:55%”></div> </div> </div> </div> <div class=”hua-li-de-fen-ge-xian”></div> <div class=”process-bar skin-purple”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>32%</div> <div class=”pb-value” style=”width:32%”></div> </div> </div> </div> <div class=”hua-li-de-fen-ge-xian”></div> <div class=”process-bar skin-black”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>78%</div> <div class=”pb-value” style=”width:78%”></div> </div> </div> </div> </body> </html>
提示：您可以先修改部分代码再运行
综合例子
<!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=gb2312″ /> <style> .process-bar { width:100px; display:inline-block; *zoom:1; } .pb-wrapper { border:1px solid gray; border-style:solid none; position:relative; background:#cfd0d2; } .pb-container { border:1px solid gray; border-style:none solid; 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; } .pb-value { height:100%; width:50%; background:#19d73d; } .pb-text { color:black; } .grid { border-collapse : collapse ; font:12px/1.5 arial; background:white; border:1px solid gray; width:500px; } .grid td, .grid th { padding:5px } .grid th { background:#eee; color:black; text-align:left; font-weight:normal } </style> </head> <body> <table cellpadding=”0″ cellspacing=”0″ border=”1″ class=”grid” rules=”rows” frame=”void”> <tr> <th> 项目ID </th> <th> 项目名称 </th> <th> 开始时间 </th> <th> 项目进度 </th> </tr> <tr> <td> #200912110001 </td> <td> 项目管理系统 </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>99%</div> <div class=”pb-value” style=”width:99%”></div> </div> </div> </div> </td> </tr> <tr> <td> #2009654001 </td> <td> ERP </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>10%</div> <div class=”pb-value” style=”width:10%”></div> </div> </div> </div> </td> </tr> <tr> <td> #200916540001 </td> <td> OA </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>89%</div> <div class=”pb-value” style=”width:89%”></div> </div> </div> </div> </td> </tr> <tr> <td> #20091214501 </td> <td> 河蟹养殖系统 </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>54%</div> <div class=”pb-value” style=”width:54%”></div> </div> </div> </div> </td> </tr> <tr> <td> #200912110001 </td> <td> 项目管理系统 </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>99%</div> <div class=”pb-value” style=”width:99%”></div> </div> </div> </div> </td> </tr> <tr> <td> #2009654001 </td> <td> ERP </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>10%</div> <div class=”pb-value” style=”width:10%”></div> </div> </div> </div> </td> </tr> <tr> <td> #200916540001 </td> <td> OA </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>89%</div> <div class=”pb-value” style=”width:89%”></div> </div> </div> </div> </td> </tr> <tr> <td> #20091214501 </td> <td> 河蟹养殖系统 </td> <td> 2010-12-01 </td> <td> <div class=”process-bar”> <div class=”pb-wrapper”> <div class=”pb-highlight”></div> <div class=”pb-container”> <div class=”pb-text”>54%</div> <div class=”pb-value” style=”width:54%”></div> </div> </div> </div> </td> </tr> </table> </body> </html>
提示：您可以先修改部分代码再运行
睡觉去喽~
