`

html进度条

HTMLCSSXHTML 
阅读更多

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>
 
分享到：
| 怎样煮小米粥？
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics