相信使用上次的教學CSS就不會看起來像一堆亂碼了



很明顯的在一堆程式碼的上面都有中文註解

也就是說在每一段的中文的下方更改CSS就只有那個地方會改變



再來看到好像會有一段中文註解會特別常特別顯眼

沒錯!那就是大區塊的分類



當然CSS往下看也會看到其他不同的分類

這些分類就代表不同的區塊



所謂的大範圍區就是最底層的背景



引用及回應列表就是在點入文章後的最下方讀者迴響的區塊

接下來

來教教如何更改每個區塊的背景!

在每個大區塊的第一個字串就是更改那個區塊的整體樣式

舉例

/* --------------------------------------------------------------- 大範圍區塊 ---------------------------------------------------------------*/

/*--整體設定--*/
body{
 font-size:small ;
 font-family:"Verdana" ;
}
#body-div{}

/*--超連結--*/
a{
 color:#006842 ;
 text-decoration:none ;
}
/*--滑鼠移動到超連結上時--*/
a:hover{
 color:red ;
 text-decoration: underline ;
}

 

 

 

 

 

 我們來把紅字的地方做分析

body{
 font-size:small ;
 font-family:"Verdana" ;
}


看不懂事吧~

來做個解釋吧..

這段可看為

body{   font-size:small ;font-family:"Verdana" ;   }

它只是有一句分一行

把"{  }"內的文字去掉

就變成了

body{   }

也就是說

body的意思就是它上面中文所說的大範圍的整體設定

也就是說只要在"{   }"加入語法就可以更改它的樣子了!

當然每個也一樣

記得!一定要在"{ }"裡面加語法哦!

不然會讓語法失效

那怎麼設背景呢?

就是在"{ }"裡加入圖片顯示的語法

就加入以下語法

background-image : url(圖片網址);

至於圖片網址是什麼?

就是圖片的來源網址

請看一下教學!



看到喜歡的圖片用滑鼠右鍵點選內容



解下來就複製上面的網址貼在框符裡就好了

就會變成

background-image : url(http://p9.p.pixnet.net/albums/userpics/9/9/545499/normal_1195912237.gif);

接下來就把這串語法貼在 body{ } 的大框符裡面

body{ background-image : url(http://p9.p.pixnet.net/albums/userpics/9/9/545499/normal_1195912237.gif);}

既然原本的語法是這樣

body{
 font-size:small ;
 font-family:"Verdana" ;
}

其他的語法先不用碰它

把剛剛弄好的背景圖片與法加入


body{
 font-size:small ;
 font-family:"Verdana" ;
background-image : url(http://p9.p.pixnet.net/albums/userpics/9/9/545499/normal_1195912237.gif);
}


就像這樣空一行再貼上語法

這樣才不會混亂



更改好了以後就按下最下面的更新



當然是確定拉...

還是你要點×(驚)

當然幾乎每個地方都可以用這個來更改背景

當然圖片的大小也要自己做衡量

接下來要教大家如何設定圖的位子和區塊大小



剛插入圖片居然是這樣子

因為你沒有更改區塊大小

所以圖和區塊不符合

這很簡單只要加入

height:圖片高度數字px;

width:圖片寬度數字px;

寬高可以在要複製圖片來源網址的時候得知




960 X 589

也就是寬X高

所以語法就是

height:589px;

width:960px;

跟圖片語法一樣

插入{ }內

在更新就OK了!

但是要注意!

這個方法是要讓圖和區塊對準好

避免圖和區塊之間有小縫隙還要慢慢改數字

如果圖片小過於區塊

圖片應該就在上傳的時候就應該調整好

接下來還有其他的語法可以改變圖片顯示的樣子

background-repeat : repeat; 
(
背景圖片重複排列)

background-repeat:no-repeat; 
(圖片不重覆)

background-repeat:repeat-x;
(圖片以X軸方向重覆)

background-repeat:repeat-y;
(圖片以Y軸方向重覆)

background-position : right;
(圖片位置靠右)

background-position : left;
(圖片圖靠左)

background-position : center;
(圖片圖置中)

以上紅字的語法直接插入{ }就可以了

不需要做特殊的更改!



阿!2個帳號登來登去不小心把主頁的CSS洗掉了

全部從打(沒有備份阿~~!)

上面的圖仔細看一下

我跑到蒼&月的網誌去聽音樂(笑)

 

創作者介紹

never12606 發表在 痞客邦 留言(9) 人氣()


留言列表 (9)

發表留言
  • FakeCurlArrow
  • 我都把 長度調成寬度... 難怪都怪怪的
  • 如果怪怪的就把數字反過來吧~

    never12606 於 2007/11/29 18:35 回覆

  • asakuratiny
  • 要是當初有這麼詳盡的教學

    在下就不用改得那麼辛苦了

    YA!今後又多一個可參考的地方
  • orange麻
  • 加油!加油!
    看完你的部落格教學
    終於稍微懂得要怎弄了...><"
    有空多教一下我們吧^^
  • 哈哈!
    可以直接用迴響發問~

    never12606 於 2007/12/09 09:37 回覆

  • x123429
  • 好辛苦喔

    發表了這麼細心的圖文教學
    我先收下了
    好需要這個

    希望腦袋空空的我可以學會
  • 哈哈!
    還好啦
    如果有疑問可以用回響發問

    never12606 於 2008/01/06 08:22 回覆

  • thwasdf
  • 請問要將高跟寬還有位置的貼哪一格?
    我不知是哪一格ㄟ?
  • 只要貼在{}裡面都正確
    只是要看看自己設定哪個區塊
    如果是剛學的話可從CSS教學第1篇開始(最下面那一篇)
    http://blog.pixnet.net/never12606/category/792063(CSS教學所有文章)
    現在是考試期間.還不會發新教學
    (那海報不錯)

    never12606 於 2008/01/18 06:45 回覆

  • thwasdf
  • 不好意思,我不知道為什麼,怎麼調圖片大小,變的都是我的主文部份,圖片大小都沒變= =
  • 通常圖都是是先用繪圖軟體用好的(稱素材
    )

    never12606 於 2008/01/18 22:49 回覆

  • thwasdf
  • 又是我,怎麼把主要內容的背景調成透明的,不然都背景白的會遮住我的圖...
  • 是說文章部份嗎?
    再拉到你要改的區塊或許你會看到
    background:#fff;
    就代表你這個區塊是白色底哦~~
    只把整句刪掉就會變透明了
    或是把#fff改成#transparent
    #fff→白色
    #transparent→透明

    never12606 於 2008/01/18 22:57 回覆

  • mymei6928
  • 拍拍手

    您的教學真的很讓我受用XD
    詞窮啊~找不到更好的形容詞
    本來想寫像我這笨的也看的懂得教學
    但又覺得這樣好像 作者也不XXOO
    沒事沒事~以上兩句話當沒看到(酸~)
  • 原來如此....(笑

    never12606 於 2008/07/17 23:18 回覆

  • henry888
  • 迴響背景

    請問我想更改留下迴響的背景,在css語法上應更改哪裡?