(這是完成圖)
上篇提到需要修改的細節和重點，現在開始動手實際的將痞客二欄版型轉成三欄式的。
上篇提到、需要掌握全寬，本文寬，和側欄寬。所以先找出這三個地方來。
#body-div{
width: 900px;
background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
這一段標示了總寬是900px。
#content{
overflow: hidden;
float:left;
width: 630px;
padding-top: 10px;
}
這一段則標示了本文區為630px。
#links{
overflow: hidden;
float:right;
width: 268px;
margin-right:1px;
display:inline;
}
這一段標示了側欄為268px。
所以先把這三段，複製起來，貼到最底下的位置，等等修改這邊就行了。
總寬900不變（若要改變，會更動更多地方)，本文和側欄則需要重新分配大小。
我將本文區調為490，側欄則為200 200，剩下10則當成留白。
這三段，去掉不是很必要的，簡化之後變成。(記得加上註解，比較看得懂。)
/*總版面*/
#body-div{
width: 900px;
background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
/*主要內容區*/
#content{
float:left;
width: 490px;
padding: 3px;
}
/*總側欄*/
#links{
float:right;
width: 400px;
margin-right:1px;
}
到目前為止，畫面還是兩欄。但是範圍已經改變了。
要將二欄改成三欄，主要是切割側欄，將側欄一分為二。
方法是1.先訂出總側欄寬度 2.單獨設定兩個新的側欄寬度。
寫法是這樣。(紅色為說明)
/*總側欄*/
#links{
float:right; 訂出側欄要放在哪一邊，right是右。
width: 400px; 總欄寬
margin-right:1px;
}
/*側欄1*/
#links-row-1{
float:left; 第一個側欄靠左
width: 198px; 第一欄寬
margin:1px; 邊界1px，左右各1加起來剛好2，共200
}
/*側欄2*/
#links-row-2{
float:right; 第二個側欄靠右
width: 198px; 第二欄寬
margin:1px;
}
現在把全部整合起來就變成
/*總版面*/
#body-div{
width: 900px;
background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6603e76f.png) left top repeat-y;
position: relative;
margin:0 auto 20px;
}
/*主要內容區*/
#content{
float:left;
width: 490px;
padding: 3px;
}
/*總側欄*/
#links{
float:right;
width: 400px;
margin-right:1px;
}
/*側欄1*/
#links-row-1{
float:left;
width: 198px;
margin:1px;
}
/*側欄2*/
#links-row-2{
float:right;
width: 198px;
margin:1px;
}
到這邊為止，只要把上面的語法加到全部的最底端（原來的內容不必理會，因為最底下優先權最高），就會讓畫面變成三欄。
來看看畫面變成怎麼樣。
我使用兩種瀏覽器來瀏覽，這樣可以知道再不同瀏覽器下，畫面有沒有想同。
先看看IE8.0的畫面
框框的地方，麻吉交流和碎碎念超出範圍，打圈的地方目前正常
再看看Maxthon的畫面。（這是我慣用的瀏覽器），打圈的地方重疊了，這表示在不同瀏覽器之下，同樣語法，畫面卻會不同。
若自己修改語法，或是套用現成的版面，最好選擇越多瀏覽器支援的越好。
修改語法之後，目前出現了三個問題
1.麻吉交流超出畫面
2.碎碎念超出畫面
3.本文區有部份和側欄區重疊
接著來修改這三個問題。
找到之後，將寬度修改為198px或是 auto。（auto是自動配合）
/*文章+列表+回應區塊*/
#article-area{
width: 490px; 修改寬度，讓本文區和側欄不會重疊。
margin:0 auto;
}
/*麻吉交流*/
#headshot {
background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6619e319.png) left top no-repeat;
width: auto; 修改寬度為auto，自動配合，或是改為198px也可。
height:105px;
margin: 15px auto;
position: relative;
}
/*碎碎念*/
#murmur{
width: auto; 修改寬度為auto，自動配合，或是改為198px也可。
margin: 15px auto;
background:#ffdde2;
position:relative;
}
修改完上面三項後，再來看看有沒有成功。
三個超出範圍重疊的地方已經正常了，現在剩下圖中三個圓圈的地方，各有一條垂直的細線影響畫面。
左右兩條其實沒差，但中間那條破壞了美觀。
但很可惜的是，這三條線其實是一張圖，一體成形，沒法單獨修改。
解決的方式1.另選一張適合的圖來替換 2.取消掉這張圖。
我們選擇取消圖。
所以找到這張圖的位置。將畫面中反白那行去除掉。
這一段語法其實就是我們一開始所找出來的『總版面』，的位置。
去掉之後變成
/*總版面*/
#body-div{
width: 900px;
position: relative;
margin:0 auto 20px;
}
如此一來，那三條線就不見了。
現在畫面分成三欄，也沒有任何重疊，三條底線的圖也消失了。可以說大公告成了。
但是還得檢查一下有沒有遺漏。
我們點進去文章看看。
迴響區的畫面被截斷了，連『送出』的按鈕也蓋住了。
所以我們只好在進行修改。
/*迴響*/
#comment-form {
background:#ffecf0;
border:1px solid #ffe3e9;
padding: 10px 5px;
width: 490px; 修改寬度為490。
margin: 10px auto;
}
修改過後就變成這樣
來看看最終完整修正後的畫面。
這樣就讓二欄的版面，切割成三欄。
要補充的是
1.若要讓側欄放在左右兩側，則需要使用定位功能，將其中一欄強制移動，且將本文區，也往中間移動。有興趣再研究吧！
2.我忘了檢查版主回覆，是不是有變形，若有、修改方法和迴響一樣，改個寬度就好了。
3.側欄、本文的寬度，可以自行分配，或是加大邊界讓畫面不會太擠，這個自己調整。
4.有些很奇怪的版面，各種區塊都移動到正常不會出現的地方，這是使用強制定位的功能，若不熟悉就盡量不要去修改那種版型。
5.牽涉到圖的部份，最好都另外準備一張符合尺寸的新圖替換，才不會讓畫面怪怪的。
6.語法我都簡化過了。最終修改到的語法我放在最後面，只要複製這些語法，貼到CSS欄最底下，畫面就會變成三欄。
7.有問題就留言一起討論吧！
『所有更動過的完整語法』
/*總版面*/
#body-div{
width: 900px;
position: relative;
margin:0 auto 20px;
}
/*主要內容區*/
#content{
float:left;
width: 490px;
padding: 3px;
}
/*文章+列表+回應區塊*/
#article-area{
width: 490px;
margin:0 auto;
}
/*總側欄*/
#links{
float:right;
width: 400px;
margin-right:1px;
}
/*側欄1*/
#links-row-1{
float:left;
width: 198px;
margin:1px;
}
/*側欄2*/
#links-row-2{
float:right;
width: 198px;
margin:1px;
}
/*麻吉交流*/
#headshot {
background:url(http://p4.p.pixnet.net/albums/userpics/4/5/420045/49dad6619e319.png) left top no-repeat;
width: auto;
height:105px;
margin: 15px auto;
position: relative;
}
/*碎碎念*/
#murmur{
width: auto;
margin: 15px auto;
background:#ffdde2;
position:relative;
}
/*迴響*/
#comment-form {
background:#ffecf0;
border:1px solid #ffe3e9;
padding: 10px 5px;
width: 490px;
margin: 10px auto;
}
- Feb 21 Sun 2010 20:00
-
痞客css樣式二欄轉三欄教學(上)
(這是完成圖)
此範例用的是痞客的基本模板。粉紅色那個。 文/灰色金盞花(鹿老師)
在動手做之前，先說明四個重點。
一、控制範圍大小的單位，通常選用px ，或是百分比，各有好處。
所謂px即是螢幕解析度，比方有的人設定800x600 那800就是寬度，600就是高度，假使我們設計版面把寬度設定大於800，則會超出範圍。
但若把寬度設定800，但瀏覽者螢幕解析度是1024x768，那麼看到的畫面就會縮小。（後面再貼圖做比較）
若是不用px當單位，改用百分比，好處是一定會剛好充滿螢幕畫面，不管瀏覽的人解析度設定多少。都會剛好100%滿畫面。
缺點則是，為讓畫面剛好充滿，有時會變形，這點在社計時只要有注意，就不會產生問題。
要強制指定大小好（px）？還是百分比好？依照設計者的習慣就行，各有好處，不過這裡我採用px當單位，減少畫面變形的情況。
二、版面由二欄變成三欄，每一區域都必須縮小原來佔用的空間，通常都能夠藉由指定大小來調整，不過背景圖沒辦法（應該沒辦法）。
這會讓調整好的畫面，因為這些背景圖，而產生重疊，變形等等問題，建議先準備好適當大小的新圖來替換，才能達到美觀。
三、要將二欄切割成三欄，必須先掌握的是 1.總寬 2.本文寬 3.側欄寬 ，這三個寬度先掌握好就能進行分配。
四、語法的優先權，越慢（後）被讀入的，優先權越高。
利用這點特性，我們就能夠不需要反覆找尋要修改的語法，直接在最底下寫出（複製）新的語法，就會取代原先舊的語法。
另一個好處是，萬一有衝突，也會依照新的為主，這能省掉很多要改的地方，視而不見不用理會。
現在來看看同一個畫面（寬900），在800x600和1280x1024解析度下，呈現的畫面。 （我的電腦使用的是1280x1024)
上面這一張是800x600，由於畫面無法完全呈現，所以還得移動左右捲軸，才能看完全部畫面。
上面這張則是1280x1024， 螢幕的寬是1280但整個畫面的寬度只有900，所以左右兩邊呈現空白沒內容。
等下要寫的語法，只要接在原來語法的下面繼續下去就可以，直到全部修改完畢，再複製回去就行，或者放著不管也可以。
寫在最底下是方便進行修改。
---------------------------------------------------------------------------------------------------------------------------------------------
(下篇實作二欄轉三欄)
- Jan 19 Tue 2010 16:33
-
【部落格痞客css樣式教學】盒子box model(2)設定區塊的寬度和高度
【部落格css樣式】盒子box model(2)設定區塊的寬度和高度
上一篇講過盒子(box model)，想畢大家都比較知道盒子在css中到底是怎麼應用了。
接下來要介紹的是寬(width)和高(height)的設定。
一般來說在box裡面寬(width)是指左內緣到右內緣，高(height)是上內緣到下內緣。(如圖示)
由寬、高、留白和邊界的組合形成了整個版面的設計。
在設計版型時有時候會覺得怎麼好像差了一點偏了些，那是因為對div組件裡的寬高設定有誤解，
設定寬和高是指裡面的上.下.左.右內緣。留白(padding)、邊界( margin)還有邊框(border)都是會增加額外寬度的。
-----------------------------------------------------------------------------------------------------------
例如需要橫幅寬度設880px，設定width:880px;，只有內容(content)的部份。
#header{
background:#ccc ;
width:880px;
}
(↓範例)
看到的橫幅寬度是這樣的，但是因為考慮到要設定留白(padding)10px，但是又希望要讓他看起來一樣總寬是880px，
那就要減掉左右的10px所以寬要設860px，這樣整個橫幅總寬度才會是880px。
如果設定了寬度(width)880，留白(paddind)又設定了10px，那樣加起來就變900px。
#header{background:#ccc ;
width:860px;
padding:10px;
}
(↓範例)
-----------------------------------------------------------------------------------------------------------------------------------------
簡單來說看見的寬度是包括額外的部份，假設寬設100px但是在邊界左右各設了10px，那看到的會是content和padding共120px，
在區塊中設的寬高是設定上.下.左.右內緣，但實際看到的會是加上.下.左.右外緣。
-----------------------------------------------------------------------------------------------------------------------------------------------------
盒子box model系列：
【部落格css樣式】盒子box model(1)CSS中盒子的概念和痞客橫幅解說
【部落格css樣式】盒子box model(2)設定區塊的寬度和高度
ps：css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範，但無名、天空等各家部落格都是一樣的^^
- Jan 15 Fri 2010 12:39
-
【部落格痞客css樣式教學】盒子box model(1)CSS中盒子的概念和痞客橫幅解說
【部落格css樣式】 CSS中盒子(box model)的概念和痞客版型解說
要開始修改和設計部落格樣式前，css中一個很重要的觀念要清楚，
就是”盒子”，什麼是盒子勒? 我們可以把每個元素視為一個盒子，
而盒子就是以這些屬性組成的。內容、留白、邊框、邊界。
我們可以藉著描述盒子中的這些屬性還有每個盒子間的相關連的設計，來達到排版的效果。
----------------------------------------------------------------------------------------------------------------------------------------------------------------
這樣看來很抽像吧，我們只要拿我們熟悉的痞客版型來對照就知道這些屬性到底是在描述哪些部份。
首先來看痞客版型的上方橫幅 #header 這個區塊。
#header{
background:#ccc ;
padding:30px;
border:1px dotted;
margin:30px;
}
其實部落格的每個區塊就是盒子，而一整個版型可以想成就是盒子和盒子的排列組合，
而我們就是透過設計盒子中的每項屬性，讓每一個盒子排列在一起呈現出一個有美感的版型唷。
----------------------------------------------------------------------------------------------------------------------------------------------------------------
盒子box model系列：
【部落格css樣式】盒子box model(1)CSS中盒子的概念和痞客橫幅解說
【部落格css樣式】盒子box model(2)設定區塊的寬度和高度
ps：css樣式的規則是適用各個部落格喔!雖然是用痞客做為示範，但無名、天空等各家部落格都是一樣的^^
部落格設計、網頁設計、平面設計、圖文插畫
部落格設計、網頁設計、平面設計、圖文插畫
- Jan 12 Tue 2010 23:24
-
痞客模版架構
整個頁面
body/*整個介頁面*/
#body-div/*整個頁面*/
a/*超連結*/
a:hover/*滑鼠移動到超連結上時*/
後台管理
#authority/*後台管理列*/
#newpost/*發表新文章*/
#backstage/*進入後台*/
#container/*所有內容區塊*/
#container2/*所有內容區塊2*/
#container3/*所有內容區塊3*/
橫幅
#header/*橫幅*/
#login-bar/*招呼語&登入登出*/
#banner/*橫幅主要內容*/
#banner h1/*部落格標題*/
#banner .skiplink/*跳到主文*/
#banner h2/*部落格描述*/
#blog-category/*部落格全站分類*/
其他服務頁面導覽
#navigation/*其他服務頁面導覽*/
#navigation a/*其他服務連結區塊內的所有連結*/
#navigation li/*其他服務連結區塊內的所有項目*/
#link-album/*相簿連結*/
#link-blog/*部落格連結*/
#link-guestbook/*留言版連結*/
#link-profile/*名片連結*/
主要內容區
#content/*主要內容區*/
↑指文章區塊的全區
公告區
#spotlight/*公告版位*/
#spotlight h5/*公告版位標題*/
#spotlight-text/*公告版位內容*/
文章區
#article-area/*文章+列表+回應區塊*/
#article-box/*文章+列表區塊*/
.article-area-title/*文章+列表區塊之標題*/
#display/*瀏覽模式*/
#display span/*瀏覽方式這四個字*/{}
#display a/*標題列表/簡短摘要*/{}
.article-head/*文章標題+發表時間*/
.publish/*發表時間*/
.month/*月*/
.date/*日*/
.dat/*週*/
.year/*年*/
.time/*時*/
.title h2 a/*文章標題*/
.title h2 img/*文章標題前的密碼圖示/隱藏圖示/好友保護圖示*/{}
.article-body/*文章內容區*/
.bookmark/*加入書籤*/
.article-content/*文章內文*/
.more/*繼續閱讀*/
.fans-club/*小圈圈討論*/
.author/*發表作者和時間*/
.farward/*轉寄文章*/
.article-footer/*文章附加資訊*/
.refer/*文章分類*/
.history/*歷史上的今天*/
h6/*歷史上的今天的標題*/
ul/*文章分類*/
.back-to-top/*回到頁首*/
.main-list/*標題模式的文章列表*/
table/*表格*/
tr/*行*/
.list-num/*標號標題*/
.list-date/*發表時間標題*/
.list-title/*文章標題標題*/
.list-visit/*人氣標題*/
文章回應及引用區
.list-comment/*回應標題*/
#user-post/*回應+引用區塊*/
#trackback-box.user-post-box/*引用區塊*/
#trackback-title.user-post-title/*引用區塊標題*/
.img/*開合圖示*/
.span/*標題文字*/
#trackback-url/*引用網址*/
#trackback-input/*網址鈕*/
.input/*複製鈕*/
#trackback-text.user-post-text/*所有引用區塊*/
.single-post/*單一引用*/
.post-info/*引用者資訊*/
.post-text/*單一引用內容*/
#comment-box.user-posy-box/*回響區塊*/
#comment-title.user-post-title/*回響區塊標題*/
.img/*開合圖示*/
.span/*標題文字*/
.post-comment/*留下回響*/
a/*留下回響超連結*/
#comment-text.user-post-text/*所有回響區塊*/
#user-post/*引用及回應列表全部的大範圍*/
#trackback-box/*僅引用區塊*/
#trackback-text/*引用內容區塊*/
#trackback-title/*引用列表標題*/
#trackback-box .single-post/*單一引用*/
.post-comment/*留下迴響*/
#comment-box/*僅回應列表*/
#comment-title/*回應列表標題*/
#comment-text/*回應內容區塊*/
#comment-box .single-post/*單一回應*/
.reply-message/*回覆回響*/
.user-ip/*回響者IP*/
.post-photo/*回響者頭像*/
.a img/*回響者頭像*/
.post-text/*單一回響內容*/
.lireply-text/*回覆回響內容*/
a/*留下回響超連結*/
.page/*頁數*/
.post-info/*回響者資訊*/
.b/*樓層數*/
.img.hidden-message/*公開/隱藏回響*/
.user-name/*回響者名稱*/
.img.pixnet-user/*PIXNET會員圖示*/
.home-page/*回響者網址*/
.span.post-time/*留下回響時間*/
.user-post-title/*引用列表標題+回應列表標題*/;
.user-post-text/*引用內容區塊+回應內容區塊*/
.single-post/*單一引用+單一回應*/
.post-info/*引用者資訊+回應者資訊*/
.post-text/*單一引用內容+單一回應內容*/
.post-text p/*單一引用標題+單一回應標題*/
.reply-text/*版主回覆內容*/
.reply-text p/*版主回覆資訊*/
.secret/*悄悄話*/
.show-message/a.hide-message/*公開/隱藏*/
.delete-message/*刪除回響*/
側欄工具列
#links/*側欄工具列*/
#links-row-1/*3欄是第1欄*/
#links-row-2/*3欄式第2欄*/
誰來我家
#visitor.box/*誰來我家*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.li a img/*訪客頭像*/
.box-more
.a/*所有訪客列表*/
碎碎唸
#murmur.box/*碎碎念*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.murmur-time/*碎碎念發表時間*/
.murmur-text/*碎碎念內容*/
.box-more/*所有歷史碎碎念*/
.box-more a/*所有歷史碎碎念*/
#my-photo/*版主頭像*/
#my-status/*碎碎唸文字內容*/
好友的碎碎唸聯播
#broadcast.box/*好友的碎碎念聯播*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
ul/*好友的碎碎念*/
.broadcast-photo/*好友頭像*/
.broadcast-time/*好友發表時間*/
.broadcast-text/*好友碎碎念內容*/
搜尋
#search/*搜尋*/
#search .box-title/*搜尋標頭*/
#search .box-text/*搜尋內容區塊*/
#search-target/*搜尋輸入文字欄位*/
#search-send/*搜尋確定鈕*/
麻吉交流
#headshot.box/*麻吉交流*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#headshot-img/*個人頭像*/
#friend-apply/*申請好友*/
#send-message/*傳送私訊*/
參觀人氣
#counter.box/*參觀人氣*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#countr .box-text span/*人氣數字*/
更換樣式
#change-theme/*更換樣式*/
#change-theme .box-title/*更換樣式標頭*/
#change-theme .box-text/*更換樣式內容區塊*/
#change-theme select/*更換樣式選單*/
新聞交換
#feed.box/*新聞交換*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#feed img/*新聞交換icon*/
月曆
#calendar.box/*月曆*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
table/*月曆表格*/
.mouth-nav/*切換月份的那一行*/
.cal-backward/*上個月*/
.current-mourh/*現在月份*/
.cal-forward/*下個月*/
.weekday/*星期*/
#calendar .calMonthNav/*選擇月份的那一欄*/
#calendar .calMonthHeader/*星期幾的那一欄*/
#calendar td/*日期儲存格*/
#calendar td a/*月當天有寫文章的儲存格*/
近期文章
#recent-article.box/*近期文章*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#recent-article .box-text .a/*文章標題*/
熱門文章
#hot-article.box/*熱門文章*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#hot-article .box-text .a/*文章標題*/
文章分類
#category/*文章分類*/
#category .box-title/*側欄區塊標題*/
#category .box-text/*側欄區塊內容*/
#category .box-text.box-more/*總開何按鈕*/
#category .box-text.img/*按鈕*/
#category .box-text.div/*單一分類目錄*/
#category .box-text.img/*分類目錄開合按鈕*/
#category .box-text.ul/*目錄內容*/
#category .box-text.a/*目錄名稱*/
#category .box-text h6/*文章分類的分類目錄*/
文章彙整
#archive.box/*文章彙整*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.select/*月份選單*/
.a/*所有文章列表超連結*/
#archive .box-text li a/*所有文章列表*/
最新回響
#latest-comment.box/*最新回響*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#latest-comment .box-text span/*最新迴響-迴響日期*/
#latest-comment .box-text li a/*-最新迴響-迴響摘要*/
最新引用
#latest-trackback.box/*最新引用*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#latest-trackback .box-text li a/*引用過去的文章標題*/
#latest-trackback .box-text li span/*引用過去的部落格主標*/
最新訂閱
#subscription.box/*最新訂閱*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
#subscription .box-text li a/*最新訂閱-訂閱對方的新文章標題*/
#subscription .box-text li span/*最新訂閱-訂閱對方的部落格主標*/
我的蒐藏
#favorite/*我的蒐藏*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.select/*我的蒐藏選單*/
我的連結
#mylink.box/*我的連結*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.link-box/*單一連結分類*/
.h6/*連結分類標題*/
#my-link .box-text .link-box li.a/*單一個我的連結*/
自訂欄位
.folder/*所有自訂欄位*/
.folder .box-title/*所有自訂欄位標頭*/
.folder .box-text/*所有自訂欄位內容區塊*/
服務提供
#powered.box/*服務提供*/
.box-title/*側欄區塊標題*/
.box-text/*側欄區塊內容*/
.a/*登入登出連結*/
頁尾
#footer/*頁尾*/
.p/*頁尾描述*/
#bottom/*頁尾超連結*/
.bottom-skiplink/*回到頁首\回到主文*/
.bottom-pixnet/*PIXNET痞客邦\申請帳號\會員服務專區*/
文章列表
.main-list/*列表*/
.main-list table/*列表表格*/
.main-list h3/*列表標題*/
.main-list th/*列表表頭表格*/
.main-list td/*列表一般表格*/
.main-list a/*列表文章名稱*/
#article-list/*所有文章列表*/
#category-list/*單一分類文章列表*/
#murmur-list/*所有歷史狀態列表*/
﹝官方痞客模板架構﹞
留言列表
