老人的 xuite css 心得報告 !

在 xuite 的「佈景主題」中提供了蠻多的選擇，可以讓使用者直接套用自己喜歡的樣式，不過即然有可自訂修改版型 CSS 的功能，那麼自然就會有不少人喜歡把自己的 blog 搞的與眾不同一些，就算是我這樣落伍的資訊人，也不免想要自己動手調整，經過了一番折騰，因為先前完全不懂任何 css 的東西，最後終於也讓我這個布落格新手終於也搞出了一點點心得以及成果～其實要瞭解 xuite css 的基本架構並不難，真正麻煩的是要花不少時間去實際測試，並且調整出自己喜歡的樣式、主題。

相信其它 BSP 的 css 應該也差不多都是這樣的原理吧。

我原先並不想要寫如何調整 xuite css ，原因之一是我會調整的部份也不過是一些小小的皮毛，原因之二則是 xutie 到處都可以找到一些高手的範例及解說，所以認為何必再寫一些大家已經看膩的東西，於是先以「記要」的方式來陳述一些我在學習 xuite css 時的心得及問題。

乍看之下 xuite 的「佈景主題」中提供了蠻多的版型，其實說穿了 xuite css 就是只有一個版型而以～只是看每個人如何在這相同的版型結構下，將這些可用的「欄位物件」做出不同的「屬性變化」。

xuite css 的版型定義，主要分為七個區塊，分別是 #container,#banner(標題),#footer(頁尾),#mid(中欄),#linksLeft(左欄),#linksRight(右欄), #content(內容)等。

#container
#banner
#mid
#linksLeft
#linksRight
#content
#footer

在中欄 #mid 的部份，幾乎是佔據了整個版面，其內部又包含三個區塊 #linksLeft, #linksRight, #content；其中主要是以 padding 屬性來決定左右欄最大寬度，由於左欄和右欄都是設定某一固定寬度，而 #content 的寬度會隨著瀏覽器改變。(L-C-R) 是預設的版型，其實只要小改一下，我們就可以有不同的版型呈現。

(L-C-R) xuite 相準的版型，只要將所有欄位放在同一個側邊，亦可變成 (L-C) or (C-R)。
(L-R-C)
(C-R-L) ezPost 目前的版型，而且有「橙、黑」兩種配色主題。



當主要的版型定位之後，就是要調整其中各欄位的顯示屬性了，「欄位、物件、屬性」的定義；在上述七個區塊中，有不同功能的「欄位」存在，我們可以各別設定這些欄位的屬性，或是統一設定欄位的屬性而不需要一個個更改；「關於我、日曆」這兩個「欄位」的屬性需要各別獨立設定。

以下就簡列大多數我們所看到的一些欄位名稱；其實只稍做觀察，就可以發現一些共通性，就可以很快的調整 css 的內容了。
/******************************************/
#container{}
#banner{}
#mid{}
#linksLeft{}
#linksRight{}
#content{}
#footer{}
/******************************************/
/*檔頭*/
menulist{} , menu{} , logo{} , blogname{} , blogemotion{} , blogemotion{} , description{}

/************************************************/
/*關於我*/
avatar{} , avatarPhoto{} , avatarID{} , avatarDesciption{} , .avatarbutton{}

pTitle li{} , pTitle{} , personaltitle{} , personallink{}
plink li{} , plink{} , pfriend li{} , pfriend{}
pphoto li{} , pphoto{} , pvlog li{} , pvlog ul{} , pboard li{} , pboard{}

/************************************************/
/*日曆*/
.calendarTitle li{} .calendarTitle{}
.calendarSide li{} .calendarSide{}

.calMonth{} .calMonthNav{}
.calMonthBackward{} .calMonthCurrent{} .calMonthForward{}
.calMonthHeader{} .calMonthDay{} .calMonthToday{} .calholiday{}
.calendarbutton{} .cal_event {}

/************************************************/
/*側邊欄位*/ sidetitle li{} , sidetitle{} , side li{} , side{}

/*文章分類*/ .categoryTitle li{} .categoryTitle{} .categorySide li{} .categorySide{}
/*最新文章*/ .articleTitle li{} .articleTitle{} .articleSide li{} .articleSide{}
/*最新留言*/ .messageTitle li{} .messageTitle{} .messageSide{} .date{}
/*搜尋文章*/ .searchTitle li{} .searchTitle{} .searchSide{} .searchbutton{}
/*最愛連結*/ .linkTitle li{} .linkTitle{} .linkSide li{} .linkSide{}
/*已建立的日誌*/ .bloglistTitle li{} .bloglistTitle{} .bloglistSide li{} .bloglistSide{}
/*已建立的相簿*/ .albumTitle li{} .albumTitle{} .albumSide{}
/*參觀人次統計*/ .countTitle li{} .countTitle{} .countSide{}
/*日誌評價*/ .rankTitle li{} .rankTitle{} .rankSide{}
/*日誌使用資源*/ .resourceTitle li{} .resourceTitle{} .resourceSide{}
/*自由欄位*/ .customTitle li{} .customTitle{} .customSide{}
/*我的哈拉室*/ .chatTitle li{} .chatTitle{} .chatSide{}
/*留言塗鴉版*/ .paintTitle li{} .paintTitle{} .paintSide{}
/*背景音樂*/ .musicTitle li{} .musicTitle{} .musicSide{} .musicbutton{}
/*訂閱電子報*/ .epaperTitle li{} .epaperTitle{} .epaperSide{} .epaperbutton{}
/*我的訂閱*/ .rssrollTitle li{} .rssrollTitle{} .rssrollSide li{} .rssrollSide{}

/************************************************/
/*中間欄位*/

/*文章*/
#content{}
.title{} span.titlename{} span.titledate{} .blogrank{} span.category li{}
span.category{} span.counter li{} span.counter{}

/*文章主體*/
.blogbody{} span.fullpost{}
.morebtn li{} .morebtn{} .backbtn li{} .backbtn{} .posted{} .selectbar{}

/*引用*/
.trackbacktitle{} .trackbackurl{} .trackbackdate{} .trackbackcontent{}
/*留言*/
.comment{} span.commenttitle{} span.commenttitle li{} span.commentbutton{}

.author{} .commenttext{} .commentedit{}
span.authorname{} span.commentdate{} span.email{}
span.line{} span.urlicon{} span.url{}