|
 
- 帖子
- 937
- 积分
- 1882
- 威望
- 99
- 金币
- 68 个
- 体力
- 825
- 注册时间
- 2006-5-1
|

[DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说,让您更方便的进行DISCUZ风格设计!
[DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说
模版:viewthread.htm
相应位置请参照图
1 页面总框架
所属CSS class或ID:foruminfo
CSS代码:- #foruminfo { width: 100%; overflow: hidden; margin: 10px 0; color: {TEXT}; }
- #userinfo, #foruminfo #nav { float: left; padding-left: 5px; }
- #foruminfo p { margin: 0; }
- #foruminfo a{ color: {HIGHLIGHTLINK}; }
- #foruminfo em { color: {TABLETEXT}; }
- #foruminfo cite { font-weight: bold; }
- #foruminfo strong a { font-weight: bold; color: {TABLETEXT}; }
- #foruminfo #nav { margin: 0; }
复制代码 2 头部导航
1 总框架
所属CSS class或ID:nav
CSS代码:- #userinfo, #foruminfo #nav { float: left; padding-left: 5px; }
- #nav { margin: 10px 5px; }
- #foruminfo #nav { margin: 0; }
- #nav a { font-weight: bold; color: {HIGHLIGHTLINK}; }
复制代码 2 如果打开了版块下拉菜单,则风格下拉菜单使用一个class
所属CSS class或ID:dropmenu
CSS代码:- .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代码:- .ad_text { border: 1px solid {CATBORDER}; margin-bottom: {BOXSPACE}; padding: 6px; {PORTALBOXBGCODE}; background-repeat: repeat-x; }
- .ad_text table { width: 100%; border-collapse: collapse; }
- .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代码:- .pages_btns { width: 100%; padding: 0 0 8px; overflow: hidden; }
- .pages_btns .pages em { line-height: 26px; }
复制代码 2 上一主题/下一主题(主题切换)
所属CSS class或ID:threadflow
CSS代码:- .pages, .threadflow { float: left; border: 1px solid {CATBORDER}; background: {COMMONBOXBG}; height: 24px; line-height: 26px; color: {LIGHTTEXT}; overflow: hidden; }
- .threadflow { margin-right: 5px; padding: 0 5px; }
复制代码 3 新帖/回复
所属于CSS class或ID:postbtn(新帖class)/replybtn(回复class)
CSS代码:- .postbtn, .replybtn { float: right; }
- .postbtn { margin-left: 10px; cursor: pointer; }
复制代码 4 新帖下拉菜单
所属CSS class或ID:popupmenu_popup & newspecialmenu
CSS代码:
popupmenu_popup部分:- .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; }
- .popupmenu_popup .postauthor { width: 180px; }
- .popupmenu_popup .postauthor a { color: {HIGHLIGHTLINK}; }
- .headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: {TEXT}; background: none; white-space: nowrap; }
- .headactions .popupmenu_popup { width: 120px; }
- #menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabs li, .postmessage fieldset li, .side li, .formbox li, .notice li { list-style: none; }
复制代码 newspecialmenu部分:- .newspecialmenu { width: 100px; }
- .newspecialmenu li { background: url({IMGDIR}/folder_s.gif) no-repeat 3px 50%; float: left; }
- .newspecialmenu li.poll { background-image: url({IMGDIR}/pollsmall.gif); }
- .newspecialmenu li.trade { background-image: url({IMGDIR}/tradesmall.gif); }
- .newspecialmenu li.reward { background-image: url({IMGDIR}/rewardsmall.gif); }
- .newspecialmenu li.activity { background-image: url({IMGDIR}/activitysmall.gif); }
- .newspecialmenu li.debate { background-image: url({IMGDIR}/debatesmall.gif); }
- .newspecialmenu a { float: left; width: 75px; border-bottom: 1px solid {COMMONBOXBORDER}; padding: 5px 0 5px 25px; }
- .newspecialmenu a:hover { text-decoration: none; color: {HIGHLIGHTLINK}; border-bottom-color: {CATBORDER}; }
复制代码 5 帖子主体部分:
1 总框架
所属CSS class或ID:mainbox & viewthread
CSS代码:
mainbox部分:- .mainbox .headactions { color: {HEADERTEXT}; }
- .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}; }
- .mainbox .headactions strong { font-weight: bold; background-image: url({IMGDIR}/arrow_left.gif); }
- .mainbox { background: {TABLEBG}; border: {BORDERWIDTH} solid {BORDERCOLOR}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }
- .mainbox h1, .mainbox h3, .mainbox h6 { line-height: 31px; padding-left: 1em; {HEADERBGCODE}; background-repeat: repeat-x; background-position: 0 0; color: {HEADERTEXT}; }
- .mainbox h1 a, .mainbox h3 a { color: {HEADERTEXT}; }
- .mainbox table { width: 100%; }
- .mainbox thead th, .mainbox thead td { background: {CATCOLOR}; padding: 2px 5px; line-height: 22px; color: {TEXT}; }
- .mainbox thead.category th, .mainbox thead.category td { {CATBGCODE}; }
- .mainbox thead.separation th, .mainbox thead.separation td { border-top: 1px solid {BGBORDER} }
- .mainbox tbody th, .mainbox tbody td { border-top: 1px solid {BGBORDER}; padding: 5px; }
- .mainbox tbody cite, .mainbox tbody em { line-height: 1.3em; }
- .mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }
- .content .mainbox { padding-bottom: 5px; }
- .content .footoperation, .content .mainbox thead th, .content .mainbox thead td,.content .mainbox tbody th, .content .mainbox tbody td { border-top: none; border-bottom: 1px solid {BGBORDER}; }
复制代码 viewthread部分:- .viewthread { padding-bottom: 1px; }
- .viewthread table, #pmprompt table, #forumlinks, #pmlist, #specialpost { table-layout: fixed; }
- .viewthread ins { display: block; text-align: center; text-decoration: none; margin-bottom: 1px; background: {COMMONBOXBG}; border-bottom: 1px solid {CATBORDER}; line-height: 26px; }
- .viewthread ins, .viewthread ins a { color: {NOTICETEXT}; }
- .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代码:- .blockcode .headactions { color: {TEXT}; font-size: {MSGSMALLSIZE}; cursor: pointer; padding-top: 5px; }
- .headactions .popupmenu_popup a, .headactions .popupmenu_popup strong { color: {TEXT}; background: none; white-space: nowrap; }
- .headactions .popupmenu_popup { width: 120px; }
- .headactions { float: right; line-height: 1em; padding: 10px 10px 0 0; }
- .headactions img { vertical-align: middle; cursor: pointer; padding: 0 5px; }
- .mainbox .headactions { color: {HEADERTEXT}; }
- .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}; }
- .mainbox .headactions strong { font-weight: bold; background-image: url({IMGDIR}/arrow_left.gif); }
复制代码 6 左部(用户信息栏)
所属CSS class或ID:postauthor
CSS代码:- .viewthread td.postcontent, .viewthread td.postauthor { vertical-align: top; padding: 0 1px; border: none; overflow: hidden; background: {TABLEBG}; }
- .mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }
- .postauthor cite { font-weight: bold; display: block; border-bottom: 1px solid {BGBORDER}; height: 21px; overflow: hidden; margin-bottom: 5px; }
- .postauthor cite label a { float: right; padding: 3px; }
- .postauthor dt { float: left; margin-right: 0.5em; color: {TEXT}; }
- .postauthor dd, .postauthor dt { height: 1.6em; line-height: 1.6em; }
- .postauthor dd { overflow: hidden; }
- .postauthor p { margin: 0 10px; }
- .postauthor p.customstatus { color: {TEXT} }
- .postauthor p em, .postauthor dt em { color: {NOTICETEXT}; }
- .postauthor ul { margin: 5px 10px; line-height: 1.6em; overflow: hidden; }
- .postauthor li { text-indent: 22px; width: 49.5%; height: 1.6em; overflow: hidden; float: left; background-position: 0 50%; background-repeat: no-repeat; }
- .postauthor li.pm { background-image: url({IMGDIR}/buddy_sendpm.gif); }
- .postauthor li.buddy { background-image: url({IMGDIR}/user_add.gif); }
- .postauthor li.space { background-image: url({IMGDIR}/forumlink.gif); }
- .postauthor li.online { background-image: url({IMGDIR}/user_online.gif); color: {NOTICETEXT}; }
- .postauthor li.offline { color: {TEXT}; background-image: url({IMGDIR}/user_offline.gif); }
- .postauthor li.magic { background-image: url({IMGDIR}/magic.gif);}
- .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代码:- .specialthread .postcontent label { float: right; display: inline; margin: 12px 12px 0; border: 1px solid {CATBORDER}; padding: 3px 5px; background: {CATCOLOR} no-repeat 3px 50%; }.specialthread .postcontent label strong { color: {NOTICETEXT}; }
- .specialthread .postcontent label a { color: {HIGHLIGHTLINK}; }
- .rewardthread .postcontent label { background-image: url({IMGDIR}/rewardsmallend.gif); padding-left: 25px; }
- .rewardthread .postcontent label.unsolved { background-image: url({IMGDIR}/rewardsmall.gif); float:right; }
- .viewthread td.postcontent, .viewthread td.postauthor { vertical-align: top; padding: 0 1px; border: none; overflow: hidden; background: {TABLEBG}; }
复制代码 2顶部功能栏(只看该作者/楼层/帖子字号切换等)
所属CSS class或ID:postinfo
CSS代码:- .postinfo { color: {TEXT}; border-bottom: 1px solid {BGBORDER}; padding: 0 5px; line-height: 26px; height: 26px; overflow: hidden; }
- .postinfo strong, .postinfo em { float: right; line-height: 26px !important; cursor: pointer; padding: 0 3px; color: {HIGHLIGHTLINK}; }
- .postinfo strong { margin-left: 5px; color: {NOTICETEXT}; font-weight: bold; }
- * html .postinfo strong { margin-top: -2px; }
- .postinfo strong sup { font-weight: normal; margin-left: 1px; color: {LIGHTTEXT}; }
- .postinfo a { color: {HIGHLIGHTLINK}; }
- .postinfo label { color:{NOTICETEXT}; cursor: pointer; }
复制代码 3 内容部分
1 总框架
所属CSS class或ID:postmessage & defaultpost
CSS代码:
postmessage部分:- .postmessage { padding: 10px; overflow-x: hidden; }
- .postmessage *, .pmmessage *, .register * { line-height: normal; }
- .postmessage h2 {font-size: 1.17em; margin-bottom: 0.5em; }
- .postmessage .box { border-width: 0; margin: 5px 0; }
- .postmessage .typeoption { width: 500px; }
- .postmessage .box tbody th, .postmessage .box tbody td { border-top-color: {COMMONBOXBORDER}; }
- .postmessage fieldset { font-size: 12px; width: 500px; padding: 10px; border: 1px solid {BGBORDER}; margin-top: 2em; }
- .postmessage fieldset li { color: {LIGHTTEXT}; }
- .postmessage strong { font-weight: bold; }
- .postmessage em { color:{TEXT}; }
- .postmessage span.t_tag { cursor: pointer; border-bottom: 1px solid #F00; white-space: nowrap; }
- .specialpost .postmessage { text-align: left; min-height: 30px; border-bottom: 1px solid {CATBORDER}; }
- * html .specialpost .postmessage { height: 30px; overflow: visible; }
- .tradethread .postmessage { min-height: 160px; }
- * html .tradethread .postmessage { height: 360px !important; }
- .tradeinfo .postmessage { min-height: 100px; }
- * html .tradethread .postmessage { height: 100px; }
- .debatethread .postmessage { min-height: inherit; height: auto; }
- #menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabs li, .postmessage fieldset li, .side li, .formbox li, .notice li { list-style: none; }
复制代码 defaultpost部分:- .defaultpost { height: auto !important; height:{POSTMINHEIGHT}px; min-height:{POSTMINHEIGHT}px !important; }
复制代码 2 题目部分(请参照总框架中的h2标记定义)
3 内容部分
所属CSS class或ID:t_msgfont
CSS代码:- .t_msgfont, .t_msgfont td { font-size: {MSGFONTSIZE}; line-height: 1.6em; }
复制代码 对应的小字号CSS代码:- .t_smallfont, .t_smallfont td { font-size: {MSGSMALLSIZE}; line-height: 1.6em; }
复制代码 对应的大字号CSS代码:- .t_bigfont, .t_bigfont td { font-size: {MSGBIGSIZE}; line-height: 1.6em; }
复制代码 字号间通用CSS代码:- .t_msgfont *, .t_smallfont *, .t_bigfont * { line-height: normal; }
- .t_msgfont a, .t_smallfont a, .t_bigfont a { color: {HIGHLIGHTLINK}; }
复制代码 4 搜索更多相关主题的帖子(tag)
所属于CSS class或ID:posttags
CSS代码:- p.posttags { margin: 2em 0em 0.5em 0em; }
- p.posttags a, .footoperation span.posttags a { color: #F00; font-weight: bold; }
- p.posttags .postkeywords a, { color: {NOTICETEXT}; }
复制代码 下面的楼层和顶楼的CSS基本相同,底部的主题切换-新帖/回复和顶部的CSS一样
9 相关主题部分
1 主框架部分
所属CSS class或ID:mainbox & forumlist(mainbox部分请参照前面)
CSS代码:
forumlist部分:- .forumlist table, .threadlist table { border-collapse: separate; }
- .forumlist tbody strong, .threadlist tbody strong , .formbox tbody strong { color: {NOTICETEXT}; }
- .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}; }
- .forumlist tbody th { height: 40px; }
- .forumlist th, .threadlist th { text-align: left; }
- .forumlist th { padding-left: 55px !important; }
- .forumlist h2 em { color: {HIGHLIGHTLINK}; }
- .forumlist tbody th { background-image: url({IMGDIR}/forum.gif); background-repeat: no-repeat; background-position: 13px 50%; }
- .forumlist tbody th.new { background-image: url({IMGDIR}/forum_new.gif); }
- .forumlist tbody tr:hover th, .forumlist tbody tr:hover td, .threadlist tbody tr:hover th, .threadlist tbody tr:hover td { background-color: {ALTBG2}; }
- .forumlist td.lastpost { width: 260px; }
- .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部分:- .postmessage .box { border-width: 0; margin: 5px 0; }
- .postmessage .box tbody th, .postmessage .box tbody td { border-top-color: {COMMONBOXBORDER}; }
- .box { background: {TABLEBG}; border: {BORDERWIDTH} solid {CATBORDER}; padding: {TABLESPACE}; margin-bottom: {BOXSPACE}; }
- .box h4 { {PORTALBOXBGCODE}; background-repeat: repeat-x; background-position: 0 0; line-height: 30px; padding: 0 10px; }
- .box table { width: 100%; }
- .box td { border-top: 1px solid {COMMONBOXBORDER}; }
- .box .box li { list-style: none;}
复制代码 quickpost部分:- #quickpost { overflow: hidden; padding-bottom: 0; }
- * html #quickpost { height: 1%; overflow: visible; }
- #quickpost #smilieslist { margin: 0 1em; }
- #quickpost h5 { margin: 0.5em 1em; }
复制代码 2“快速回复主题”题目部分(请参照上面的h4标记定义)
3 左部“选项”部分
1 主框架
所属CSS class或ID:postoptions
CSS代码:- .postoptions, .postform, .smilies { float: left; }
- .postoptions, .smilies { width: 20%; }
- .postoptions p { margin: 2px 0.7em; }
复制代码 2 选项前多选框
所属于CSS class或ID:checkbox
CSS代码:- input[type="radio"], input[type="checkbox"] { border: none; }
复制代码 4 中部输入部分
1 主框架
所属CSS class或ID:postform
CSS代码:- .postoptions, .postform, .smilies { float: left; }
- .postform { width: 59%; padding-bottom: 10px; }
- .postform p label { vertical-align: top; font-weight: bold; }
- .postform h5 input { width: 60%; }
- .postform p, .postform div { margin: 0 1em; }
- .postform h4 * { vertical-align: middle; }
- .postform h4 input { width: 60%; }
- .postform textarea { width: 90%; height: 160px; }
- .postform .btns { margin-top: 0.5em; line-height: 30px; color: {LIGHTTEXT}; font-family: Simsun, "Times New Roman"; }
- .postform .btns button { vertical-align: middle; }
- .postform .btns a { color: {HIGHLIGHTLINK}; }
- .postform button { border: none; background: transparent; color: {HIGHLIGHTLINK}; padding: 0; cursor: pointer; }
- .postform #postsubmit { float: left; display: inline; margin-left: 2.3em; }
- .postform .special, #postform .special { font-weight: bold; color: {HIGHLIGHTLINK};}
复制代码 2“标题”及输入框(请参照主框架中的h5定义)
3 内容输入框
所属CSS class或ID:autosave
CSS代码:- .autosave { behavior: url(#default#userdata); }
复制代码 4 下方提交按钮及功能按钮(发表帖子按钮的定义请参照"发帖"讲解最下面的按钮定义部分)
所属CSS class或ID:btns
CSS代码:- .postform .btns { margin-top: 0.5em; line-height: 30px; color: {LIGHTTEXT}; font-family: Simsun, "Times New Roman"; }
- .postform .btns button { vertical-align: middle; }
- .postform .btns a { color: {HIGHLIGHTLINK}; }
- .btns em { color: {LIGHTTEXT}; }
- .btns th, .btns td { border: none !important; }
复制代码 5 右部smilies
所属CSS class或ID:smilies
CSS代码:- .postoptions, .postform, .smilies { float: left; }
- .postoptions, .smilies { width: 20%; }
复制代码 1 中间smilieslist部分
所属CSS class或ID:smilieslist
CSS代码:- #smilieslist { border: 1px solid {COMMONBOXBORDER}; overflow: hidden; text-align: center; }
- #quickpost #smilieslist { margin: 0 1em; }
- #smilieslist td { border: none; padding: 8px 0; cursor: pointer; }
- #smilieslist td:hover { background: {COMMONBOXBORDER}; }
- #smilieslist .pages { float: none; border-width: 1px 0 0; }
复制代码 2 表情翻页
所属CSS class或ID:pages
CSS代码:- .pages_btns .pages em { line-height: 26px; }
- .pages, .threadflow { float: left; border: 1px solid {CATBORDER}; background: {COMMONBOXBG}; height: 24px; line-height: 26px; color: {LIGHTTEXT}; overflow: hidden; }
- .pages a, .pages strong, .pages em, .pages kbd { float: left; padding: 0 8px; line-height:26px; }
- .pages a:hover { background-color: {BGCOLOR}; }
- .pages strong { font-weight: bold; color: {NOTICETEXT}; background: {BGBORDER}; }
- .pages a.prev, .pages a.next { line-height: 24px; font-family: Verdana, Arial, Helvetica, sans-serif; }
- .pages a.next { padding: 0 15px; }
- .pages kbd { border-left: 1px solid {CATBORDER}; margin: 0; }
- * html .pages kbd { padding: 1px 8px; }
- .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; }
- .pages kbd>input { margin-bottom: 2px; }
复制代码 11 论坛跳转--帖子管理
所属CSS class或ID:box(class) & footfilter(ID)(box部分请参照前面的代码)
CSS代码:- footfilter部分:
- #footfilter { padding: 10px; he\ight: 44px; height: 24px; line-height: 24px; background: {COMMONBOXBG}; border-color: {COMMONBOXBORDER}; font-family: Simsun, "Times New Roman"; }
- #footfilter form { float: right; }
- #footfilter * { vertical-align: middle; }
复制代码 [ 本帖最后由 伊泽浩 于 2007-8-24 15:31 编辑 ] |
-
3
评分次数
-
|