☜♡☞ Fiona's blog ☜♡☞

什麼叫做 "破版" 呢？通常內容都被放在一個四四方方的區塊中，不論是圖形或文字都一樣。 "破版" 的話就是讓這些圖形或文字凸出那個區塊，像小正正教室部落格標題圖案，那個大頭人物那樣，凸出原本所在的方塊。

怎麼做呢？先來複習一下將部落格標題文字替換為圖形的 CSS 語法：

#yblogtitle h1 {
    display:block;
    float:left;
    background:url(http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;
    width:136px;
    height:126px;
    font-size:0;
    line-height:0;
    text-indent:-5000px;
    overflow:hidden;
    cursor:pointer;
    cursor:hand;
}

如果你忘記這段語法是什麼意思的話，不妨看看這裡。接著要讓它向上凸出原本的區塊，多加上 position:absolute 以及設定負數的座標值即可：

position:absolute;
top:-50px;

如果你忘記 position:absolute 的用法，也可以看這裡。因為它的外層區塊 #yblogtitle 已經有 position:relative 這個屬性了，這是在部落格原本的系統裡面就已經設定好的，所以不需要再加一次。如果測試後位置還是怪怪的話，還是自行加上 position:relative 好了：

#yblogtitle .thd{position:relative;}

你現在直接測試的話，會發現凸出去的部分被切掉了（可愛的小正正人物被斷頭 ），必須再另外加上一段 CSS，讓超出區塊的部分也能顯示出來，才不會被切掉：

#yblogtitle{overflow:visible;}

這樣就做到 "破版" 的效果了！不過因為標題圖案被設為 position:absolute，會和部落格介紹的文字重疊在一起。要避免它們重疊，只要將部落格介紹文字的左方邊界設大一點，避開標題圖案所在的位置即可：

#yblogtitle .tbd{margin-left:150px;}

that's all !!

相同的技巧不只可以使用在部落格標題，部落格中每一個欄位的標題文字都可以換成圖形並且破版哦！建議你現在就動手試試看吧！有問題的話可以回應這篇文章，小正正會盡其所能幫你解答的。

以下是完整的 CSS 語法，將它貼在自訂 CSS 裡面，並且更換圖片的路徑和寬度高度的相關數值就可以囉！

/* 自訂部落格標題 */
#yblogtitle{overflow:visible;}
#yblogtitle .thd{position:relative;}
#yblogtitle h1{display:block;float:left;background:url(http://www.class2u.idv.tw/images/class2u_logo5.gif) 0 0 no-repeat;width:136px;height:126px;cursor:pointer;cursor:hand;font-size:0;text-indent:-5000px;overflow:hidden;line-height:0;position:absolute;top:-50px;}
#yblogtitle .tbd{margin-left:150px;}