在這裡先簡單說一下部落格的外觀語法。

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



首先，先講一下部落格最底層，也就是主背景的部份。這個部份屬於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)。











arrow
arrow
    全站熱搜

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

    E-mail轉寄