<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN"><HTML><HEAD><TITLE> New Document </TITLE><META NAME="Generator" CONTENT="EditPlus"><META NAME="Author" CONTENT=""><META NAME="Keywords" CONTENT=""><META NAME="Description" CONTENT="">
<style>
body { font-size: 12px; }
#n { margin:10px auto; 920px; border:1px solid #CCC; font-size:14px; line-height:30px; }
#n a { padding:0 4px; color:#333 }
.Bar ,.Bars { position: relative; 200px; /* 宽度 */ border: 1px solid #B1D632; padding: 1px; }
.Bar div,.Bars div { display: block; position: relative;
background:#00F;/* 进度条背景颜色 */ color: #333333; height: 20px; /* 高度 */ line-height: 20px; /* 必须和高度一致，文本才能垂直居中 */ }
.Bars div{ background:#090}
.Bar div span,.Bars div span { position: absolute; 200px; /* 宽度 */ text-align: center; font-weight: bold; }
.cent{ margin:0 auto; 300px; overflow:hidden} </style></HEAD>
<BODY>
<div class="cent">
<p> 百分比进度条样式: </p>
<p>
<div class="Bar"> <div style=" 50%;"> <span>50%</span> </div></div> </p>
<p> <div class="Bar"> <div style=" 80%;"> <span>80%</span> </div> </div> </p>
<p> <div class="Bars"> <div style=" 33%;"> <span>33%</span> </div> </div> </p>
</div>
</BODY></HTML>