如何在html中加入柱状图,利用DIV+CSS做的柱状图（3）

利用DIV+CSS做的柱状图(3)

.chart {

font-family: Tahoma;

font-size: 12px;

border: 1px solid #ccc;

float: left;

margin: 0;

padding: .4em .1em;

}

.chart li {

list-style: none;

float: left;

width: 5em;

text-align: center;

background: url(http://www.codefans.net/jscss/demoimg/200911/chart_bg.gif) center 1.6em no-repeat;

}

.chart li span {

display: block;

text-indent: -999em;

padding-bottom: 90px;

background: url(http://www.codefans.net/jscss/demoimg/200911/chart_bg_ol.gif) center -1px no-repeat;

border-top: 5px solid #fff;

}

.chart strong {

display: block;

text-align: center;

font-weight: normal;

}

• 一月: 35%
• 二月: 40%
• 三月: 87%
• 四月: 45%
• 五月: 23%

• 一月: 35%
• 二月: 40%
• 三月: 87%
• 四月: 45%
• 五月: 23%