dudo博客

第一部分中,我们主要讲解了一下如何用列表元素来实现柱状图效果。其中需要特别注意的就是相对定位和绝对定位的的使用。在本节中,将来讨论一下使用表格元素
来创建一个柱状图的过程,这其中用到的关键技术还是相对定位和绝对定位的知识。
在开始之前,我们要先确定一下列表元素和表格元素到底有哪些不同。如果去除他们在浏览器的表现来说的话,他们基本上没有差别——都是有嵌套的(x)html标签而已。他们的不同主要是体现在在浏览器中的表现样式上,但是我们要实现的柱状图效果,无论采用了哪类方式实现,最终还是要具有差不多的外观。所以我们可以抛开细节不去管,不管


<ul>有什么千差万别,我们只把它们看作是嵌套了两层或者三层的(x)html标签即可。既然这样,我们就可以用上一节的方式处理本节中的内容了:

1、建立如下结构的xhtml代码

100 190 140 70

第一部分中的代码

  • 100
  • 190
  • 140
  • 70

相比,差别就在于我们使用的元素类型以及嵌套层次上,其他没有任何区别,如果我们忽略
标签从
标签往下看的话,就完全一致了。

接下来我们用CSS样式化上面这段代码在浏览器的表现:

	#graph tr {display:block;width:600px;border:1px solid #ccc;position:relative;height:200px;}
	td {width:32px;position:absolute;bottom:0;text-align:center;font-weight:bold;color:#fff;}
	#q1 {height:100px;left:10px;background:url(http://dudo.org/attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll 0 0;}
	#q2 {height:190px;left:54px;background:url(http://dudo.org/attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -34px 0;}
	#q3 {height:140px;left:98px;background:url(http://dudo.org/attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -68px 0;}
	#q4 {height:70px;left:142px;background:url(http://dudo.org/attachments/month_0804/c2008428195153.gif) #fff no-repeat scroll -102px 0;}

这段代码和前面的也没有太大区别,都是通过绝对定位来实现布局。
因此,我们可以运行一下下面的代码看最终效果:


100 190 140 70

和第一部分的纵向柱状结构完全一致。

2、横向的柱状图:

有了1中的演示,那么从纵向改为横向就更加简单的了,我们保持上面的xhtml代码结构不变,只需要变换一下CSS样式表就可以了(web标准的好处就是,只需要改变CSS就能改变页面的样子)。

	#graph tr {display:block;width:600px;border:1px solid #ccc;position:relative;height:200px;}
	td  {height:32px;position:absolute;left:0;text-align:right;font-weight:bold;color:#fff;padding-right:13px;}
	#q1 {width:100px;top:10px;background:url(http://dudo.org/attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -188px 0;}
	#q2 {width:190px;top:54px;background:url(http://dudo.org/attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -98px -34px;}
	#q3 {width:140px;top:98px;background:url(http://dudo.org/attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -148px -68px;}
	#q4 {width:70px;top:142px;background:url(http://dudo.org/attachments/month_0804/02008428202910.gif) #fff no-repeat scroll -218px -102px;}

替换这段代码即可实现横向的排列。

[小结]
第一部分中,我们讨论了用列表元素实现状柱图的方法;在本部分中,我们又讨论了用表格元素
实现柱状图的方法;下一部分,我们将会用两个种方法来实现更加复杂的柱状图效果;最后,我们会综合比较两个方法的存在的问题,并选择其中一种较好的应用于我们的网站开发中……



共有(4)条评论

锐风 发表于 2008-5-05 at 10:18 #1楼

这次不错, 不是绝对定位了!

[回复]


锐风 发表于 2008-5-05 at 10:20 #2楼

鄂.. 刚才没仔细看..

[回复]


lijing0033 发表于 2008-5-07 at 08:52 #3楼

发现你这里月来月多这种技术原创文章了,赞一个[reply=dudo,2009-04-25 09:30 PM]慢慢积累,呵呵[/reply]

[回复]


lijing0033 发表于 2008-5-09 at 18:55 #4楼

最好还是用dl/dt/dd,语义话标签是趋势啊[reply=dudo,2009-04-25 09:30 PM]其实做柱状图的话感觉还是用

,因为

专门就是用来显示数据的,去除样式不看,就一个完事的数据表[/reply]

[回复]


随便说两句
名字:
Email:
网站:
内容:

无觅相关文章插件,快速提升流量