字體:  

Xuite CSS教學|Xuite CSS樣式分享

adj 發表於: 2008-12-20 12:54 來源: ADJ網路控股集團


Xuite主要有七個區塊來做定位,即#container、標題(#banner)、頁尾(#footer)、中欄(#mid)、左欄(#linksLeft)、右欄(#linksRight)和內容(#content)。
中欄(#mid)佔據了整個頁寬,以padding屬性來決定左右欄最大寬度,由於左欄和右欄都是固定寬度,因此content的寬度會隨著瀏覽器改變。


一、各區塊名稱:

#banner


#content

#linksleft

#linksright

新版新增樣式:
#container 定位框
#linksLeft 左欄
#inksRight 右欄
#mid 中間欄
#footer 檔尾
.sidetitle 欄位名稱
.side 欄位內容
.blogemotion 今日心情
.menulist 選單列
.menu 選單
.logo logo

.title 文章標題列
span.titlename
文章標題名稱
span.titledate 文章日期
.blogrank 文章評價例
span.counter 文章瀏覽數
span.counter li 文章瀏覽數項目符號
span.category 文章分類
span.category li 文章分類項目符號
.blogbody 文章主體
.posted 作者列
.selectbar 上下文章
.trackbacktitle 引用列
.trackbacktitle li 引用列項目符號
trackbackurl 引用網址
.trackbackdate 引用日期
.trackbackcontent 引用內容
.comment 留言列
span.commenttitle 留言名稱
span.commenttitle li 留言名稱項目符號
span.commentbutton 留言按鈕
.author 留言作者列
span.authorname 留言作者名稱
span.commentdate 留言日期
commenttext 留言內容
.commentedit 留言編輯按鈕
span.email 留言者信箱



左欄class
關於我
.avatarPhoto 照片
.avatarDesciption 描述
.avatarbutton 關於我按鈕
文章分類
.categoryTitle li
.categorySide li
.categoryTitle
.castgorySide
日曆
.calenderTitle li
.calenderTitle
.calenderSide
.calMonth 日曆table
.calMonthNay 日曆首列
.calMonthBackward 日曆上個月
.calMonthCurrent 日曆目前顯示年月
.calMonthForward 日曆下個月
.calMonthHeader 日曆星期列
.calMonthDay 日曆日欄
.calMonthToday 日曆今日日期
.calholiday 日曆假日日期
.calenderbutton
搜尋文章
.searchTitle li
.searchTitle
.searchSide
.searchbutton
我的哈拉室
.chatTitle li
.chatTitle
.chatSide
已建立的日誌
.bloglistTitle li
.bloglistTitle
.bloglistSide
訂閱電子報
.epaperTitle li
.epaperTitle
.epaperSide
.epaperbutton
自由欄位
.customTitle li
.customTitle
.customSide
日誌使用資源
.resourceTitle li
.resourceTitle
.resourceSide
留言塗鴉版
.paintTitle li
.paintTitle
.paintSide


右欄class
背景音樂
.musicTitle li
.musicTitle
.musicSide
.musicbutton
最新文章
.articleTitle li
.articleTitle
.articleSide
最新留言
.messageTitle li
.messageTitle
.messageSide
.date
參觀人次統計
.countTitle li
.countTitle
.countSide
我的訂閱
.rssrollTitle li
.rssrollTitle
.rssrollSide
.backbtn
.morebtn
日誌評價
.rankTitle li
.rankTitle
.rankSide
已建立的相簿
.albumTitle li
.albumTitle
.albumSide
最愛連結
.linkTitle li
.linkTitle
.linkSide


如有實作上的問題...可參考...

"布拉格的羅傑"網站:

Xuite CSS教學