CSS百分比进度条设计方法

　　如今在制作网页中我们常常会使用css样式来设计页面效果，今天为大家介绍一下CSS百分比进度条设计方法。

　　效果图：

　　代码：

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