周剑强

(忻州职业技术学院，山西忻州 034000)

0 引言

人们经常会用图表来形象地表示数据，网页设计中也会碰到这个问题，比如学校网站中出现的成绩统计图表，如图1所示。传统的方法做这种网页必须是先制作图表图片，再把图片对象插入到网页当中，每次成绩统计都得做一个新图片。现在，我们使用CSS技术也可以制作漂亮的图表，而且图表数据是可变的。我们使用CSS代码构建一个成绩统计表，每次考试后只须改变代码中对应容器的高度值就改变了它所代表的成绩，这样就把我们从不断的制作图片中解放出来了。

图1 网页中的图表

1 CSS技术构建条状图的原理

首先使用CSS代码来构建一个简单的条状图，如图2所示。这里使用一个div对象内嵌一个span对象。我们要用span对象的宽度来形象地表示数据，宽度为“80%”就代表“80”这个数据，宽度为“60%”就代表“60”这个数据。具体代码如下:

图2 简单条状图

CSS样式表根据代码位置的不同分为行间样式表、内部样式表和外部样式表，直接书写于对象标签中的是行间样式表，集中书写在网页起首位置的是内部样式表，独立写在一个CSS文件中的是外部样式表。“style="width:80%”这句代码用来定义span对象的宽度，它直接写于span标签中，属于行间样式表。在这里，使用行间样式表是为了便于修改span对象的宽度，从而灵活改变它所代表的数据。div和span还各自有一个内部样式“tm”和“tn”，它们的代码如下:

在CSS样式表中，对象的宽度和高度可以以百分比为单位来设置，百分比的基数是它父级对象的宽度或高度。……