周劍強(qiáng)

(忻州職業(yè)技術(shù)學(xué)院，山西忻州 034000)

0 引言

人們經(jīng)常會(huì)用圖表來(lái)形象地表示數(shù)據(jù)，網(wǎng)頁(yè)設(shè)計(jì)中也會(huì)碰到這個(gè)問(wèn)題，比如學(xué)校網(wǎng)站中出現(xiàn)的成績(jī)統(tǒng)計(jì)圖表，如圖1所示。傳統(tǒng)的方法做這種網(wǎng)頁(yè)必須是先制作圖表圖片，再把圖片對(duì)象插入到網(wǎng)頁(yè)當(dāng)中，每次成績(jī)統(tǒng)計(jì)都得做一個(gè)新圖片?，F(xiàn)在，我們使用CSS技術(shù)也可以制作漂亮的圖表，而且圖表數(shù)據(jù)是可變的。我們使用CSS代碼構(gòu)建一個(gè)成績(jī)統(tǒng)計(jì)表，每次考試后只須改變代碼中對(duì)應(yīng)容器的高度值就改變了它所代表的成績(jī)，這樣就把我們從不斷的制作圖片中解放出來(lái)了。

圖1 網(wǎng)頁(yè)中的圖表

1 CSS技術(shù)構(gòu)建條狀圖的原理

首先使用CSS代碼來(lái)構(gòu)建一個(gè)簡(jiǎn)單的條狀圖，如圖2所示。這里使用一個(gè)div對(duì)象內(nèi)嵌一個(gè)span對(duì)象。我們要用span對(duì)象的寬度來(lái)形象地表示數(shù)據(jù)，寬度為“80%”就代表“80”這個(gè)數(shù)據(jù)，寬度為“60%”就代表“60”這個(gè)數(shù)據(jù)。具體代碼如下:

圖2 簡(jiǎn)單條狀圖

CSS樣式表根據(jù)代碼位置的不同分為行間樣式表、內(nèi)部樣式表和外部樣式表，直接書(shū)寫(xiě)于對(duì)象標(biāo)簽中的是行間樣式表，集中書(shū)寫(xiě)在網(wǎng)頁(yè)起首位置的是內(nèi)部樣式表，獨(dú)立寫(xiě)在一個(gè)CSS文件中的是外部樣式表?！皊tyle="width:80%”這句代碼用來(lái)定義span對(duì)象的寬度，它直接寫(xiě)于span標(biāo)簽中，屬于行間樣式表。在這里，使用行間樣式表是為了便于修改span對(duì)象的寬度，從而靈活改變它所代表的數(shù)據(jù)。div和span還各自有一個(gè)內(nèi)部樣式“tm”和“tn”，它們的代碼如下:

在CSS樣式表中，對(duì)象的寬度和高度可以以百分比為單位來(lái)設(shè)置，百分比的基數(shù)是它父級(jí)對(duì)象的寬度或高度。在本例中，span的父級(jí)對(duì)象是div，所以它的寬度就以div的寬度為基數(shù)，div對(duì)象的寬度為200px，那么span對(duì)象的寬度就是80%*200px=160px。

CSS技術(shù)中，每個(gè)對(duì)象都有“display”屬性，用于設(shè)置對(duì)象是否顯示或如何顯示。如果屬性值是“block”，表示它為塊狀對(duì)象，默認(rèn)狀態(tài)下，每個(gè)塊狀對(duì)象單獨(dú)占用一行進(jìn)行顯示;如果屬性值是“inline”，表示它為內(nèi)聯(lián)對(duì)象，也叫行間對(duì)象。默認(rèn)狀態(tài)下，多個(gè)內(nèi)聯(lián)對(duì)象共同在一行內(nèi)顯示，而且對(duì)內(nèi)聯(lián)對(duì)象設(shè)置寬度值無(wú)效。

span對(duì)象默認(rèn)是一個(gè)內(nèi)聯(lián)對(duì)象，無(wú)法設(shè)置寬度，因此在“tn”中有“display:block”這句代碼，通過(guò)這句代碼把span對(duì)象強(qiáng)行設(shè)置為一個(gè)塊狀對(duì)象，可以有效地設(shè)置寬度。我們還給div對(duì)象設(shè)置了一個(gè)1px寬的邊框，給span對(duì)象設(shè)置了一個(gè)背景色，邊框和背景的顏色是一致的，為了美觀，在邊框和背景之間加了一個(gè)2px的間隙。

我們可以用這個(gè)條狀圖表示“80”這個(gè)數(shù)據(jù)，如果把span的寬度改為60%同時(shí)把里邊的數(shù)字改為60就可表示“60”這個(gè)數(shù)據(jù)了。

2 CSS成績(jī)圖表的設(shè)計(jì)

2.1 以“ul”為容器實(shí)現(xiàn)圖表

本文正是依據(jù)上邊條狀圖的原理，利用CSS技術(shù)來(lái)制作成績(jī)統(tǒng)計(jì)表，效果如圖3所示。由于成績(jī)統(tǒng)計(jì)表中有多個(gè)條狀圖，所以改用無(wú)序列表“ul”作為容器。每個(gè)“l(fā)i”標(biāo)簽形成一個(gè)條狀圖，代表一門(mén)成績(jī)。而每組“ul”標(biāo)簽包含多個(gè)“l(fā)i”標(biāo)簽，表示一個(gè)班的成績(jī)。具體代碼如下:

