演示效果截图

CSS代码

<style type="text/css" media="screen">
* { 
margin: 0; 
padding: 0; 
list-style-type: none;}
body { 
font-family: Helvetica, Arial, sans-serif; 
color: #333; }
a { 
color: #2D7BB2; 
text-decoration: none; 
font-weight: bold; }
a:hover { 
color: #333; }
h2, h3, h4 { 
clear: both; 
margin: 0 0 0.6em 0;}
h3 { 
color: #666; }
.section { 
float: left;
clear: left;
padding: 1em 2em;}
.sparkline { 
float: left; 
height: 1em;
margin: 0 0.5em;}
.sparkline .index { 
position: relative;
float: left; 
width: 2px; 
height: 100%; }
.sparkline .index .count { 
display: block; 
position: absolute; 
bottom: 0; 
left: 0; 
width: 100%; 
height: 0; 
background: #AAA;
overflow: hidden; 
text-indent: -9999px;}
.sparklist li { 
padding: 0.4em 0; }
</style>

HTML代码

<div class="section">
<h2>CSS代码实现的电子图表，似电火花</h2>
<h3>www.865171.cn</h3>
<h4>2009.7.7</h4>
<ul class="sparklist">
<li>
<span class="sparkline">
<span class="index"><span class="count" style="height:27%;">(60,</span></span>
<span class="index"><span class="count" style="height:97%;">220,</span></span>
<span class="index"><span class="count" style="height:62%;">140,</span></span>
<span class="index"><span class="count" style="height:35%;">80,</span></span>
<span class="index"><span class="count" style="height:49%;">110,</span></span>
<span class="index"><span class="count" style="height:40%;">90,</span></span>
<span class="index"><span class="count" style="height:80%;">180,</span></span>
<span class="index"><span class="count" style="height:62%;">140,</span></span>
<span class="index"><span class="count" style="height:53%;">120,</span></span>
<span class="index"><span class="count" style="height:71%;">160,</span></span>
<span class="index"><span class="count" style="height:78%;">175,</span></span>
<span class="index"><span class="count" style="height:100%;">225,</span></span>
<span class="index"><span class="count" style="height:78%;">175,</span></span>
<span class="index"><span class="count" style="height:56%;">125)</span></span>
</span>
<a href="http://www.example.com/fruits/apples/">Apples</a>
</li>
<li>
<span class="sparkline">
<span class="index"><span class="count" style="height:40%;">(90,</span></span>
<span class="index"><span class="count" style="height:49%;">110,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:33%;">75,</span></span>
<span class="index"><span class="count" style="height:56%;">125,</span></span>
<span class="index"><span class="count" style="height:67%;">150,</span></span>
<span class="index"><span class="count" style="height:44%;">100,</span></span>
<span class="index"><span class="count" style="height:18%;">40,</span></span>
<span class="index"><span class="count" style="height:33%;">75,</span></span>
<span class="index"><span class="count" style="height:40%;">90,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:78%;">175,</span></span>
<span class="index"><span class="count" style="height:100%;">225,</span></span>
<span class="index"><span class="count" style="height:56%;">125)</span></span>
</span>
<a href="http://www.example.com/fruits/apples/">Bananas</a>
</li>
<li>
<span class="sparkline">
<span class="index"><span class="count" style="height:22%;">(75,</span></span>
<span class="index"><span class="count" style="height:44%;">100,</span></span>
<span class="index"><span class="count" style="height:22%;">50,</span></span>
<span class="index"><span class="count" style="height:35%;">80,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:40%;">90,</span></span>
<span class="index"><span class="count" style="height:49%;">110,</span></span>
<span class="index"><span class="count" style="height:18%;">40,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:33%;">75,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:18%;">40,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:44%;">100)</span></span>
</span>
<a href="http://www.example.com/fruits/apples/">Cherries</a>
</li>
<li>
<span class="sparkline">
<span class="index"><span class="count" style="height:11%;">(25,</span></span>
<span class="index"><span class="count" style="height:22%;">50,</span></span>
<span class="index"><span class="count" style="height:13%;">30,</span></span>
<span class="index"><span class="count" style="height:8%;">20,</span></span>
<span class="index"><span class="count" style="height:18%;">40,</span></span>
<span class="index"><span class="count" style="height:11%;">25,</span></span>
<span class="index"><span class="count" style="height:16%;">35,</span></span>
<span class="index"><span class="count" style="height:22%;">50,</span></span>
<span class="index"><span class="count" style="height:27%;">60,</span></span>
<span class="index"><span class="count" style="height:13%;">30,</span></span>
<span class="index"><span class="count" style="height:8%;">20,</span></span>
<span class="index"><span class="count" style="height:18%;">40,</span></span>
<span class="index"><span class="count" style="height:22%;">50,</span></span>
<span class="index"><span class="count" style="height:11%;">25)</span></span>
</span>
<a href="http://www.example.com/fruits/apples/">Dates</a>
</li>
</ul>
</div>