這篇來講一下選單的部份,我們先來看一下基本結構圖吧!



有紫色背景的地方是Sideblock 的範圍(margin: 0px),包括了Sidetitle 和Sidebody 兩部份。藍色框顯示了Sidetitle的整個區塊範圍,綠色框則是Sidebody 整個區塊範圍,也都是在 [margin: 0px] 的情況下。

整個右邊的選單是在 #Sidebar 的語法底下,完整的語法如下:

#Sidebar
.SidebarHeader
.Sideblock
.Sidetitle h4
.Sidebody
.SidebarFooter


跟上面比較,多了SidebarHeader 和SidebarFooter 這兩部份,這兩個部份是optional。




橘色框框、灰紫色框框和桃紫色框框分別是SidebarHeader, Sideblock 和 SidebarFooter,可以在裡面放你想要的背景圖片,或單純只用背景顏色,框框代表這三個區塊的範圍大小。SidebarHeader 和SidebarFooter 如果不想要可以省略,並不是每個樣式都有這兩個區塊的語法,想要放圖片再加入這兩個區塊的語法即可。

礙於圖片大小,我並沒有放完整的語法在圖片裡,只留需要解釋的。
Sidebody 或Sidetitle 裡可以加自己想要的,或改成自己想要的樣式,
例如:
font-size (字體大小)
color (字體顏色)
background-color (區塊的背景顏色)
background-image (區塊的背景圖案)
border (區塊邊框)

若還不懂,下面是完整的Sidebody 語法供參考。

.Sidebody {
padding: 2px 5px 5px 5px;
background-color: #FFFFFF;
font-size: 10px;
color: #3F7D00;
}



【小小補充】

比較一下Sidebar 和Content。

#Sidebar {
width: 240px;
text-align: left;
float:right;
background-color: #FFFFFF;
margin-top: -180px;
}


#Content {
width: 680px;
float: left;
text-align: left;
background-color: #ffffff;
}



float
簡單來說,float 是指區塊的浮動性,區塊的垂直位置不變,只有水平位置會依照設定而移動:向左,或向右。如上面黃色框框裡的語法,Sidebar 在左邊(left),Content 在右邊(right)。


【補充】

選單內各項標籤與法如下(取自網友回答):

行 事 曆:#CalendarPlugin
文章分類:#CategoryPlugin
最新文章:#LatestArts
最新迴響:#LatestComments
最新引用:#LatestTrackbacks
每月彙整:#ArchivePlugin
我的連結:#LinksPlugin
新聞交換:#RSSPlugin
參關人氣:#PageviewPlugin


若想讓「連結列標題」和連結列內容」緊密一點,則加入下列語法:

.Sidebody p {
padding: 0px;
margin: 0px;
}








arrow
arrow
    全站熱搜

    minc 發表在 痞客邦 留言(1) 人氣()