AGAMES 討論區

標題: Dz6.0 CSS.htm 圖文解說 風格參考 [打印本頁]
作者: dlalden    時間: 2008-11-11 18:56:43     標題: Dz6.0 CSS.htm 圖文解說 風格參考

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







1 頁面總框架
所屬CSS class或ID：foruminfo
CSS代碼：
  1. #foruminfo { width: 100%; overflow: hidden; margin: 10px 0; color: {TEXT}; }
  2. #userinfo, #foruminfo #nav { float: left; padding-left: 5px; }
  3. #foruminfo p { margin: 0; }
  4. #foruminfo a{ color: {HIGHLIGHTLINK}; }
  5. #foruminfo em { color: {TABLETEXT}; }
  6. #foruminfo cite { font-weight: bold; }
  7. #foruminfo strong a { font-weight: bold; color: {TABLETEXT}; }
  8. #foruminfo #nav { margin: 0; }
複製代碼
2 頭部導航
1 總框架
所屬CSS class或ID：nav
CSS代碼：


  3. #userinfo, #foruminfo #nav { float: left; padding-left: 5px; }
  4. #nav { margin: 10px 5px; }
  5. #foruminfo #nav { margin: 0; }
  6. #nav a { font-weight: bold; color: {HIGHLIGHTLINK}; }
複製代碼
2 如果打開了版塊下拉菜單，則風格下拉菜單使用一個class
所屬CSS class或ID：dropmenu
CSS代碼：
  1. .dropmenu{ padding-right: 15px !important; background-image:url({IMGDIR}/arrow_down.gif) !important; background-position: 100% 50%!important; background-repeat: no-repeat !important; cursor: pointer; }
複製代碼
3 頁內文字廣告 (注意，本廣告顯示在頭部導航下方，上一主題/下一主題上方，圖中沒有)
所屬CSS class或ID：.ad_text
CSS代碼：
  1. .ad_text{ border: 1px solid {CATBORDER}; margin-bottom: {BOXSPACE}; padding:6px; {PORTALBOXBGCODE}; background-repeat: repeat-x; }
  2. .ad_text table { width: 100%; border-collapse: collapse; }
  3. .ad_text td { background-repeat: repeat-x; background-position: 0 0;padding: 2px 10px; }.ad_textlink1 { float: left; white-space: nowrap; }
複製代碼
4 主題切換-新帖/回覆
1 總框架
所屬CSS class或ID：pages_btns
CSS代碼：
  1. .pages_btns { width: 100%; padding: 0 0 8px; overflow: hidden; }
  2. .pages_btns .pages em { line-height: 26px; }
複製代碼
2 上一主題/下一主題(主題切換)
所屬CSS class或ID：threadflow
CSS代碼：
  1. .pages,.threadflow { float: left; border: 1px solid {CATBORDER}; background:{COMMONBOXBG}; height: 24px; line-height: 26px; color: {LIGHTTEXT};overflow: hidden; }
  2. .threadflow { margin-right: 5px; padding: 0 5px; }
複製代碼
3 新帖/回覆
所屬於CSS class或ID：postbtn（新帖class）/replybtn（回覆class）
CSS代碼：
  1. .postbtn, .replybtn { float: right; }
  2. .postbtn { margin-left: 10px; cursor: pointer; }
複製代碼
4 新帖下拉菜單
所屬CSS class或ID：popupmenu_popup & newspecialmenu
CSS代碼：
popupmenu_popup部分：
  1. .popupmenu_popup{ text-align: left; line-height: 1.4em; padding: 10px; overflow:hidden; border: 1px solid {CATBORDER}; {PORTALBOXBGCODE};background-repeat: repeat-x; background-position: 0 1px; }
  2. .popupmenu_popup .postauthor { width: 180px; }
  3. .popupmenu_popup .postauthor a { color: {HIGHLIGHTLINK}; }
  4. .headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: {TEXT}; background: none; white-space: nowrap; }
  5. .headactions .popupmenu_popup { width: 120px; }
  6. #menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabsli, .postmessage fieldset li, .side li, .formbox li, .notice li {list-style: none; }
