相信使用上次的教學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洗掉了
全部從打(沒有備份阿~~!)
上面的圖仔細看一下
我跑到蒼&月的網誌去聽音樂(笑)
留言列表