html进度条

css

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;  
} 
 

 

html

<html>
<body>
<link href="style.css" type=text/css rel=stylesheet>
进度条的XHTML代码:
显示代码打印01 <div class="ProgressBar">  
<div style="width: 50%;"><span>50%</span></div>  
</div>  
<br><br><br>  
<div class="ProgressBar">  
<div style="width: 80%;"><span>80%</span></div>  
</div>  
<br><br><br>  
<div class="ProgressBar">  
<div style="width: 10%;"><span>10%</span></div>  
</div> 
</body>
</html>
 

你可能感兴趣的:(html,XHTML,css)