新版CSS架構

2015041413:15

新版CSS架構

 
 

主要有七個區塊來做定位,即#container、標題(#banner)、頁尾(#footer)、中欄(#mid)、左欄(#linksLeft)、右欄(#linksRight)和內容(#content)。

中欄(#mid)佔據了整個頁寬,以padding屬性來決定左右欄最大寬度,由於左欄和右欄都是固定寬度,因此content的寬度會隨著瀏覽器改變。

 

一、各區塊名稱:

#banner

 

#content

#linksleft

#linksright

二、新舊版比較:

1.#banner

 

舊版 新版
舊版#banner框住整個頁面;其中定義之背景圖(background-image),新版定義在#container裡。 新版#banner定義為上方區塊,即.logo、.menulist、.blogname、
.description、.blogemotion所在區塊。

2.#menulist

舊版 新版
選單區塊在舊版命名為#navibar 選單區塊在新版則命名為#menulist

3.#footer

舊版 新版
舊版紅色區塊命名為#copyright 新版紅色區塊命名為#footer

4.#content

舊版 新版
舊版外框有圓角設計,
因此分為九個部份
.mainTopLeft、.mainMidLeft、
.mainMid、.mainMidRight、
.mainBottomLeft、
.mainBottomMid、
.mainBottomRight
新版則為直角,外框則簡化以border屬性來定義。

5. .sidetitle、.side

舊版 新版
舊版各欄位背景無統一定義 新版統一以.sidetitle、.side來定義框線和內容區塊

 

 

新版新增樣式:

#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  


延申閱讀 :

新版CSS常見問題.解說 http://blog.xuite.net/blog/baby/4453922