免费模板网
当前位置: 新濠天地网上娱乐场官方网站>CSS图表> 三种风格的CSS图表(点图、线图、柱状图)

CSS图表

三种风格的CSS图表(点图、线图、柱状图)

分类:CSS图表 时间:2009/6/5 17:01:12 浏览:9541 次

演示效果截图

本文地址:http://www.lanzuda.com/css-chart/detail-6184.aspx
文章摘要: 三种风格的CSS图表(点图、线图、柱状图) ,澳门赌博网官方网站新葡京开户官方网站新葡京娱乐官方网站,澳门威尼斯人娱乐官方网站网上真人博彩官方网站澳门永利网上娱乐官方网站。

三种风格的CSS图表(点图、线图、柱状图)

用到的图片


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>

上一篇:CSS无图水平分节图表

下一篇:一款简单的CSS投票统计

站长常用工具

最新图表

热门图表

赞助商链接

澳门葡京国际娱乐官方网站 英皇网上娱乐场官方网站 澳门葡京国际娱乐官方网站 美高梅娱乐场官方网站
线上新濠天地娱乐场官方网站 金沙娱乐网址官方网站 美高梅娱乐官方网站 线上永利娱乐场官方网站
澳门永利线上娱乐官方网站 永利线上娱乐官方网站 美高梅线上娱乐官方网站 金沙国际娱乐官方网站
线上新濠天地娱乐场官方网站 葡京娱乐场网址官方网站 澳门永利线上娱乐官方网站 赌场网址大全官方网站