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