【CSS教學】痞客邦部落格怎麼做出導覽列呢？就是把文章分類搬到上方 @ 歐飛先生

文章分類導覽.jpg
網友FB私訊詢問：
請問痞客邦部落格怎麼做出導覽列呢？就是把文章分類搬到上方，謝謝！

歐飛回覆：
請google一下「痞客邦部落格版型」就可能看到很多CSS的版型教學。

簡單講你一定要先有一點點HTML及CSS的基礎，完全不會也沒關係，只要您願意google一下就可以自學HTML及CSS了，這個真的不難，這不是寫程式，這只是一種「語法」。

我沒有辦法用一篇文章教你全部的CSS，我在部落格實戰系列文中有寫過兩集CSS基礎教學，請參考：HTML及CSS語法入門、部落格版型CSS的修改。

好，接下來我告訴你如何把痞客邦部落格的「文章分類」從側欄移到上面做成導覽列。

一開始你要先有一個概念，為何可以移上去？這叫「相對位置」與「絕對位置」。重點就是先設定一個相對位置，然後把「文章分類」改成絕對位置，這樣就上去了。

我拆分成以下六個步驟，我只講關鍵語法：

Step01：設定相對位置
#container3{
position:relative; 　 /*把container3設定成相對位置*/
}

文章分類導覽-01.jpg
Step02：設定部落格「文章分類」的絕對位置
#category{
position:absolute; 　 /*把category設定成絕對位置*/
top:103px; 　　　　 /*指定距離上方103px*/
left:0px; 　　　　　 /*指定距離左方0px*/
}

Step03：設定部落格「文章分類」的標題隱藏
#category .box-title{
display:none;　　　/* 文章分類這四個字不要出現 */
}

Step04：設定部落格「文章分類」的向左浮動
#category .box-text li{
float:left;   　/* li 向左浮動 */
}

Step05：設定「文章分類」的超連結區塊顯示
#category .box-text li a{
display:block;   　　　/* li a 區塊顯示 */
width:120px; 　　　  /* 指定寬度120px */
text-align:center; 　  / *文字置中 */
}

文章分類導覽-02.jpg
Step06：設定「文章分類」的超連結滑鼠移動效果
#category .box-text li a:hover{
background-color:#4ba2db; 　　 /* 底色變色 */
color:#fff; 　　　　　　　　　　 /* 文字變色 */
}