关注公众号 jb51net

关闭

网页制作 > CSS > CSS教程 >

CSS 进度条实现代码

2009-03-30 14:13:35 脚本之家

<style> 
#graphbox{ 
border:1px solid #e7e7e7; 
padding:10px; 
width:250px; 
background-color:#f8f8f8; 
margin:5px 0; 
} 
#graphbox h2{ 
color:#666666; 
font-family:Arial; 
font-size:18px; 
font-weight:700; 
} 
.graph{ 
position:relative; 
background-color:#F0EFEF; 
border:1px solid #cccccc; 
padding:2px; 
font-size:13px; 
font-weight:700; 
} 
.graph .orange, .green, .blue, .red, .black{ 
position:relative; 
text-align:left; 
color:#ffffff; 
height:18px; 
line-height:18px; 
font-family:Arial; 
display:block; 
} 
.graph .orange{background-color:#ff6600;} 
.graph .green{background-color:#66CC33;} 
.graph .blue{background-color:#3399CC;} 
.graph .red{background-color:red;} 
.graph .black{background-color:#555;} 
</style> 
<div id="graphbox"> 
<h2>BarGraphs Example</h2> 
<div class="graph"><span class="orange" style="width:35%;">orange:35%</span></div> 
<div class="graph"><span class="green" style="width:90%;">green:90%</span></div> 
<div class="graph"><span class="blue" style="width:75%;">blue:75%</span></div> 
<div class="graph"><span class="red" style="width:85%;">red:85%</span></div> 
<div class="graph"><span class="black" style="width:100%;">black:100%</span></div> 
</div>

提示：您可以先修改部分代码再运行