免费模板网
当前位置: 澳门永利官方网站>CSS图表> 彩色12个月CSS月统计图表

CSS图表

彩色12个月CSS月统计图表

分类:CSS图表 时间:2009/6/5 15:15:15 浏览:9513 次

演示效果截图

本文地址:http://www.5hawgs.com/css-chart/detail-6180.aspx
文章摘要: 彩色12个月CSS月统计图表 ,澳门新葡京官网澳门博彩官方网站澳门星际官网,澳门永利官方网站澳门大三巴官网星际线上娱乐官方网站。

彩色12个月CSS月统计图表

用到的图片


CSS代码

body {
	margin:0;padding:40px;background:#fff;
	font:70% Arial, Helvetica, sans-serif;
	color:#555;line-height:180%;}
h1{
	font-size:180%;font-weight:normal;color:#555;}
dl#csschart, dl#csschart dt, dl#csschart dd{
	margin:0;padding:0;} 	
dl#csschart{
	background:url(bg_chart.gif) no-repeat 0 0;
	width:467px;height:385px;} 
dl#csschart dt{
	display:none;}
dl#csschart dd{
	position:relative;float:left;display:inline;
	width:33px;height:330px;margin-top:22px;} 
dl#csschart dd.first{
	margin-left:33px;} 	
dl#csschart span{
	position:absolute;display:block;width:33px;	
	bottom:0;left:0;z-index:1;color:#555;
	text-decoration:none;} 		
dl#csschart span em{
	display:block;font-style:normal;float:left;
	line-height:200%;background:#fff;color:#555;
	border:1px solid #b1b1b1;position:absolute;
	top:50%;left:3px;text-align:center;width:23px;} 		
dl#csschart span{
	height:50%;background:url(type1.gif) repeat-y;} 
dl#csschart span.type1{
	background:url(type1.gif) repeat-y;} 
dl#csschart span.type2{
	background:url(type2.gif) repeat-y;} 
dl#csschart span.type3{
	background:url(type3.gif) repeat-y;} 
dl#csschart span.type4{
	background:url(type4.gif) repeat-y;}
