模版：viewthread.htm
對應位置參照圖







1 頁面總框架
所屬CSS class或ID：foruminfo
CSS代碼：


2 頭部導航
1 總框架
所屬CSS class或ID：nav
CSS代碼：


2 如果打開了版塊下拉菜單，則風格下拉菜單使用一個class
所屬CSS class或ID：dropmenu
CSS代碼：


3 頁內文字廣告 (注意，本廣告顯示在頭部導航下方，上一主題/下一主題上方，圖中沒有)
所屬CSS class或ID：.ad_text
CSS代碼：


4 主題切換-新帖/回覆
1 總框架
所屬CSS class或ID：pages_btns
CSS代碼：


2 上一主題/下一主題(主題切換)
所屬CSS class或ID：threadflow
CSS代碼：


3 新帖/回覆
所屬於CSS class或ID：postbtn（新帖class）/replybtn（回覆class）
CSS代碼：


4 新帖下拉菜單
所屬CSS class或ID：popupmenu_popup & newspecialmenu
CSS代碼：
popupmenu_popup部分：


newspecialmenu部分：


5 帖子主體部分：
1 總框架
所屬CSS class或ID：mainbox & viewthread
CSS代碼：
mainbox部分：


viewthread部分：


2 頭部題目
1 左部（根據主框架的H1標記定義屬性而定）
2 右部（打印/推薦等功能菜單）
所屬CSS class或ID：headactions
CSS代碼：


6 左部（用戶信息欄）
所屬CSS class或ID：postauthor
CSS代碼：


左部用戶名下拉菜單（請參照前面的dropmenu屬性）

7 用戶功能欄（請參照樓內部分左部內的pm，buddy，space，online，offline屬性，分別對應的是短消息，好友，空間，在線，離線）

8 右部（帖子內容）
1 主框架
所屬CSS class或ID：postcontent
CSS代碼：


2頂部功能欄（只看該作者/樓層/帖子字號切換等）
所屬CSS class或ID：postinfo
CSS代碼：


3 內容部分
1 總框架
所屬CSS class或ID：postmessage & defaultpost
CSS代碼：
postmessage部分：


defaultpost部分：


2 題目部分（請參照總框架中的h2標記定義）

3 內容部分
所屬CSS class或ID：t_msgfont
CSS代碼：


對應的小字號CSS代碼：


對應的大字號CSS代碼：


字號間通用CSS代碼：


4 搜索更多相關主題的帖子（tag）
所屬於CSS class或ID：posttags
CSS代碼：


下面的樓層和頂樓的CSS基本相同，底部的主題切換-新帖/回覆和頂部的CSS一樣

9 相關主題部分
1 主框架部分
所屬CSS class或ID：mainbox & forumlist（mainbox部分請參照前面）
CSS代碼：
forumlist部分：


2 右部"本功能由奇虎搜索實現"
所屬CSS class或ID：headactions（請參照前面）

3 "相關主題"題目（CSS請參照主框架部分的h3標記定義）

10 快速回覆主題
1 主框架
所屬CSS class或ID：box（class） & quickpost（ID）
CSS代碼：
box部分：


quickpost部分：


2「快速回覆主題」題目部分（請參照上面的h4標記定義）

3 左部「選項」部分
1 主框架
所屬CSS class或ID：postoptions
CSS代碼：


2 選項前多選框
所屬於CSS class或ID：checkbox
CSS代碼：


4 中部輸入部分
1 主框架
所屬CSS class或ID：postform
CSS代碼：


2「標題」及輸入框（請參照主框架中的h5定義）

3 內容輸入框
所屬CSS class或ID：autosave
CSS代碼：


4 下方提交按鈕及功能按鈕（發表帖子按鈕的定義請參照"發帖"講解最下面的按鈕定義部分）
所屬CSS class或ID：btns
CSS代碼：


5 右部smilies
所屬CSS class或ID：smilies
CSS代碼：


1 中間smilieslist部分
所屬CSS class或ID：smilieslist
CSS代碼：


2 表情翻頁
所屬CSS class或ID：pages
CSS代碼：


11 論壇跳轉--帖子管理
所屬CSS class或ID：box（class） & footfilter（ID）（box部分請參照前面的代碼）
CSS代碼：


模版footer.htm相應位置請參照圖