複製代碼
newspecialmenu部分：


  3. .newspecialmenu { width: 100px; }
  4. .newspecialmenu li { background: url({IMGDIR}/folder_s.gif) no-repeat 3px 50%; float: left; }
  5. .newspecialmenu li.poll { background-image: url({IMGDIR}/pollsmall.gif); }
  6. .newspecialmenu li.trade { background-image: url({IMGDIR}/tradesmall.gif); }
  7. .newspecialmenu li.reward { background-image: url({IMGDIR}/rewardsmall.gif); }
  8. .newspecialmenu li.activity { background-image: url({IMGDIR}/activitysmall.gif); }
  9. .newspecialmenu li.debate { background-image: url({IMGDIR}/debatesmall.gif); }
  10. .newspecialmenu a { float: left; width: 75px; border-bottom: 1px solid {COMMONBOXBORDER}; padding: 5px 0 5px 25px; }
  11. .newspecialmenu a:hover { text-decoration: none; color: {HIGHLIGHTLINK}; border-bottom-color: {CATBORDER}; }
複製代碼

5 帖子主體部分：
1 總框架
所屬CSS class或ID：mainbox & viewthread
CSS代碼：
mainbox部分：
  1. .mainbox .headactions { color: {HEADERTEXT}; }
  2. .mainbox .headactions a, .mainbox .headactions span, .mainbox.headactions strong { background: url({IMGDIR}/headactions_line.gif)no-repeat 100% 50%; padding-right: 10px; margin-right: 8px; color:{HEADERTEXT}; }
  3. .mainbox .headactions strong { font-weight: bold; background-image: url({IMGDIR}/arrow_left.gif); }
  4. .mainbox { background: {TABLEBG}; border: {BORDERWIDTH} solid {BORDERCOLOR}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }
  5. .mainbox h1, .mainbox h3, .mainbox h6 { line-height: 31px;padding-left: 1em; {HEADERBGCODE}; background-repeat: repeat-x;background-position: 0 0; color: {HEADERTEXT}; }
  6. .mainbox h1 a, .mainbox h3 a { color: {HEADERTEXT}; }
  7. .mainbox table { width: 100%; }
  8. .mainbox thead th, .mainbox thead td { background: {CATCOLOR}; padding: 2px 5px; line-height: 22px; color: {TEXT}; }
  9. .mainbox thead.category th, .mainbox thead.category td { {CATBGCODE}; }
  10. .mainbox thead.separation th, .mainbox thead.separation td { border-top: 1px solid {BGBORDER} }
  11. .mainbox tbody th, .mainbox tbody td { border-top: 1px solid {BGBORDER}; padding: 5px; }
  12. .mainbox tbody cite, .mainbox tbody em { line-height: 1.3em; }
  13. .mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }
  14. .content .mainbox { padding-bottom: 5px; }
  15. .content .footoperation, .content .mainbox thead th, .content .mainboxthead td,.content .mainbox tbody th, .content .mainbox tbody td {border-top: none; border-bottom: 1px solid {BGBORDER}; }
複製代碼

viewthread部分：

  1. .viewthread { padding-bottom: 1px; }
  2. .viewthread table, #pmprompt table, #forumlinks, #pmlist, #specialpost { table-layout: fixed; }
  3. .viewthread ins { display: block; text-align: center; text-decoration:none; margin-bottom: 1px; background: {COMMONBOXBG}; border-bottom: 1pxsolid {CATBORDER}; line-height: 26px; }
  4. .viewthread ins, .viewthread ins a { color: {NOTICETEXT}; }
  5. .viewthread td.postcontent, .viewthread td.postauthor { vertical-align:top; padding: 0 1px; border: none; overflow: hidden; background:{TABLEBG}; }
複製代碼

2 頭部題目
1 左部（根據主框架的H1標記定義屬性而定）
2 右部（打印/推薦等功能菜單）
所屬CSS class或ID：headactions
CSS代碼：
  1. .blockcode .headactions { color: {TEXT}; font-size: {MSGSMALLSIZE}; cursor: pointer; padding-top: 5px; }
  2. .headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: {TEXT}; background: none; white-space: nowrap; }
  3. .headactions .popupmenu_popup { width: 120px; }
  4. .headactions { float: right; line-height: 1em; padding: 10px 10px 0 0; }
  5. .headactions img { vertical-align: middle; cursor: pointer; padding: 0 5px; }
  6. .mainbox .headactions { color: {HEADERTEXT}; }
  7. .mainbox .headactions a, .mainbox .headactions span, .mainbox.headactions strong { background: url({IMGDIR}/headactions_line.gif)no-repeat 100% 50%; padding-right: 10px; margin-right: 8px; color:{HEADERTEXT}; }
  8. .mainbox .headactions strong { font-weight: bold; background-image: url({IMGDIR}/arrow_left.gif); }
