純css進度條,各類兼容

時間 2019-11-09

標籤 css 進度各類兼容欄目 CSS 简体版

原文原文鏈接

<!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; width:920px; border:1px solid #CCC;	 font-size:14px; line-height:30px; } 	
#n a { padding:0 4px; color:#333 } 	
.Bar ,.Bars { position: relative; width: 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; width: 200px;	 /* 寬度 */ text-align: center; font-weight: bold; } 	
.cent{ margin:0 auto; width:300px; overflow:hidden} </style></HEAD>
<BODY>
<div class="cent"> 
<p> 百分比進度條樣式: </p>
<p> 
<div class="Bar"> <div style="width: 50%;">        <span>50%</span>    </div></div> </p>
<p> <div class="Bar">     <div style="width: 80%;">         <span>80%</span>     </div> </div> </p>

<p> <div class="Bars">     <div style="width: 33%;">         <span>33%</span>     </div> </div> </p>

</div>

</BODY></HTML>

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。