主要有七個區塊來做定位，即#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
留言列表
我的連結 