複製代碼

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

  1. .viewthreadtd.postcontent, .viewthread td.postauthor { vertical-align: top;padding: 0 1px; border: none; overflow: hidden; background: {TABLEBG}; }
  2. .mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }
  3. .postauthor cite { font-weight: bold; display: block; border-bottom:1px solid {BGBORDER}; height: 21px; overflow: hidden; margin-bottom:5px; }
  4. .postauthor cite label a { float: right; padding: 3px; }
  5. .postauthor dt { float: left; margin-right: 0.5em; color: {TEXT}; }
  6. .postauthor dd, .postauthor dt { height: 1.6em; line-height: 1.6em; }
  7. .postauthor dd { overflow: hidden; }
  8. .postauthor p { margin: 0 10px; }
  9. .postauthor p.customstatus { color: {TEXT} }
  10. .postauthor p em, .postauthor dt em { color: {NOTICETEXT}; }
  11. .postauthor ul { margin: 5px 10px; line-height: 1.6em; overflow: hidden; }
  12. .postauthor li { text-indent: 22px; width: 49.5%; height: 1.6em;overflow: hidden; float: left; background-position: 0 50%;background-repeat: no-repeat; }
  13. .postauthor li.pm { background-image: url({IMGDIR}/buddy_sendpm.gif); }
  14. .postauthor li.buddy { background-image: url({IMGDIR}/user_add.gif); }
  15. .postauthor li.space { background-image: url({IMGDIR}/forumlink.gif); }
  16. .postauthor li.online { background-image: url({IMGDIR}/user_online.gif); color: {NOTICETEXT}; }
  17. .postauthor li.offline { color: {TEXT}; background-image: url({IMGDIR}/user_offline.gif); }
  18. .postauthor li.magic { background-image: url({IMGDIR}/magic.gif);}
  19. .postauthor dl.profile, .postauthor div.bio { margin: 5px 10px; padding-top: 5px; }
複製代碼

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

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

8 右部（帖子內容）
1 主框架
所屬CSS class或ID：postcontent
CSS代碼：
  1. .specialthread.postcontent label { float: right; display: inline; margin: 12px 12px0; border: 1px solid {CATBORDER}; padding: 3px 5px; background:{CATCOLOR} no-repeat 3px 50%; }.specialthread .postcontent label strong{ color: {NOTICETEXT}; }
  2. .specialthread .postcontent label a { color: {HIGHLIGHTLINK}; }
  3. .rewardthread .postcontent label { background-image: url({IMGDIR}/rewardsmallend.gif); padding-left: 25px; }
  4. .rewardthread .postcontent label.unsolved { background-image: url({IMGDIR}/rewardsmall.gif); float:right; }
  5. .viewthread td.postcontent, .viewthread td.postauthor { vertical-align:top; padding: 0 1px; border: none; overflow: hidden; background:{TABLEBG}; }
複製代碼

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

  2. .postinfo{ color: {TEXT}; border-bottom: 1px solid {BGBORDER}; padding: 0 5px;line-height: 26px; height: 26px; overflow: hidden; }
  3. .postinfo strong, .postinfo em { float: right; line-height: 26px!important; cursor: pointer; padding: 0 3px; color: {HIGHLIGHTLINK}; }
  4. .postinfo strong { margin-left: 5px; color: {NOTICETEXT}; font-weight: bold; }
  5. * html .postinfo strong { margin-top: -2px; }
  6. .postinfo strong sup { font-weight: normal; margin-left: 1px; color: {LIGHTTEXT}; }
  7. .postinfo a { color: {HIGHLIGHTLINK}; }
  8. .postinfo label { color:{NOTICETEXT}; cursor: pointer; }
複製代碼

