十二月 | 65000 |
十一月 | 60000 |
十月 | 55000 |
九月 | 50000 |
八月 | 45000 |
七月 | 40000 |
六月 | 35000 |
五月 | 30000 |
四月 | 25000 |
三月 | 20000 |
二月 | 15000 |
一月 | 10000 |
看起來有點樣子,是吧!很容易,利用背景及留白即可完成。
上圖是一個表格,重點是把表格用絕對大小指定,如:
<table width="600" border="0" cellspacing="1" cellpadding="2"> |
準份一張用來製作圖表的圖片(需要使用的網友們,按右鍵另存新檔即可):
圖片長度可以比和表格寬度大,如此才能表現如果是滿格的效果。
第一欄寫月份欄,在本例定為 60 像素,有了這些數值,圖表長度該怎麼表現,就由你自己來計算,圖表部份,語法如:
<td style="background:url(images/gBar.png) -500px center no-repeat;padding-left:106px;">10000</td> |
background:url(images/gBar.png) 這部份沒有問題,剩下的以 -500px 及 center 兩個屬性把背景圖的起始位置移到儲存格之外,注意,一定要加上 no-repeat,不然一切破功。
以本例而言,圖表總寬是 600 像素,一月份背景左移 500 像素,表現在畫面上的寬度剩 100 像素,所以,這裡的左留白(padding-left),設成了 106px,是不希望文字和圖片貼的太近。
完成啦!就這麼簡單。
卜維丰 2/17 07'
同意轉載,不過麻煩看一下轉載需知