改底圖....呃～應該說是首頁背景圖（p3）

問一個很簡單的問題

請問：首頁基本組成有哪一些？

A：圖片

B：文字

C：網頁連結（例如：評論或動態）

D：以上皆是

ANS:___________

解答請見明天水果日報D17版



























我沒那麼有錢，還刊報紙解答勒！

答案很簡單

就是...........D   <<<很冷！不好笑！

既然知道個人首頁的基本組成是：圖片、文字、網頁連結

那就是可以讓各位改的地方

＝＝＝＝＝＝分隔線＝＝＝＝＝＝


要怎樣利用一張圖片來佈置首頁？？

就像下面案例那一位人妻一樣

用了一張多啦A夢圖片來當首頁背景



那這一個語法要怎寫呢？？

非常簡單

如果你有先把之前交代的功課做完

您的miroko網路硬碟空間

應該有一張高解析度的圖

如果沒有做功課的朋友也沒關係

我也幫你做了一張測試圖

也可以讓你試試看

語法如下：

body {background-image: url(http://nicktasu.miroko.com.tw/123.jpg);}
  
語法說明：

1.通常css語法大概就是長上面那樣子，請發揮你的想像力！好比您在玩洋娃娃一樣，您可能把洋娃娃的「雙手」往上舉或是擺在胸前，也可能幫它整理「頭髮」，可能是綁辮子或是綁馬尾，所以呀！您會先「選定部位」再「改變動作」，這就是css基本修改觀念，因為css的語法它已經幫你把首頁分成很多區塊，只要您對每個區塊下指令動作，首頁自然就會有所改變。

2.「body」<<<它是css的一個區塊代碼，指的是整體首頁的底圖部分，反正呢～要改底圖就從這區塊代碼下去改！

3.「{}」大括號裡面就是指令動作，而上面語法background-image:url.....意思就是對body這一個區塊代碼作改變。而一個指令動作結束，要加上「;」。

4.本文最前面有講，首頁修改包含哪三種類型？一般而言指令動作background通常都是指對該區塊的底圖作改變，而文字改變通常會加上font，網頁連結改變方式則另行討論。

5.那語法要打在哪裡呢？請參考我另一篇文章
http://home.ck101.com/space.php?uid=987735&do=blog&id=54544
  
＝＝＝＝＝＝分隔線＝＝＝＝＝

試試看.......下面兩個語法.....會讓你有所領悟

body {background: red ;}

body {background: #0FF000 ;}

備註1：#0FF000是色碼表代號，請參考下列色碼表！
http://board.ek21.com/colortable.htm

備註2：顏色表示法有顏色代碼#RRGGBB、顏色英文名稱、顏色比重 RGB(%,%,%)、顏色數碼 RGB(#,#,#)這幾種。

有發覺到嘛？一個是把底色都變成紅色，另一個是把底色變成綠色
  
background-image  << 後面接圖片網址

background << 後面接顏色

＝＝＝＝＝＝分隔線＝＝＝＝＝

  body {background-image: url(http://nicktasu.miroko.com.tw/123.jpg);background-attachment:scroll;}

body {background-image: url(http://nicktasu.miroko.com.tw/123.jpg);background-attachment:fixed;}


上面兩個語法請您試試看

差異在哪邊？？？

有發現嘛？當您將畫面下拉的時候

第一個語法字體跟圖片會一起動

而第二個語法圖片固定，只有字體會動

通常第一個語法background-attachment:scroll這一部分可以省略不用理會，因為這是預設值。

這樣很簡單吧！

＝＝＝＝＝分隔線＝＝＝＝＝

body {background-image: url(http://img.carschina.com/upimg/gcck0307/200837134040477805.jpg);background-repeat: no-repeat;}

body {background-image: url(http://img.carschina.com/upimg/gcck0307/200837134040477805.jpg);background-repeat: repeat;}
  
請再試試看上面兩個語法

有發現第一個語法只有一台車車嘛？

而第二個語法卻有很多車車

background-repeat: repeat       這個指令動作就是底圖重複 （系統預設）
background-repeat: no-repeat  這個指令動作就是底圖不重複

問題：請想一下，下面這位大哥的網頁底圖是怎做得？
http://home.ck101.com/space.php?uid=1590028
  
A：去找一張大圖

B：不需要大圖，利用background-repeat: repeat 語法就可以了

ans：_____
  
答案是B，試試看下面語法

body {background-image: url(http://nicktasu.miroko.com.tw/0056.gif);background-repeat: repeat;}

其實底圖的真正大小只有下面圖示那樣大而已



這樣能了解background-repeat動作指令的用法嘛？

＝＝＝＝＝分隔線＝＝＝＝＝
body {background-image: url(http://img.carschina.com/upimg/gcck0307/200837134040477805.jpg);background-repeat: no-repeat;background-position:300px 300px;}

body {background-image: url(http://img.carschina.com/upimg/gcck0307/200837134040477805.jpg);background-repeat: no-repeat;background-position:100px 100px;}

請試試看上面兩個語法

有發現小紅車的位置是不是不一樣？？

background-position:這個動作指令就是說您的底圖要開始擺放的起始位置

但通常要伴隨background-repeat: no-repeat這指令，否則系統將視為background-repeat: repeat底圖重複，那background-repeat: no-repeat的指令意義就不大了。

而且起始位置的零點，是從您的銀幕最左上角開始算

而在 CSS 內可使用的長度單位有 pt (point)、px (pixel)、pc (pica, 1/6 in)、cm (centimeter)、 mm (milimeter)、% (percentage)。

＝＝＝＝＝分隔線＝＝＝＝＝

最後來個綜合練習吧～～～

題目：我要一隻海綿寶寶約在畫面中間，底圖固定，底色為藍色，海綿寶寶不重複

body {background: blue; background-image: url(http://nicktasu.miroko.com.tw/800x600.jpg);background-repeat: no-repeat;background-attachment:fixed;background-position:center;}


試試看上述解答度對不對吧～～

基本上以上介紹就是有關於首頁底圖的佈置基本語法了

希望您看得懂

這些解說...讓我想起以前在學html時候的情景....

小玥: 這些解說...讓我想起以前在學html時候的情景....

那有看懂嗎?

小玥: 這些解說...讓我想起以前在學html時候的情景....

那有看懂嗎?

看尬無薩薩啦~有手把手教學嗎~我大概只是應那種的~才學的會吧!

kgkgro1470: 看尬無薩薩啦~有手把手教學嗎~我大概只是應那種的~才學的會吧!

有手把手教學嗎~<<<啥？

我都弄很多範例了說～～

其實你動手試試看

應該很快就會懂了

大概懂一些些~說實在的.完全沒學過.有點難進入狀況.
不過還是感謝熱心教學.繼續撰研中~

.moto.: 大概懂一些些~說實在的.完全沒學過.有點難進入狀況.
不過還是感謝熱心教學.繼續撰研中~

期待你的作品

hiyagood: 期待你的作品

這樣說壓力好大喔.我只大概會把圖貼上.至於位置還在研究中 ^^"

hiyagood: 那有看懂嗎?

ok啦...差不多...

只是複雜很多...