~ 莎 錄 ~

今天終於動工修改自己的版面了，一直苦惱於不懂CSS ，不知道如何改出自己喜歡的版面，這裡提供的免費版面總是有些格式自己不喜歡，GOOGLE了幾個部落客文章後，發現其實沒那麼難。

有很多部落客寫得很詳細，步驟清楚，還附上圖片說明，所以馬上就可以修改，不用花費太多時間學習CSS

首先修改的是我一直不喜歡的 顯示寬度，現在的筆電是寬螢幕的，但是顯示的版面都只有在中間，像是以前的舊格式，

語法學習來自 初心小格 

第一步是先套用自己想要的版面格式，到customize style  的 simple verison中挑選 

我的版面是分別有上方的header 刊頭 / 左邊的 content 日誌 / 右邊的 links 廣告 三大區塊

第二步是調整顯示寬度 (到customize style  的 source editing ) 

左邊的文章寬度, 直接搜尋 "content"

#content {

float:left;
width:70%;  

右邊的廣告欄直接搜尋 "links"

#links {
float:right;
width:25%;
overflow:hidden;
}

Note: 用百分比方式，這樣會隨著網頁的大小來顯示文章的寬度都是整個寬度的70%, 也可以直接輸入600px or 500px 或是自己想要的寬度。
另外 70+25還沒到100的原因是讓文章和廣告中間還有點距離，才不會黏再一起。

第三個是文章標題的底圖，搜尋.article-head 或是background

把底圖的網址換成自己想要的圖片位置，或是色碼 (參考色碼圖)

左邊文章標題的底圖更換

.article-head {
overflow:hidden;
height:50px;
line-height:32px;
background:url(http://photo.love12.tw/photo/back/lace/0243.gif);
padding:0 0 3px 10px;
}

右邊視窗標題的底圖更換, 搜尋.box-title 或是background

.box-title {
height:40px;
line-height:32px;
overflow:hidden;
color:#333;
background:url(http://photo.love12.tw/photo/back/motion/0072.gif);
padding:0 10px 3px 30px;
}

第四個是修改刊頭的圖片, 直接搜尋 "banner"

#banner {

height:300px;
background:url(http://photo.love12.tw/photo/back/motion/0101.gif);
}

今天的部分都還算簡單容易上手，改天繼續學習更進階的囉~~