进度条的XHTML代码: 50% 80% 10% <mce:style><!-- body { font-size: 12px; } .ProgressBar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; } .ProgressBar div { display: block; position: relative; background: #B1D632; color: #333333; height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */ } .ProgressBar div span { position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; } --></mce:style><style mce_bogus="1">body { font-size: 12px; } .ProgressBar { position: relative; width: 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; } .ProgressBar div { display: block; position: relative; background: #B1D632; color: #333333; height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致,文本才能垂直居中 */ } .ProgressBar div span { position: absolute; width: 200px; /* 宽度 */ text-align: center; font-weight: bold; }</style> 进度条的XHTML代码: <div class=”ProgressBar”> <div style="”width:" mce_style="”width:" 50%;”><span>50%</span></div> </div> <br><br><br> <div class=”ProgressBar”> <div style="”width:" mce_style="”width:" 80%;”><span>80%</span></div> </div> <br><br><br> <div class=”ProgressBar”> <div style="”width:" mce_style="”width:" 10%;”><span>10%</span></div> </div> http://lillian.emmajoe.me/?p=58 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>无标题文档</title> <mce:style><!-- .votepercent{float:left; width:210px; background:#EFEFEF;font-size:0; height:10px; margin:4px 10px 0 0 } .vptg{height:8px;overflow:hidden;} .vptg div{border:1px solid #fff;border-bottom:none;filter:alpha(opacity=70);opacity:.7;3.-moz-opacity:.7;height:7px} .vptg1{background:#F7CA9B;border:1px solid #C18F5A;} .vptg2{background:#BDE877;border:1px solid #478F45;} .vptg3{background:#6C81B6;border:1px solid #586E97;} .vptg4{background:#AEE7F8;border:1px solid #8AABB4;} .vptg5{background:#D843B3;border:1px solid #B0248D;} .vptg6{background:#C2F263;border:1px solid #67B410;} .vptg7{background:#EE335F;border:1px solid #BF2146;} .vptg8{background:#FFC535;border:1px solid #E37F24;} .vptg9{background:#D8E929;border:1px solid #ADBF0B;} .vptg10{background:#E58652;border:1px solid #923305;} .vptg11{background:#E7AB6D;border:1px solid #C18F5A;} .vptg12{background:#5DBC5B;border:1px solid #478F45;} --></mce:style><style mce_bogus="1"> .votepercent{float:left; width:210px; background:#EFEFEF;font-size:0; height:10px; margin:4px 10px 0 0 } .vptg{height:8px;overflow:hidden;} .vptg div{border:1px solid #fff;border-bottom:none;filter:alpha(opacity=70);opacity:.7;3.-moz-opacity:.7;height:7px} .vptg1{background:#F7CA9B;border:1px solid #C18F5A;} .vptg2{background:#BDE877;border:1px solid #478F45;} .vptg3{background:#6C81B6;border:1px solid #586E97;} .vptg4{background:#AEE7F8;border:1px solid #8AABB4;} .vptg5{background:#D843B3;border:1px solid #B0248D;} .vptg6{background:#C2F263;border:1px solid #67B410;} .vptg7{background:#EE335F;border:1px solid #BF2146;} .vptg8{background:#FFC535;border:1px solid #E37F24;} .vptg9{background:#D8E929;border:1px solid #ADBF0B;} .vptg10{background:#E58652;border:1px solid #923305;} .vptg11{background:#E7AB6D;border:1px solid #C18F5A;} .vptg12{background:#5DBC5B;border:1px solid #478F45;}</style> </head> <body> <div style="width:300px"> <div class="votepercent"> <div class="vptg vptg1" style="width:20px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg2" style="width:80px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg3" style="width:120px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg4" style="width:60px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg5" style="width:20px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg6" style="width:90px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg7" style="width:39px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg8" style="width:110px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg9" style="width:150px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg10" style="width:180px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg11" style="width:40px"><div></div></div> </div> <div class="votepercent"> <div class="vptg vptg12" style="width:150px"><div></div></div> </div> </div> </body> </html> http://www.bye18.cn/?p=438