3 內容部分
1 總框架
所屬CSS class或ID：postmessage & defaultpost
CSS代碼：
postmessage部分：
  1. .postmessage { padding: 10px; overflow-x: hidden; }
  2. .postmessage *, .pmmessage *, .register * { line-height: normal; }
  3. .postmessage h2 {font-size: 1.17em; margin-bottom: 0.5em; }
  4. .postmessage .box { border-width: 0; margin: 5px 0; }
  5. .postmessage .typeoption { width: 500px; }
  6. .postmessage .box tbody th, .postmessage .box tbody td { border-top-color: {COMMONBOXBORDER}; }
  7. .postmessage fieldset { font-size: 12px; width: 500px; padding: 10px; border: 1px solid {BGBORDER}; margin-top: 2em; }
  8. .postmessage fieldset li { color: {LIGHTTEXT}; }
  9. .postmessage strong { font-weight: bold; }
  10. .postmessage em { color:{TEXT}; }
  11. .postmessage span.t_tag { cursor: pointer; border-bottom: 1px solid #F00; white-space: nowrap; }
  12. .specialpost .postmessage { text-align: left; min-height: 30px; border-bottom: 1px solid {CATBORDER}; }
  13. * html .specialpost .postmessage { height: 30px; overflow: visible; }
  14. .tradethread .postmessage { min-height: 160px; }
  15. * html .tradethread .postmessage { height: 360px !important; }
  16. .tradeinfo .postmessage { min-height: 100px; }
  17. * html .tradethread .postmessage { height: 100px; }
  18. .debatethread .postmessage { min-height: inherit; height: auto; }
  19. #menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabsli, .postmessage fieldset li, .side li, .formbox li, .notice li {list-style: none; }
複製代碼

defaultpost部分：


  2. .defaultpost { height: auto !important; height:{POSTMINHEIGHT}px; min-height:{POSTMINHEIGHT}px !important; }
複製代碼

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

3 內容部分
所屬CSS class或ID：t_msgfont
CSS代碼：
  1. .t_msgfont, .t_msgfont td { font-size: {MSGFONTSIZE}; line-height: 1.6em; }
複製代碼

對應的小字號CSS代碼：
  1. .t_smallfont, .t_smallfont td { font-size: {MSGSMALLSIZE}; line-height: 1.6em; }
複製代碼

對應的大字號CSS代碼：
  1. .t_bigfont, .t_bigfont td { font-size: {MSGBIGSIZE}; line-height: 1.6em; }
複製代碼

字號間通用CSS代碼：
  1. .t_msgfont *, .t_smallfont *, .t_bigfont * { line-height: normal; }
  2. .t_msgfont a, .t_smallfont a, .t_bigfont a { color: {HIGHLIGHTLINK}; }
複製代碼

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

  1. p.posttags { margin: 2em 0em 0.5em 0em; }
  2. p.posttags a, .footoperation span.posttags a { color: #F00; font-weight: bold; }
  3. p.posttags .postkeywords a, { color: {NOTICETEXT}; }
複製代碼

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

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

  1. .forumlist table, .threadlist table { border-collapse: separate; }
  2. .forumlist tbody strong, .threadlist tbody strong , .formbox tbody strong { color: {NOTICETEXT}; }
  3. .forumlist tbody th, .forumlist tbody td, .threadlist tbody th,.threadlist tbody td { color: {TEXT}; padding: 1px 5px; border-bottom:1px solid {TABLEBG}; background-color: {ALTBG1}; }
  4. .forumlist tbody th { height: 40px; }
  5. .forumlist th, .threadlist th { text-align: left; }
  6. .forumlist th { padding-left: 55px !important; }
  7. .forumlist h2 em { color: {HIGHLIGHTLINK}; }
  8. .forumlist tbody th { background-image: url({IMGDIR}/forum.gif); background-repeat: no-repeat; background-position: 13px 50%; }
  9. .forumlist tbody th.new { background-image: url({IMGDIR}/forum_new.gif); }
  10. .forumlist tbody tr:hover th, .forumlist tbody tr:hover td, .threadlisttbody tr:hover th, .threadlist tbody tr:hover td { background-color:{ALTBG2}; }
  11. .forumlist td.lastpost { width: 260px; }
  12. .forumlist cite, .threadlist cite { display: block; }
複製代碼

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

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

10 快速回覆主題
1 主框架
所屬CSS class或ID：box（class） & quickpost（ID）
CSS代碼：
box部分：
  1. .postmessage .box { border-width: 0; margin: 5px 0; }
  2. .postmessage .box tbody th, .postmessage .box tbody td { border-top-color: {COMMONBOXBORDER}; }
  3. .box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }
  4. .box h4 { {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }
  5. .box table { width: 100%; }
  6. .box td { border-top: 1px solid {COMMONBOXBORDER}; }
  7. .box .box li { list-style: none;}
複製代碼

quickpost部分：

  1. #quickpost { overflow: hidden; padding-bottom: 0; }
  2. * html #quickpost { height: 1%; overflow: visible; }
  3. #quickpost #smilieslist { margin: 0 1em; }
  4. #quickpost h5 { margin: 0.5em 1em; }
複製代碼

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

3 左部「選項」部分
1 主框架
所屬CSS class或ID：postoptions
CSS代碼：
  1. .postoptions, .postform, .smilies { float: left; }
  2. .postoptions, .smilies { width: 20%; }
  3. .postoptions p { margin: 2px 0.7em; }
複製代碼

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

  1. input[type="radio"], input[type="checkbox"] { border: none; }
複製代碼

4 中部輸入部分
1 主框架
所屬CSS class或ID：postform
CSS代碼：
  1. .postoptions, .postform, .smilies { float: left; }
  2. .postform { width: 59%; padding-bottom: 10px; }
  3. .postform p label { vertical-align: top; font-weight: bold; }
  4. .postform h5 input { width: 60%; }
  5. .postform p, .postform div { margin: 0 1em; }
  6. .postform h4 * { vertical-align: middle; }
  7. .postform h4 input { width: 60%; }
  8. .postform textarea { width: 90%; height: 160px; }
  9. .postform .btns { margin-top: 0.5em; line-height: 30px; color: {LIGHTTEXT}; font-family: 細明體, "Times New Roman"; }
  10. .postform .btns button { vertical-align: middle; }
  11. .postform .btns a { color: {HIGHLIGHTLINK}; }
  12. .postform button { border: none; background: transparent; color: {HIGHLIGHTLINK}; padding: 0; cursor: pointer; }
  13. .postform #postsubmit { float: left; display: inline; margin-left: 2.3em; }
  14. .postform .special, #postform .special { font-weight: bold; color: {HIGHLIGHTLINK};}
複製代碼

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

3 內容輸入框
所屬CSS class或ID：autosave
CSS代碼：
  1. .autosave { behavior: url(#default#userdata); }
複製代碼

4 下方提交按鈕及功能按鈕（發表帖子按鈕的定義請參照"發帖"講解最下面的按鈕定義部分）
所屬CSS class或ID：btns
CSS代碼：
  1. .postform .btns { margin-top: 0.5em; line-height: 30px; color: {LIGHTTEXT}; font-family: 細明體, "Times New Roman"; }
  2. .postform .btns button { vertical-align: middle; }
  3. .postform .btns a { color: {HIGHLIGHTLINK}; }
  4. .btns em { color: {LIGHTTEXT}; }
  5. .btns th, .btns td { border: none !important; }
複製代碼

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

  1. .postoptions, .postform, .smilies { float: left; }
  2. .postoptions, .smilies { width: 20%; }
複製代碼

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

  1. #smilieslist { border: 1px solid {COMMONBOXBORDER}; overflow: hidden; text-align: center; }
  2. #quickpost #smilieslist { margin: 0 1em; }
  3. #smilieslist td { border: none; padding: 8px 0; cursor: pointer; }
  4. #smilieslist td:hover { background: {COMMONBOXBORDER}; }
  5. #smilieslist .pages { float: none; border-width: 1px 0 0; }
複製代碼

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

  1. .pages_btns .pages em { line-height: 26px; }
  2. .pages, .threadflow { float: left; border: 1px solid {CATBORDER};background: {COMMONBOXBG}; height: 24px; line-height: 26px; color:{LIGHTTEXT}; overflow: hidden; }
  3. .pages a, .pages strong, .pages em, .pages kbd { float: left; padding: 0 8px; line-height:26px; }
  4. .pages a:hover { background-color: {BGCOLOR}; }
  5. .pages strong { font-weight: bold; color: {NOTICETEXT}; background: {BGBORDER}; }
  6. .pages a.prev, .pages a.next { line-height: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
  7. .pages a.next { padding: 0 15px; }
  8. .pages kbd { border-left: 1px solid {CATBORDER}; margin: 0; }
  9. * html .pages kbd { padding: 1px 8px; }
  10. .pages kbd input { border: 1px solid {CATBORDER}; margin-top: 3px!important; * > margin-top: 1px !important; margin: 1px 4px 0 3px;padding: 0 2px; height: 17px; }
  11. .pages kbd>input { margin-bottom: 2px; }
複製代碼

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

  1. footfilter部分：
  2. #footfilter { padding: 10px; he\ight: 44px; height: 24px; line-height:24px; background: {COMMONBOXBG}; border-color: {COMMONBOXBORDER};font-family: 細明體, "Times New Roman"; }
  3. #footfilter form { float: right; }
  4. #footfilter * { vertical-align: middle; }
複製代碼

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




1 廣告部分CSS
所屬CSS class或ID：ad_footerbanner
注意，另外兩個層的ID：ad_footerbanner2，ad_footerbanner3在CSS中沒有定義，建議沿用本class。
CSS代碼：
  1. .ad_footerbanner { text-align: center; clear: both; margin: 5px }
複製代碼

2 廣告下部，外框架部分CSS
所屬CSS class或ID：footer
CSS代碼：
  1. #footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; }
複製代碼

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

  1. .wrap { width: {MAINTABLEWIDTH}; text-align: left; margin: 0 auto; overflow: hidden; }  
複製代碼

4 右部分主框架
所屬CSS class或ID：footlinks
CSS代碼：
  1. #footlinks { float: right; margin-top: -3px; text-align: right; }
複製代碼

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

  1. .scrolltop { cursor: pointer; }
複製代碼

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

  1. .dropmenu{ padding-right: 15px !important; background-image:url({IMGDIR}/arrow_down.gif) !important; background-position: 100% 50%!important; background-repeat: no-repeat !important; cursor: pointer; }
複製代碼

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

.popupmenu_popup部分：
1
  1. #menuli, .popupmenu_popup li, #announcement li, .portalbox li, .tabs li,.postmessage fieldset li, .side li, .formbox li, .notice li {list-style: none; }
複製代碼

2
  1. .popupmenu_popup{ text-align: left; line-height: 1.4em; padding: 10px; overflow:hidden; border: 1px solid {CATBORDER}; {PORTALBOXBGCODE};background-repeat: repeat-x; background-position: 0 1px; }
複製代碼

3
  1. .popupmenu_popup .postauthor { width: 180px; }
複製代碼

4

  2. .popupmenu_popup .postauthor a { color: {HIGHLIGHTLINK}; }
複製代碼

5

  2. .headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: {TEXT}; background: none; white-space: nowrap; }
複製代碼

6

  2. .headactions .popupmenu_popup { width: 120px; }
複製代碼

#styleswitcher_menu部分：
1

  1. #styleswitcher_menu { width: 120px; }
複製代碼

（這裡CSS裡重複了一個）
2
  1. #styleswitcher_menu li.current { font-weight: bold; }
複製代碼

3
  1. #styleswitcher_menu li.current a { color: {TEXT}; }
複製代碼

4
  1. #styleswitcher_menu li.current { font-weight: bold; }
複製代碼

6左部圖
所屬CSS 標記：img
  1. #footer img { float: left; margin: 0 10px 0 0; }
複製代碼

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

  1. #copyright, #debuginfo { font: {SMFONTSIZE}/1.5em {SMFONT}; }
複製代碼

2

  2. #copyright strong, #copyright em { font-weight: bold; }

複製代碼

3

  2. #copyright strong a { color: #0954A6; }

複製代碼

4
  1. #copyright em { color: #FF9D25; }
複製代碼


2 下方文字部分：debuginfo
CSS代碼：
1
  1. #copyright, #debuginfo { font: {SMFONTSIZE}/1.5em {SMFONT}; }
複製代碼

2

  2. #debuginfo { color: {LIGHTTEXT}; }

複製代碼

[ 本帖最後由 dlalden 於 2008-11-11 19:05 編輯 ]



歡迎光臨 AGAMES 討論區 (http://forum.agames.hk/) Powered by Discuz! X2