☼ 歡迎光臨!麻煩把跟文章無關的留言(或問題)留在留言板,請勿用注音文,謝謝。科學相關文章或交流歡迎到臉書頁(見右欄)。
這篇來講一下選單的部份,我們先來看一下基本結構圖吧!



有紫色背景的地方是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;
}








創作者介紹

min'cellanea

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


留言列表 (1)

發表留言
  • 施媽媽
  • 請問有關wretch模板

    可以寫寫有關wretch模板的示範嗎?!
    因為我看了這一篇 找不到wretch模板中的sideblock.......... 麻煩你了!!
  • 不好意思耶,因為我沒有研究wretch 的模板,所以全部都只有grey 和grey2 的,短時間內也沒有時間研究wretch 的版型,不過很多網頁應該都有教學,例如:http://hit1205.blogdns.org/teach/

    minc 於 2007/05/16 14:21 回覆