《真愛黑白配》

加入背景圖片

背景就是 BODY


把你準備好的背景圖片，上傳到相簿，取得「圖片網址」
然後在樣式表最下方，加上這一句：

BODY {background:url(圖片網址) no-repeat left bottom;}

儲存後按預覽，就可以看到背景圖片出現了～

如果你覺得圖片「太大」或「太小」，可以先用小畫家 把圖片做成適當大小

背景圖片要重覆嗎？

想想看，你的背景圖片要重覆嗎？在樣式表最下方加上：

BODY {background-repeat: repeat-x;}

效果就像這樣，左右重覆～

如果加上這個，就是上下重覆：

BODY {background-repeat: repeat-y;}

加上這個，就是上下左右都重覆：

BODY {background-repeat: repeat;}

背景圖片怎麼移動？

直接用這個大絕招：

BODY {background-position: 10% 10%; /*背景圖片的座標*/}
紅色數字就是背景圖片的「座標」，你可以自由調整


或是移動「盒子」的位置

我們也可以移動中間這個「盒子」，讓它不要蓋住背景圖片
盒子就是 #main2

在樣式表最下方加上這一句：

#main2 {margin-top: 85px; margin-left: 210px;}
紅色數字就是「盒子」 跟上方、左邊的距離，你可以自由調整

背景顏色

要如何改背景顏色呢？在樣式表最下方加上：

BODY {background-color: #FFFF00;}
紅字就是色碼，可以從 色碼表 裡面挑選你要的

在挑選背景圖片的時候，就要考慮好
如果你要做黑色背景的樣式，圖片最好也是黑底，才會搭配


如果你的圖片夠大張，能夠佔滿整個版面（1024 x 600以上）


那麼就不用煩惱「背景顏色」的問題了。也是一個好辦法

招牌是什麼？

網誌最上面，就是招牌（也有人叫作「橫幅」）

招牌就是 #banner

招牌的大小和顏色

怎麼改變招牌的樣子呢？在樣式表最下方，加入這一句：

#banner {
background: #FFFF00; /*招牌顏色*/
width: 800px; /*寬度*/
height: 150px; /*高度*/}
紅色的數值可以自己決定，請利用 色碼表

網誌名稱

網誌名稱就是 #pageheader h1 a

在樣式表最下方，加入這一段：

#pageheader h1 a {
font-size: 60px; /*網誌名稱的大小*/
color: #AA0000; /*網誌名稱的顏色*/}
#pageheader h1 a:hover {
color: #FFFFFF; /*網誌名稱，滑鼠移上去時的顏色*/}

你也可以移動一下「網誌名稱」：

#pageheader h1 {text-align: right; /*網誌名稱靠右邊*/}
#pageheader h1 {text-align: center; /*網誌名稱靠中間*/}
#pageheader h1 {text-align: left; /*網誌名稱靠左邊*/}

網誌描述

網誌描述就是 .description
在樣式表最下方，加入這一段：