三組“ul”標(biāo)簽表示了三個(gè)班的成績(jī)，而每組“ul”標(biāo)簽中內(nèi)含三組“l(fā)i”標(biāo)簽，分別代表“語(yǔ)文”、“數(shù)學(xué)”、“英語(yǔ)”三門(mén)成績(jī)。它們的CSS樣式代碼如下:

圖3 成績(jī)統(tǒng)計(jì)圖

2.2 設(shè)置對(duì)象的浮動(dòng)屬性

在XHTML網(wǎng)頁(yè)中，body中的塊狀對(duì)象根據(jù)其前后順序從上到下依次顯示，這種顯示規(guī)則稱(chēng)作文檔流，而浮動(dòng)定位可以打破這種默認(rèn)的顯示規(guī)則?！癴loat”屬性就是用來(lái)設(shè)置浮動(dòng)定位的，如果其屬性值為“l(fā)eft”表示對(duì)象向左浮動(dòng)，從而清空右側(cè)位置用來(lái)放置下方的對(duì)象;如果其屬性值為“right”表示對(duì)象向右浮動(dòng)，從而清空左側(cè)位置用來(lái)放置下方的對(duì)象。設(shè)置浮動(dòng)定位以后，每個(gè)塊狀對(duì)象不再單獨(dú)占用一行，而是多個(gè)塊狀對(duì)象同時(shí)在一行內(nèi)顯示。

在CSS2.0中，“ul”元素的“display”屬性默認(rèn)為“block”，也就是說(shuō)它是一個(gè)塊狀對(duì)象，而且為了有效地設(shè)置寬度，“l(fā)i”也被強(qiáng)行設(shè)置為塊狀對(duì)象，依據(jù)文檔流原則它們都要單獨(dú)占用一行，從上到下依次顯示。在本例中，代表成績(jī)的條狀圖應(yīng)該位于同一水平線上，這樣才能對(duì)比成績(jī)的高低，所以多個(gè)“ul”和“l(fā)i”元素應(yīng)該在同一行內(nèi)顯示。因此，“tb”和“tb li”兩個(gè)選擇符中都設(shè)置了“float:left”這個(gè)屬性。

2.3 對(duì)象的定位

所有條狀圖必須底部對(duì)齊才能看出高度的差別，從而形象地顯示出分?jǐn)?shù)的高低差異，所以僅有浮動(dòng)定位還不夠，必須對(duì)“span”對(duì)象設(shè)置絕對(duì)定位，從而精確地控制它的底部位置，保證底部位于同一水平線上。通過(guò)“position:absolute;bottom:0px”這兩句代碼，給“span”對(duì)象設(shè)置了絕對(duì)定位。絕對(duì)定位的參照系是最近的已定位上級(jí)元素，所以要給“l(fā)i”元素進(jìn)行定位，“tb li”中“position:relative;”這句代碼給“l(fā)i”元素設(shè)置了相對(duì)定位。這樣定位的最后效果就是，每個(gè)“span”對(duì)象以它的上級(jí)元素“l(fā)i”為參照系絕對(duì)定位，“span”的底部位于“l(fā)i”元素的0px高度，從而保證了所有條狀圖底部位于同一水平線上。

“yw”、“sx”、“yy”三個(gè)樣式很簡(jiǎn)單，只是設(shè)置了三種條狀圖的背景色，三種顏色的條狀圖分別代表“語(yǔ)文”、“數(shù)學(xué)”、“英語(yǔ)”三門(mén)成績(jī)。通過(guò)以上方法，再加上適當(dāng)?shù)奈淖趾蜆?biāo)識(shí)，就可以形成一個(gè)完美的成績(jī)統(tǒng)計(jì)圖表，如圖4所示。

圖4 最終效果

4 結(jié)束語(yǔ)

綜上所述，利用CSS2.0技術(shù)，無(wú)須借助辦公或圖像處理軟件，就可以在網(wǎng)頁(yè)中構(gòu)建精確美觀的成績(jī)統(tǒng)計(jì)圖表。更為方便的是，這種圖表的數(shù)據(jù)源是可變的，每次考試后只要對(duì)代碼中的幾個(gè)數(shù)字稍加改動(dòng)就能生成新的圖表，減少了網(wǎng)站維護(hù)的工作量。

［1］Eric A.Meyer，李松峰.CSS Web站點(diǎn)設(shè)計(jì)手冊(cè)［M］.北京:機(jī)械工業(yè)出版社，2008.

［2］李超.CSS網(wǎng)站布局實(shí)錄［M］.北京:科學(xué)出版社，2007.

［3］邁耶.CSS權(quán)威指南［M］.北京:中國(guó)電力出版社，2008.

［4］Michael Russell.CSS 真的可以浮動(dòng)嗎?［OL］.http://www.ibm.com/develo-perworks/cn/web/wa-css/，2008.

［5］莫里，陳黎夫.CSS禪意花園［M］.北京:人民郵電出版社，2007.