close

一般多數部落格的導覽列都是在右邊, 不過難免會有一些『左派份子』, 喜歡導覽列在左邊, 這時該怎麼調整？

很簡單！只要隨著以下介紹修改區塊的配置與邊界設定, 很快就可以搞定。

要修改的 CSS 語法說明
雖然接著我們要做導覽列的搬移, 但實際的動作比較像是調換位置, 也就是把導覽列 (連結區) 和文章區塊的位置對調, 因此需要動到這兩個區塊的設定。在修改之前, 請先確認兩區塊的標籤名稱：

  樂多日誌 無名小站
文章區 #content #content
導覽列 #links #links

修改區塊的配置
確定區塊標籤後, 接著就請您修改區塊設定。請先找到 #content 區塊設定：
#content{
FLOAT:left;
MARGIN:0px 0px 0px 70px;
WIDTH:550px;
FONT-WEIGHT:400;
}		 → #content{
FLOAT:right;
MARGIN:0px 0px 0px 70px;
WIDTH:550px;
FONT-WEIGHT:400;
}
然後是 #links 的部份：
#links {
FLOAT: right;
MARGIN:0px 40px 0px 0px;
WIDTH:190px;
}		 → #links {
FLOAT: left;
MARGIN:0px 40px 0px 0px;
WIDTH:190px;
}
套用儲存之後您可以看到兩個區塊確實對調了, 但是整個版面卻亂掉了：

修改區塊的邊界設定
為了讓版面更協調, 勢必要再調整區塊的邊界設定。若您 CSS 修改經驗還不豐富, 相信一定很納悶要設多少才能剛好對齊；通常是要反覆測試才能有完美的結果, 不過此處我們是將兩個區塊對調, 因此只要將原先區塊的邊界設定也對調就搞定了！
原先是：
#content{
FLOAT:right;
MARGIN:0px 0px 0px 70px;
WIDTH:550px;
FONT-WEIGHT:400;
}
…
#links {
FLOAT: left;
MARGIN:0px 40px 0px 0px;
WIDTH:190px;
}		 → #content{
FLOAT:right;
MARGIN:0px 0px 0px 70px;
WIDTH:550px;
FONT-WEIGHT:400;
}
…
#links {
FLOAT: left;
MARGIN:0px 0px 0px 70px;
WIDTH:190px;
}


都修改完畢後, 導覽列就從右搬到左, 而且版面都很整齊喔！

arrow
arrow
    全站熱搜

    Fong Mong Fe 發表在 痞客邦 留言(0) 人氣()

    E-mail轉寄