免费模板网
当前位置: 新濠天地网上娱乐场官方网站>CSS图表> 纯CSS曲线图表

CSS图表

纯CSS曲线图表

分类:CSS图表 时间:2009/6/5 14:50:01 浏览:15036 次

演示效果截图

本文地址:http://www.lanzuda.com/css-chart/detail-6179.aspx
文章摘要: 纯CSS曲线图表 ,澳门网上博彩官方网站澳门新濠天地官方网站永利网上娱乐官方网站,威尼斯人备用网址官方网站澳门皇冠官网官方网站皇冠赌场网址官方网站。

 纯CSS曲线图表

用到的图片

 

CSS代码

body {
	margin:0;padding:40px;background:#fff;
	font:70% Arial, Helvetica, sans-serif;
	color:#555;line-height:180%;}
h1{
	font-size:220%;font-weight:normal;}
h2{
	font-size:180%;font-weight:normal;}
dl.csslinegraph, dl.csslinegraph dt, dl.csslinegraph dd{
	margin:0;padding:0;} 	
dl.csslinegraph{
	background:url(bg_chart.gif) no-repeat 0 0;
	width:467px;height:385px;} 
dl.csslinegraph dt{
	display:none;}
dl.csslinegraph dd{
	position:relative;float:left;display:inline;
	width:33px;height:330px;margin-top:22px;} 
dl.csslinegraph dd.first{
	margin-left:33px;} 	
dl.csslinegraph span{
	position:absolute;display:block;width:33px;	
	height:330px;left:0;background-image:url(line.png);
	background-repeat:no-repeat;text-indent:-8000px;} 	
dl.csslinegraph span em{
	position:absolute;display:block;width:6px;	
	height:6px;left:-3px;bottom:-3px;
	background:url(dot.png) no-repeat 0 0;} 	
dl.csslinegraph span.d em{	
	left:-3px;bottom:auto;top:-2px;}
.pi0{top:0px;}.pi1{top:-11px;}.pi2{top:-22px;}
.pi3{top:-33px;}.pi4{top:-44px;}.pi5{top:-55px;}
.pi6{top:-66px;}.pi7{top:-77px;}.pi8{top:-88px;}
.pi9{top:-99px;}.pi10{top:-110px;}.pi11{top:-121px;}
.pi12{top:-132px;}.pi13{top:-143px;}.pi14{top:-154px;}
.pi15{top:-165px;}.pi16{top:-176px;}.pi17{top:-187px;}
.pi18{top:-198px;}.pi19{top:-209px;}.pi20{top:-220px;}
.pi21{top:-231px;}.pi22{top:-242px;}.pi23{top:-253px;}
.pi24{top:-264px;}.pi25{top:-275px;}.pi26{top:-286px;}
.pi27{top:-297px;}.pi28{top:-308px;}.pi29{top:-319px;}
.pi30{top:-330px;}.pd0{top:330px;}.pd1{top:319px;}
.pd2{top:308px;}.pd3{top:297px;}.pd4{top:286px;}
.pd5{top:275px;}.pd6{top:264px;}.pd7{top:253px;}
.pd8{top:242px;}.pd9{top:231px;}.pd10{top:220px;}
.pd11{top:209px;}.pd12{top:198px;}.pd13{top:187px;}
.pd14{top:176px;}.pd15{top:165px;}.pd16{top:154px;}
.pd17{top:143px;}.pd18{top:132px;}.pd19{top:121px;}
.pd20{top:110px;}.pd21{top:99px;}.pd22{top:88px;}
.pd23{top:77px;}.pd24{top:66px;}.pd25{top:55px;}
.pd26{top:44px;}.pd27{top:33px;}.pd28{top:22px;}
.pd29{top:11px;}.pd30{top:0px;}
.i0{background-position:0 -1px;}.i1{background-position:-33px 0;}
.i2{background-position:-66px 0;}.i3{background-position:-99px 0;}
.i4{background-position:-132px 0;}.i5{background-position:-165px 0;}
.i6{background-position:-198px 0;}.i7{background-position:-231px 0;}
.i8{background-position:-264px 0;}.i9{background-position:-297px 0;}
.i10{background-position:-330px 0;}.i11{background-position:-363px 0;}
.i12{background-position:-396px 0;}.i13{background-position:-429px 0;}
.i14{background-position:-462px 0;}.i15{background-position:-495px 0;}
.i16{background-position:-528px 0;}.i17{background-position:-561px 0;}
.i18{background-position:-594px 0;}.i19{background-position:-627px 0;}
.i20{background-position:-660px 0;}.i21{background-position:-693px 0;}
.i22{background-position:-726px 0;}.i23{background-position:-759px 0;}
.i24{background-position:-792px 0;}.i25{background-position:-825px 0;}
.i26{background-position:-858px 0;}.i27{background-position:-891px 0;}
.i28{background-position:-924px 0;}.i29{background-position:-957px 0;}
.i30{background-position:-990px 0;}.d0{background-position:0 -331px;}
.d1{background-position:-33px -332px;}.d2{background-position:-66px -332px;}
.d3{background-position:-99px -332px;}.d4{background-position:-132px -332px;}
.d5{background-position:-165px -332px;}.d6{background-position:-198px -332px;}
.d7{background-position:-231px -332px;}.d8{background-position:-264px -332px;}
.d9{background-position:-297px -332px;}.d10{background-position:-330px -332px;}
.d11{background-position:-363px -332px;}
.d12{background-position:-396px -332px;}
.d13{background-position:-429px -332px;}
.d14{background-position:-462px -332px;}
.d15{background-position:-495px -332px;}
.d16{background-position:-528px -332px;}
.d17{background-position:-561px -332px;}
.d18{background-position:-594px -332px;}
.d19{background-position:-627px -332px;}
.d20{background-position:-660px -332px;}
.d21{background-position:-693px -332px;}
.d22{background-position:-726px -332px;}
.d23{background-position:-759px -332px;}
.d24{background-position:-792px -332px;}
.d25{background-position:-825px -332px;}
.d26{background-position:-858px -332px;}
.d27{background-position:-891px -332px;}
.d28{background-position:-924px -332px;}
.d29{background-position:-957px -332px;}
.d30{background-position:-990px -332px;}

HTML代码

<h1>www.865171.cn</h1>
<dl class="csslinegraph">
	<dt>Day 1</dt>
	<dd class="first"><span class="pi0 i1"><em>3</em></span></dd>
  <dt>Day 2</dt>
	<dd><span class="pi1 i10"><em>36</em></span></dd>
  <dt>Day 3</dt>
	<dd><span class="pd11 d d4"><em>23</em></span></dd>
  <dt>Day 4</dt>
	<dd><span class="pi7 i10"><em>56</em></span></dd>
  <dt>Day 5</dt>
	<dd><span class="pd17 d d0"><em>55</em></span></dd>
  <dt>Day 6</dt>
	<dd><span class="pd17 d d7"><em>32</em></span></dd>
  <dt>Day 7</dt>
	<dd><span class="pi10 i14"><em>79</em></span></dd>
  <dt>Day 8</dt>
	<dd><span class="pd24 d d2"><em>74</em></span></dd>
  <dt>Day 9</dt>
	<dd><span class="pi22 i1"><em>77</em></span></dd>
  <dt>Day 10</dt>
	<dd><span class="pi23 i2"><em>83</em></span></dd>
  <dt>Day 11</dt>
	<dd><span class="pd25 d d15"><em>34</em></span></dd>
  <dt>Day 12</dt>
	<dd><span class="pi10 i2"><em>39</em></span></dd>
</dl>

上一篇:重叠柱状CSS图表

下一篇:彩色12个月CSS月统计图表

站长常用工具

最新图表

热门图表

赞助商链接

澳门葡京国际娱乐官方网站 澳门新濠天地官方网站 银河网上娱乐官方网站 美高梅国际娱乐官方网站
澳门永利线上娱乐官方网站 新濠天地国际娱乐官方网站 威尼斯人备用网址官方网站 澳门金沙网上娱乐官方网站
澳门葡京国际娱乐官方网站 葡京娱乐场网址官方网站 新葡京开户官方网站 澳门赌场娱乐城官方网站
澳门永利线上娱乐官方网站 线上皇冠娱乐场官方网站 澳门新葡京网上娱乐官方网站 澳门新葡京网上娱乐官方网站