這篇來講一下選單的部份,我們先來看一下基本結構圖吧!
有紫色背景的地方是Sideblock 的範圍(margin: 0px),包括了Sidetitle 和Sidebody 兩部份。藍色框顯示了Sidetitle的整個區塊範圍,綠色框則是Sidebody 整個區塊範圍,也都是在 [margin: 0px] 的情況下。
整個右邊的選單是在 #Sidebar 的語法底下,完整的語法如下:
#Sidebar |
跟上面比較,多了SidebarHeader 和SidebarFooter 這兩部份,這兩個部份是optional。
橘色框框、灰紫色框框和桃紫色框框分別是SidebarHeader, Sideblock 和 SidebarFooter,可以在裡面放你想要的背景圖片,或單純只用背景顏色,框框代表這三個區塊的範圍大小。SidebarHeader 和SidebarFooter 如果不想要可以省略,並不是每個樣式都有這兩個區塊的語法,想要放圖片再加入這兩個區塊的語法即可。
礙於圖片大小,我並沒有放完整的語法在圖片裡,只留需要解釋的。
Sidebody 或Sidetitle 裡可以加自己想要的,或改成自己想要的樣式,
例如:
font-size (字體大小)
color (字體顏色)
background-color (區塊的背景顏色)
background-image (區塊的背景圖案)
border (區塊邊框)
若還不懂,下面是完整的Sidebody 語法供參考。
.Sidebody { |
【小小補充】
比較一下Sidebar 和Content。
#Sidebar { |
#Content { |
float
簡單來說,float 是指區塊的浮動性,區塊的垂直位置不變,只有水平位置會依照設定而移動:向左,或向右。如上面黃色框框裡的語法,Sidebar 在左邊(left),Content 在右邊(right)。
【補充】
選單內各項標籤與法如下(取自網友回答):
行 事 曆:#CalendarPlugin
文章分類:#CategoryPlugin
最新文章:#LatestArts
最新迴響:#LatestComments
最新引用:#LatestTrackbacks
每月彙整:#ArchivePlugin
我的連結:#LinksPlugin
新聞交換:#RSSPlugin
參關人氣:#PageviewPlugin
若想讓「連結列標題」和連結列內容」緊密一點,則加入下列語法:
.Sidebody p {
padding: 0px;
margin: 0px;
}