以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

用 CSS 製作圖表

十二月 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'

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: