纯DIV+CSS百分比进度条代码,Asp.NET代码库,德仔网

代码语言

代码分类

【Asp.NET】纯DIV+CSS百分比进度条

作者:天磊 / 发布于2016/12/19/ 370

<!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">   
   
百分比进度条样式:   
   
   
<div class="Bar">   
    <div style="width: 50%;">   
        <span>50%</span>   
    </div>   
</div>   
   
   
<div class="Bar">   
    <div style="width: 80%;">   
        <span>80%</span>   
    </div>   
</div>   
   
   
<div class="Bars">   
    <div style="width: 33%;">   
        <span>33%</span>   
    </div>   
</div>   
   
</div>  
</BODY>  
</HTML>

评论列表

本站所提供的代码，版权归原作者所有，若有侵犯作者版权，请与我们联系，我们将立即删除或修改。谢谢!
本站所有代码发布及提供者。

试试其它关键字

同语言下

可能有用的

天磊贡献的其它代码(13)