相信使用上次的教學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洗掉了

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

上面的圖仔細看一下

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

 

arrow
arrow
    全站熱搜

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