☼ 歡迎光臨!麻煩把跟文章無關的留言(或問題)留在留言板,請勿用注音文,謝謝。科學相關文章或交流歡迎到臉書頁(見右欄)。
在這裡先簡單說一下部落格的外觀語法。

我們先看一下整個部落格的結構圖吧!



首先,先講一下部落格最底層,也就是主背景的部份。這個部份屬於html語法,如下圖中框住的地方,包括了最底層的背景(深紫色)和右邊捲軸的地方。主背景通常會被#Container (上圖桃紅色框框)蓋掉,沒被蓋到的地方就剩下圖框住的地方,也是唯一能看到主背景是什麼的地方。



下面是上圖中主背景的語法:

/*部落的主背景(多被container遮蓋可不用理會)*/
HTML{
SCROLLBAR-FACE-COLOR: #FFD9EC;
SCROLLBAR-HIGHLIGHT-COLOR: #FFF0F8;
SCROLLBAR-3DLIGHT-COLOR: #FFF0F8;
SCROLLBAR-ARROW-COLOR: #FF5EAE;
SCROLLBAR-TRACK-COLOR: #E7CEFF;
SCROLLBAR-DARKSHADOW-COLOR: #CE9DFF;
SCROLLBAR-BASE-COLOR: #FFCCE6;
background-color: #400040;
}


再來,要講的是部落格最重要的門面(下圖):部落格名稱和介紹,還有不可或缺的、代表部落格風格的圖片。



我用的樣式是改自CSSstyle的raindrop。

1. 橫幅/部落格頂部的圖:#Top

#Top {
height: 360px;
width: 920px;
text-align: left;
background:url(xxx.jpg) #000000;
background-repeat: no-repeat;
background-position: 85% 50%;
}


可以從語法看出,除了圖片以外,我把背景顏色設成黑色(#000000),這樣看起來好像整塊都是圖片,其實黑色的地方並不是圖片,只是黑色的背景而已。所以,#Top並不只是頂部的圖而已,它是整個區塊,通常這個區塊都會放圖片裝飾,所以好像#Top就是指部落格頂部的圖。關於#Top區塊,在 [CSS06][CSS 08] 兩篇文章中都有詳細解說。

2. 部落格名稱:#BlogHeader

#BlogHeader {
text-align:left;
font-family: Tahoma;
font-size: 32px;
font-weight: bold;
padding: 80px 0px 0px 60px;
}


3. 部落格敘述:#BlogDescr

#BlogDescr {
font-family : tahoma;
color: #FFFFFF;
font-size: 11px;
padding: 3px 0px 0px 60px;
}


4. 我的地盤:#Topmanu

#Topmenu {
background: #000000;
color :#ffffff;
font-size:0px;
position: absolute;
top: 25px; left: 120px;
}

#Topmenu a {
color: #E7CEFF;
font-size: 11px;
margin-right: 20px;
}


【補充】

#Topmenu 的font-size 如果設大於1px 會出現( | )符號在連結字前面,會變成:

xxx的名片 | xxx的部落格 | xxx的相簿

#Topmenu a 為連結字體的設定。

如果選擇的樣式的「我的地盤」的部份是放在左右欄選單,就會沒有這項語法。

底下這張圖說的則是部落格外觀大綱中的其中兩項:#Container 和 #pagefooter。



如上圖所示,#Container 包含了#Top 和#pagefooter 兩項,而這三項的寬我都設成:920px

#Container {
width: 920px;
text-align: left;
margin-left: auto;
margin-right: auto;
border-left: dashed 1px #9933FF;
border-right: dashed 1px #9933FF;
background-color: #FFFFFF;
}


把語法對照圖片,可以看出#Container 的左右兩個虛線邊界(border-right/left: dashed),還有白色的背景(background-color: #FFFFFF)。

#pagefooter {
background-color: #FFD9EC;
clear : both;
width: 920px;
color: gray;
border-top: dashed 1px #FF5EAE;
padding-top: 10px;
margin-top: 30px;
text-align: center;
font-size: 11px;
padding-bottom: 10px;
margin-left: 0px;
margin-right: 0px;
}


對照語法和圖片,一樣可以看到#pagefooter 上面的虛線邊界(border-top: dashed),還有粉紅色的背景顏色和向中對齊的文字(text-align: center)。











創作者介紹

min'cellanea

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


留言列表 (1)

發表留言
  • ponde
  • 請教

    請問有沒有辦法讓最底層的主背景不被遮蓋呢?上面那些框框的背景顏色能設置成透明嗎?
  • 應該是有,不過我還沒研究,而且目前正在旅行中,無法幫你找資料,不好意思唷!

    minc 於 2007/08/31 09:45 回覆

找更多相關文章與討論