用css做圆柱型报表–简单版

!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
html
head
titleSimple accessible Charts/title
meta http-equiv="Content-Type" content="text/html; charset=gbk"
style type="text/css"
.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(chart_bg.gif) center 1.6em no-repeat;
}

.chart li span {
 display: block;
 text-indent: -999em;
 padding-bottom: 90px;
 background: url(chart_bg_ol.gif) center -1px no-repeat;
 border-top: 5px solid #fff;
}

.chart strong {
 display: block;
 text-align: center;
 font-weight: normal;
}

/style
/head

body

ul class="chart"
li一月span style="background-position: center -35": /spanstrong35%/strong/li
li二月span style="background-position: center -40": /spanstrong40%/strong/li
li三月span style="background-position: center -87": /spanstrong87%/strong/li
li四月span style="background-position: center -45": /spanstrong45%/strong/li
li五月span style="background-position: center -23": /spanstrong23%/strong/li
/ul
p style="clear: both"/pp /p

p style="clear: both"/pp /p

ul class="chart"
liem一月/emspan style="background-position: center -35": /spanstrong35%/strong/li
liem二月/emspan style="background-position: center -40": /spanstrong40%/strong/li
liem三月/emspan style="background-position: center -87": /spanstrong87%/strong/li
liem四月/emspan style="background-position: center -45": /spanstrong45%/strong/li
liem五月/emspan style="background-position: center -23": /spanstrong23%/strong/li
/ul

p style="clear: both"/pp /p

/body
/html