演示效果截图

用到的图片

CSS代码

<style type="text/css">
.barGraph {
	background: url(horizontal_line.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
height: 150px;margin: 1em 0;padding: 0;position: relative;}
.barGraph li {
	border: 1px solid #555;border-bottom: none;bottom: 0; 
	color: #FFF;margin: 0;padding: 0 0 0 0;position: absolute;
	list-style: none;text-align: center;width: 39px;}
.barGraph li.p1{ background-color:#666666 }
.barGraph li.p2{ background-color:#888888 }
.barGraph li.p3{ background-color:#AAAAAA }
.fauxLineGraph {
	background: url(horizontal_line_2.png) bottom left;
	border-bottom: 3px solid #333; 
	font: 9px Helvetica, Geneva, sans-serif;
height: 150px;margin: 1em 0;padding: 0;position: relative;}
.fauxLineGraph li {
	border-top: 3px solid #555;border-bottom: none;color: #000;
	bottom: 0;list-style: none;margin: 0;padding: 0 0 0 0;
	position: absolute;text-align: center;width: 39px;}
.fauxLineGraph li.p1{ 
	background: url(blue_shadow.png) repeat-x top right;
	border-color: #4E536B;}
.fauxLineGraph li.p2{ 
	background: url(red_shadow.png) repeat-x top right; 
	border-color: #355B31;}
.fauxLineGraph li.p3{ 
	background: url(yellow_shadow.png) repeat-x top right; 
	border-color: #88262B;}
.pointGraph {
	background: url(horizontal_line_2.png) bottom left;
	border-bottom: 3px solid #333;
	font: 9px Helvetica, Geneva, sans-serif;
height: 150px;margin: 1em 0;padding: 0;position: relative;}
.pointGraph li {
	border-bottom: none;bottom: 0;color: #000;margin: 0; 
	padding: 15px 0 0 0;list-style: none;position: absolute; 
	text-align: center;width: 39px;}
.pointGraph li.p1{ background: url(nav_step_1.png) no-repeat top center;}
.pointGraph li.p2{ background: url(nav_step_4.png) no-repeat top center; }
.pointGraph li.p3{ background: url(nav_step_6.png) no-repeat top center; }
</style>

HTML代码

<h1>www.865171.cn</h1>
<ul class="barGraph">  				
	<li class="p1" style="height: 107px; left: 0px;">107</li>
	<li class="p2" style="height: 57px; left: 0px;">57</li>
	<li class="p3" style="height: 17px; left: 0px;">17</li>
	<li class="p1" style="height: 20px; left: 40px;">20</li> 
	<li class="p2" style="height: 60px; left: 40px;">60</li>
	<li class="p3" style="height: 100px; left: 40px;">100</li>
</ul> 
<ul class="pointGraph">  				
	<li class="p1" style="height: 107px; left: 0px;">107</li>
	<li class="p2" style="height: 57px; left: 0px;">57</li>
	<li class="p3" style="height: 17px; left: 0px;">17</li>
	<li class="p1" style="height: 20px; left: 40px;">20</li> 
	<li class="p2" style="height: 60px; left: 40px;">60</li>
	<li class="p3" style="height: 100px; left: 40px;">100</li>
</ul>
<ul class="fauxLineGraph">  				
	<li class="p1" style="height: 107px; left: 0px;">107</li>
	<li class="p2" style="height: 57px; left: 0px;">57</li>
	<li class="p3" style="height: 17px; left: 0px;">17</li>
	<li class="p1" style="height: 20px; left: 40px;">20</li> 
	<li class="p2" style="height: 60px; left: 40px;">60</li>
	<li class="p3" style="height: 100px; left: 40px;">100</li>
</ul>