主要有七個區塊來做定位,即#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