網友FB私訊詢問:
請問痞客邦部落格怎麼做出導覽列呢?就是把文章分類搬到上方,謝謝!
歐飛回覆:
請google一下「痞客邦部落格版型」就可能看到很多CSS的版型教學。
簡單講你一定要先有一點點HTML及CSS的基礎,完全不會也沒關係,只要您願意google一下就可以自學HTML及CSS了,這個真的不難,這不是寫程式,這只是一種「語法」。
我沒有辦法用一篇文章教你全部的CSS,我在部落格實戰系列文中有寫過兩集CSS基礎教學,請參考:HTML及CSS語法入門、部落格版型CSS的修改。
好,接下來我告訴你如何把痞客邦部落格的「文章分類」從側欄移到上面做成導覽列。
一開始你要先有一個概念,為何可以移上去?這叫「相對位置」與「絕對位置」。重點就是先設定一個相對位置,然後把「文章分類」改成絕對位置,這樣就上去了。
我拆分成以下六個步驟,我只講關鍵語法:
Step01:設定相對位置
#container3{
position:relative; /*把container3設定成相對位置*/
}
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; / *文字置中 */
}
Step06:設定「文章分類」的超連結滑鼠移動效果
#category .box-text li a:hover{
background-color:#4ba2db; /* 底色變色 */
color:#fff; /* 文字變色 */
}
好,我把關鍵的語法全部寫出來了,這樣就能做出「導覽列」的效果了。
再來,如果您的文章分類有「二層」,那麼導覽列也可以做成二層式下拉選單,請參考「隨手記錄」的教學文:【CSS】- PIXNET 痞客邦部落格 - 下拉選單
補充:
如果您想自學CSS,又覺得網路上的教學有一點霧煞煞看不懂,我推薦你兩本書,這兩本是有史以來最強的HTML及CSS教學書。
二、活用XHTML/HTML+CSS並不難:幫你搞定所有的網頁
留言列表