.description {
top: 160px; /*網誌描述跟上方的距離*/
left: 80px; /*網誌描述跟左邊的距離*/
font-size: 30px; /*網誌描述的大小*/
color: #660077; /*網誌描述的顏色*/}

就可以做變化～

怎麼用自己的圖片當招牌

先把圖片上傳到相簿，取得圖片網址，然後在樣式表加入：

#banner {background:url(圖片網址) no-repeat center top;}

就像這樣，掛上了自己做的圖片～
不過，網誌名稱會跟圖片打架，我們把它隱藏起來：

#pageheader h1 a { visibility: hidden;}

文章區在哪裡？

文章區就是 #content

它包含了「日期」、「文章標題」、「內文」、「作者」這幾樣東西。


文章區的顏色

首先，我們來幫文章區換顏色。在樣式表最下方，加上這句：

#content {background: #AAFFEE;}
紅色的數值就是色碼，你可以自己決定，請參考 色碼表

就像這樣，換上你想要的色彩～
你也可以幫文章區加個外框，用下面這一句：

#content {border:#55AA00 solid 10px;}
10px就是外框的粗細，你可以自己決定數值

日期

日期就是 .date　要怎麼改變呢？

只要在樣式表最下方，加入這一段：

.date {
font-size: 16px; /*日期的大小*/
background: #FFB3FF; /*日期的背景顏色*/
font-color: #FFFFFF; /*日期的文字顏色*/
border: #FFFFFF solid 2px ; /*日期的外框顏色*/}
數值都可以自己決定，如果不要外框，就設成0px

就能幫日期做變化了～

文章標題

文章標題就是 .title 只要在樣式表最下方，加入這一段：　

.title {
font-size: 18px; /*文章標題大小*/
color: #5599FF; /*標題字的顏色*/
padding-left: 30px; /*文章標題跟左邊的距離*/}

就能幫文章標題做變化～

你可能會想在標題前面，放個小圖案。加上這一句就可以了：

.title {background:url(圖片網址) no-repeat;}

內文


內文就是 .innertext 在樣式表最下方，加入這一段：

.innertext {
font-size: 16px; /*內文字體大小*/
color: #550088; /*內文顏色*/}

就能幫內文做變化～

作者區

「作者區」就是 .posted 在樣式表最下方，加入這段：


.posted {font-size: 12px; /*作者區文字大小*/
color: #7700BB; /*發文時間顏色*/}
.posted a {color: #FFAA33; /*回覆、引用、轉寄、檢舉的顏色*/}
.posted a:hover {color: #8C0044; /*滑鼠經過的顏色*/}

就能幫「作者區」做變化～

繼續閱讀


「繼續閱讀」就是 .extended 在樣式表加入這段：

.extended {font-size: 18px; /*繼續閱讀的大小*/}
.extended a {color: #FF0088; /*繼續閱讀的顏色*/}
.extended a:hover {color: #C10066; /*滑鼠經過時的顏色*/}

就能幫「繼續閱讀」做變化
你還可以再加上這句：

.extended a { padding:2px;
background: #FFB3FF; /*繼續閱讀的底色*/
border: #FFFFFF solid 1px; /*繼續閱讀的外框顏色、粗細*/}

會給它一個底色跟外框滿漂亮的

側邊盒子和資料夾

側邊盒子就是 #links （也有人叫「側邊欄」、「連結區」）
側邊盒子裡，有「最新文章」、「文章分類」、「最新回應」…等
這些東西則叫做「資料夾」

側邊盒子的顏色

現在，我們來給整個「側邊盒子」，塗上漂亮的色彩！
在樣式表的最下方，加入這一段：

#links {background: #E8CCFF;}
紅字就是色碼，可以從 色碼表 裡面挑選你要的

資料夾標題設計

資料夾的標題就是 .sidetitle
怎麼重新打造呢？在樣式表最下方，加上這段：

.sidetitle {
background: #E93EFF; /*標題底色 */
border: #FFFFFF solid 1px; /*外框色彩和粗細*/
font-size: 12px; /*標題文字大小*/
color: #FFFFFF; /*標題文字顏色*/
text-align: center; /*標題文字靠中間*/}

資料夾裡的文字

資料夾裡的文字就是 .side a
在樣式表最下方，加上這一段：

.side a {
font-size: 11px; /*資料夾裡文字大小*/
color: #0044BB; /*資料夾裡文字顏色*/}
.side a:hover {color: #008800;} ; /*滑鼠經過時的顏色*/}

就可以做出變化啦～

圖解：
http://www.wretch.cc/blog/Umod/3614657

http://www.wretch.cc/blog/Umod/3614671

http://www.wretch.cc/blog/Umod/3614772

http://www.wretch.cc/blog/Umod/3614781

http://www.wretch.cc/blog/Umod/3614794