以下為本站文章分類清單

  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'

以下為文章回應區

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

How do you get a growth spurt?   2017/8/4 上午 11:29:00

Hello to every , because I am in fact keen of reading this website's post to be
updated daily. It includes fastidious data.

cristineemley.weebly.com   2017/7/31 上午 01:35:00

Thanks for finally talking about >【卜維丰】用 CSS 製作圖表
<Loved it!

How long does Achilles tendonitis last for?   2017/7/29 上午 02:18:00

Normally I do not learn article on blogs, but
I wish to say that this write-up very compelled me to try and do so!
Your writing style has been surprised me. Thank you, very nice post.

What is the tendon at the back of your ankle?   2017/7/21 下午 03:09:00

Hi there, just became alert to your blog through Google,
and found that it is really informative. I'm gonna watch out for brussels.
I will appreciate if you continue this in future. Lots of people will be benefited from your writing.

Cheers!

foot pain and tingling   2017/7/3 下午 11:37:00

We are a group of volunteers and opening a brand
new scheme in our community. Your website provided us with helpful information to work on.
You have performed an impressive process and our entire community
can be thankful to you.

foot pain for months   2017/7/3 下午 08:22:00

I am very happy to read this. This is the kind of manual that needs to be given and not the accidental misinformation that is at the other blogs.
Appreciate your sharing this greatest doc.

manicure   2017/5/3 下午 09:24:00

Good day very nice blog!! Guy .. Beautiful
.. Wonderful .. I will bookmark your blog and take the feeds additionally?
I am satisfied to find a lot of helpful information here in the publish, we need work out extra techniques
on this regard, thank you for sharing. . .
. . .

manicure   2017/5/3 下午 06:29:00

I just couldn't go away your site prior to suggesting that I really enjoyed the standard
information a person provide on your visitors?
Is going to be back often to check up on new posts

BHW   2017/4/13 下午 10:01:00

Spot on with this write-up, I honestly believe that this web
site needs a great deal more attention. I'll probably be returning to read through more, thanks
for the advice!

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