免费模板网
当前位置: 首页>CSS图表> 简单实用且容易理解的柱状图效果

CSS图表

简单实用且容易理解的柱状图效果

分类:CSS图表 时间:2009/6/5 14:11:51 浏览:4240 次

演示效果截图

 简单实用且容易理解的柱状图效果

用到的图片

 

CSS代码

<style type="text/css">
.chart {
	font-family: Tahoma;font-size: .7em;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>

HTML代码

<ul class="chart"> 
<li>Ants<span style="background-position: center -35px;">: </span>
<strong>35%</strong></li> 
<li>Bisons<span style="background-position: center -40px;">: </span>
<strong>40%</strong></li> 
<li>Crocodile<span style="background-position: center -87px;">: </span>
<strong>87%</strong></li> 
<li>Dingo<span style="background-position: center -45px;">: </span>
<strong>45%</strong></li> 
<li>Emu<span style="background-position: center -23px;">: </span>
<strong>23%</strong></li> 
</ul>
<h1>www.865171.cn</h1>

上一篇:DIV、UL、LI + CSS实现复杂柱状图

下一篇:重叠柱状CSS图表

站长常用工具

最新图表

热门图表

赞助商链接