1 廣告部分CSS
所屬CSS class或ID：ad_footerbanner
注意，另外兩個層的ID：ad_footerbanner2，ad_footerbanner3在CSS中沒有定義，建議沿用本class。
CSS代碼：


2 廣告下部，外框架部分CSS
所屬CSS class或ID：footer
CSS代碼：


3 廣告下部，內框架部分CSS(用於左部的文字，當然，也限定了右部的層）
所屬CSS class或ID：wrap
CSS代碼：


4 右部分主框架
所屬CSS class或ID：footlinks
CSS代碼：


5 TOP按鈕及界面風格
所屬CSS class或ID：
1 「TOP」按鈕：scrolltop
CSS代碼：


2 「界面風格」按鈕：dropmenu（它的ID CSS我沒有找到）
CSS代碼：


3「界面風格」彈出菜單：popupmenu_popup（CLASS）styleswitcher_menu（ID）
CSS代碼：

.popupmenu_popup部分：
1


2


3


4


5


6


#styleswitcher_menu部分：
1


（這裡CSS裡重複了一個）
2


3


4


6左部圖
所屬CSS 標記：img


7左部圖右邊文字
所屬CSS class或ID：
1 上方文字部分：copyright
CSS代碼：
1


2


3


4


2 下方文字部分：debuginfo
CSS代碼：
1


2

模版以post開頭的部分模版，本部分以發新帖為例子，回覆的代碼基本相同，只是有些字不同而已
註：附加CSS即沒在css.htm中，而在網頁書寫中以style=""形式出現的CSS屬性
相應位置請參照圖







1 頭部導航文字
所屬CSS class或ID：nav
CSS代碼：


2 預覽帖子部分
1 總框架
所屬CSS class或ID：mainbox & viewthread（總量很多，下面再次出現的這兩個class就不把代碼寫出來了）
CSS代碼：
mainbox部分：


viewthread部分：


2 文字class（頂部title請參照總框架中所有h1標記的定義）
1 左部框架
所屬CSS class或ID：postauthor
CSS代碼：


3 發新話題總框架
所屬CSS class或ID：mainbox & formbox
CSS代碼（mainbox部分見上）
formbox部分：


4 頂部title
1 積分策略說明
所屬CSS class或ID：.headactions
CSS代碼：


2 右部title請參照總框架中所有h1標記的定義

5 標題輸入部分
1 標題外框
CSS代碼：BORDER-BOTTOM-WIDTH: 0px
2 主題分類外框
CSS代碼：BORDER-BOTTOM-WIDTH: 0px
3 標題輸入框
所屬CSS class或ID：threadtypes
CSS代碼：


外部附加CSS：


6 內容部分
所屬CSS class或ID：posteditor_left
無CSS代碼

7 smilies
所屬CSS class或ID：smilieslist
CSS代碼


8 editor編輯按鈕部分
1 總框架
所屬CSS class或ID：editor
CSS代碼：


2 編輯按鈕框架
所屬CSS class或ID：editortoolbar
CSS代碼：


9 內容輸入部分
1 總框架
所屬CSS class或ID：editor_text
CSS代碼：


2 輸入部分
標記為textarea，請參照上面的標記部分
附加CSS：WIDTH: 99%; HEIGHT: 250px
textarea控制DISCUZ代碼模式的背景顏色
所見即所得模式的背景顏色修改可參照以下方法

查找


將其修改為


10 上傳附件title（請參考總框架中的TH標記）
1 閱讀權限及售價部分
所屬CSS class或ID：nums
CSS代碼：


11 發新話題按鈕
控制標籤：BUTTON
CSS代碼：


所有的按鈕基本都是這個控制，如首頁的快速登陸


部分提交按鈕由這個控制，比如這裡的提交按鈕，登陸頁面提交等



本圖文參考水月無痕, 由 kkfriend 重製香港版本.
部分內容可能和實際不符, 參考時如有錯漏, 請于指正.

[ 本帖最後由 kkt8899sp 於 2007-9-9 18:20 編輯 ]

不錯 支持下先，遲d正返個風格先

無圖 整不了

[ 本帖最後由 不懂我是誰 於 2007-9-9 18:18 編輯 ]

精華 , 支持

Thanks a lot !  

好有用
嚴重支持!!!
寫風格真係靠你

這樣我們這新人，
也能擁有自已想要的風格了。

那 Logo 如何修改成 整張圖片的呢?

THX!!對我很有用

真是太偉大了!
說明的太詳細深入~