返回

首页

业界

电商

创业

访谈

手机

移动

报告

运营

建站

互联网+

系统

教程

易采站长站-移动端

CSS 进度条实现代码

2019-03-14 21:01:23王冬梅

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

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

相关文章大家在看