dl#csschart span.p0{height:0%;}dl#csschart span.p1{height:1%;}
dl#csschart span.p2{height:2%;}dl#csschart span.p3{height:3%;}
dl#csschart span.p4{height:4%;}dl#csschart span.p5{height:5%;}
dl#csschart span.p6{height:6%;}dl#csschart span.p7{height:7%;}
dl#csschart span.p8{height:8%;}dl#csschart span.p9{height:9%;}
dl#csschart span.p10{height:10%;}dl#csschart span.p11{height:11%;}
dl#csschart span.p12{height:12%;}dl#csschart span.p13{height:13%;}
dl#csschart span.p14{height:14%;}dl#csschart span.p15{height:15%;}
dl#csschart span.p16{height:16%;}dl#csschart span.p17{height:17%;}
dl#csschart span.p18{height:18%;}dl#csschart span.p19{height:19%;}
dl#csschart span.p20{height:20%;}dl#csschart span.p21{height:21%;}
dl#csschart span.p22{height:22%;}dl#csschart span.p23{height:23%;}
dl#csschart span.p24{height:24%;}dl#csschart span.p25{height:25%;}
dl#csschart span.p26{height:26%;}dl#csschart span.p27{height:27%;}
dl#csschart span.p28{height:28%;}dl#csschart span.p29{height:29%;}
dl#csschart span.p30{height:30%;}dl#csschart span.p31{height:31%;}
dl#csschart span.p32{height:32%;}dl#csschart span.p33{height:33%;}
dl#csschart span.p34{height:34%;}dl#csschart span.p35{height:35%;}
dl#csschart span.p36{height:36%;}dl#csschart span.p37{height:37%;}
dl#csschart span.p38{height:38%;}dl#csschart span.p39{height:39%;}
dl#csschart span.p40{height:40%;}dl#csschart span.p41{height:41%;}
dl#csschart span.p42{height:42%;}dl#csschart span.p43{height:43%;}
dl#csschart span.p44{height:44%;}dl#csschart span.p45{height:45%;}
dl#csschart span.p46{height:46%;}dl#csschart span.p47{height:47%;}
dl#csschart span.p48{height:48%;}dl#csschart span.p49{height:49%;}
dl#csschart span.p50{height:50%;}dl#csschart span.p51{height:51%;}
dl#csschart span.p52{height:52%;}dl#csschart span.p53{height:53%;}
dl#csschart span.p54{height:54%;}dl#csschart span.p55{height:55%;}
dl#csschart span.p56{height:56%;}dl#csschart span.p57{height:57%;}
dl#csschart span.p58{height:58%;}dl#csschart span.p59{height:59%;}
dl#csschart span.p60{height:60%;}dl#csschart span.p61{height:61%;}
dl#csschart span.p62{height:62%;}dl#csschart span.p63{height:63%;}
dl#csschart span.p64{height:64%;}dl#csschart span.p65{height:65%;}
dl#csschart span.p66{height:66%;}dl#csschart span.p67{height:67%;}
dl#csschart span.p68{height:68%;}dl#csschart span.p69{height:69%;}
dl#csschart span.p70{height:70%;}dl#csschart span.p71{height:71%;}
dl#csschart span.p72{height:72%;}dl#csschart span.p73{height:73%;}
dl#csschart span.p74{height:74%;}dl#csschart span.p75{height:75%;}
dl#csschart span.p76{height:76%;}dl#csschart span.p77{height:77%;}
dl#csschart span.p78{height:78%;}dl#csschart span.p79{height:79%;}
dl#csschart span.p80{height:80%;}dl#csschart span.p81{height:81%;}
dl#csschart span.p82{height:82%;}dl#csschart span.p83{height:83%;}
dl#csschart span.p84{height:84%;}dl#csschart span.p85{height:85%;}
dl#csschart span.p86{height:86%;}dl#csschart span.p87{height:87%;}
dl#csschart span.p88{height:88%;}dl#csschart span.p89{height:89%;}
dl#csschart span.p90{height:90%;}dl#csschart span.p91{height:91%;}
dl#csschart span.p92{height:92%;}dl#csschart span.p93{height:93%;}
dl#csschart span.p94{height:94%;}dl#csschart span.p95{height:95%;}
dl#csschart span.p96{height:96%;}dl#csschart span.p97{height:97%;}
dl#csschart span.p98{height:98%;}dl#csschart span.p99{height:99%;}
dl#csschart span.p100{height:100%;}

HTML代码

<h1>www.865171.cn</h1>
<dl id="csschart">
	<dt>Day 1</dt>
	<dd class="first"><span class="p36"><em>36</em></span></dd>
	<dt>Day 2</dt>
	<dd><span class="type2 p45"><em>45</em></span></dd>
	<dt>Day 3</dt>
	<dd><span class="type3 p51"><em>51</em></span></dd>
	<dt>Day 4</dt>
	<dd><span class="type4 p48"><em>48</em></span></dd>
	<dt>Day 5</dt>
	<dd><span class="type1 p55"><em>55</em></span></dd>
	<dt>Day 6</dt>
	<dd><span class="type2 p80"><em>80</em></span></dd>
	<dt>Day 7</dt>
	<dd><span class="type3 p72"><em>72</em></span></dd>
	<dt>Day 8</dt>
	<dd><span class="type4 p71"><em>71</em></span></dd>
	<dt>Day 9</dt>
	<dd><span class="type1 p64"><em>64</em></span></dd>
	<dt>Day 10</dt>
	<dd><span class="type2 p55"><em>55</em></span></dd>
	<dt>Day 11</dt>
	<dd><span class="type3 p62"><em>62</em></span></dd>
	<dt>Day 12</dt>
	<dd><span class="type4 p44"><em>44</em></span></dd>		
</dl>
友荐云推荐

上一篇:纯CSS曲线图表

下一篇:table、div+css实现的柱状图表

站长常用工具

最新图表

热门图表

赞助商链接