Discuz! 论坛官方 » Discuz!模板风格 » [DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说,让您更方便的进行DISCUZ风格设计!

插件作者的标准出来了！Manyou诚邀开发者加盟！ “互联网平台开发者”特刊有奖征集开发者	立即免费下载 Discuz!6.1.0正式版 Discuz! 6.1.0 使用说明	Discuz!NT2.5正式版发布开放源码下载
UCenter Home 1.2 正式版发布官方站 \| 帮助文档	基于ECShop的网店托管-卖否 PHP就业培训直通车 \| LAMP培训大连	Discuz!收费服务内容及价格 “感谢有你同行”手握手2008年数万元重奖志愿者
Discuz!/ECShop 专用官方虚拟主机亿声传媒（Insenz）中秋祝福发送中	Comsenz 招聘信息网店系统ECShop v2.6.0正式版火热发布	基于Discuz!的免费论坛空间5D6D 参与有奖社区调查赢取台湾5日游

138 12 3 4 5 6 7 8 9 10 ››... 14

打印

[经验] [DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说,让您更方便的进行DISCUZ风格设计!

本主题由 System 于 2007-9-8 20:00 解除限时置顶

缘亦如此

头衔 DST Member

星级 Rank: 6 Rank: 6

UID: 358496
帖子: 846
积分: 1750
威望: 93
金币: 69 个
注册时间: 2006-5-1
最后登录: 2008-9-5

1^# 大中小发表于 2007-8-21 18:22 只看该作者

[DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说,让您更方便的进行DISCUZ风格设计!

[DST]倾情贡献,DISCUZ!6.0 CSS.htm详细图文解说

引用:
注:由于技术有限,部分内容可能和实际不符合，请见谅
此详解由水月あ无痕制作。
www.discuzsupport.net

模版：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 编辑 ]

搜索更多相关主题的帖子: dst CSS 说明教程缘亦如此

本帖最近评分记录

lu5266 威望 +5 很好，很强大 2007-8-31 13:30
lu5266 金币 +5 很好，很强大 2007-8-31 13:30
℡瘋м豬豬威望 +8 好东西的说.!嘿嘿. 2007-8-21 18:32
℡瘋м豬豬金币 +8 好东西的说.!嘿嘿. 2007-8-21 18:32

[Discuz! Support Team]
——唯一官方认证、推荐的团队
阜阳168网,阜阳综合城市门户

TOP

LAMP教学视频免费下载！

小猪。

头衔 Banned to Post

星级

UID: 717575
帖子: 1136
积分: 1871
威望: 64
金币: 215 个
注册时间: 2007-5-21
最后登录: 2008-9-5

2^# 大中小发表于 2007-8-21 18:24 只看该作者

提示: 作者被禁止或删除内容自动屏蔽

已经辞职。。
手机丢掉了.!!有事情QQ里联系我..或者发送PM消息给我.!
我会给你新的手机号..!!请勿发帖找..

TOP

《PHPer》电子杂志免费下载

缘亦如此

头衔 DST Member

星级 Rank: 6 Rank: 6

UID: 358496
帖子: 846
积分: 1750
威望: 93
金币: 69 个
注册时间: 2006-5-1
最后登录: 2008-9-5

3^# 大中小发表于 2007-8-21 18:25 只看该作者

模版footer.htm相应位置请参照图

1 广告部分CSS
所属CSS class或ID：ad_footerbanner
注意，另外两个层的ID：ad_footerbanner2，ad_footerbanner3在CSS中没有定义，建议沿用本class。
CSS代码：

复制内容到剪贴板

代码:

.ad_footerbanner { text-align: center; clear: both; margin: 5px }

2 广告下部，外框架部分CSS
所属CSS class或ID：footer
CSS代码：

复制内容到剪贴板

代码:

#footer { border-top: 1px solid {BORDERCOLOR}; background: {ALTBG2}; color: {TEXT}; padding: 12px 0; }

3 广告下部，内框架部分CSS(用于左部的文字，当然，也限定了右部的层）
所属CSS class或ID：wrap
CSS代码：

复制内容到剪贴板

代码:

.wrap { width: {MAINTABLEWIDTH}; text-align: left; margin: 0 auto; overflow: hidden; }

4 右部分主框架
所属CSS class或ID：footlinks
CSS代码：

复制内容到剪贴板

代码:

#footlinks { float: right; margin-top: -3px; text-align: right; }

5 TOP按钮及界面风格
所属CSS class或ID：
1 “TOP”按钮：scrolltop
CSS代码：

复制内容到剪贴板

代码:

.scrolltop { cursor: pointer; }

2 “界面风格”按钮：dropmenu（它的ID CSS我没有找到）
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“界面风格”弹出菜单：popupmenu_popup（CLASS）styleswitcher_menu（ID）
CSS代码：

.popupmenu_popup部分：
1

复制内容到剪贴板

代码:

#menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabs li, .postmessage fieldset li, .side li, .formbox li, .notice li { list-style: none; }

复制内容到剪贴板

代码:

.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; }

#styleswitcher_menu部分：
1

复制内容到剪贴板

代码:

#styleswitcher_menu { width: 120px; }

（这里CSS里写重复了一个- -|||）
2

复制内容到剪贴板

代码:

#styleswitcher_menu li.current { font-weight: bold; }

复制内容到剪贴板

代码:

#styleswitcher_menu li.current a { color: {TEXT}; }

复制内容到剪贴板

代码:

#styleswitcher_menu li.current { font-weight: bold; }

6左部图
所属CSS 标记：img

复制内容到剪贴板

代码:

#footer img { float: left; margin: 0 10px 0 0; }

7左部图右边文字
所属CSS class或ID：
1 上方文字部分：copyright
CSS代码：
1

复制内容到剪贴板

代码:

#copyright, #debuginfo { font: {SMFONTSIZE}/1.5em {SMFONT}; }

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

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

复制内容到剪贴板

代码:

#copyright em { color: #FF9D25; }

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

复制内容到剪贴板

代码:

#copyright, #debuginfo { font: {SMFONTSIZE}/1.5em {SMFONT}; }

复制内容到剪贴板

代码:

#debuginfo { color: {LIGHTTEXT}; }

[Discuz! Support Team]
——唯一官方认证、推荐的团队
阜阳168网,阜阳综合城市门户

TOP

《PHPer》电子杂志免费下载

缘亦如此

头衔 DST Member

星级 Rank: 6 Rank: 6

UID: 358496
帖子: 846
积分: 1750
威望: 93
金币: 69 个
注册时间: 2006-5-1
最后登录: 2008-9-5

4^# 大中小发表于 2007-8-21 18:28 只看该作者

汗,疯猪个MJJ的,我都设了权限255你都能来抢沙发!!~~

模版以post开头的部分模版，本部分以发新帖为例子，回复的代码基本相同，只是有些字不同而已
注：附加CSS即没在css.htm中，而在网页书写中以style=""形式出现的CSS属性
相应位置请参照图

1 头部导航文字
所属CSS class或ID：nav
CSS代码：

复制内容到剪贴板

代码:

#nav { margin: 10px 5px; }

#nav a { font-weight: bold; color: {HIGHLIGHTLINK}; }

2 预览帖子部分
1 总框架
所属CSS class或ID：mainbox & viewthread（总量很多，下面再次出现的这两个class就不把代码写出来了）
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 .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 文字class（顶部title请参照总框架中所有h1标记的定义）
1 左部框架
所属CSS class或ID：postauthor
CSS代码：

复制内容到剪贴板

代码:

.mainbox td.postauthor { width: 180px; background: {ALTBG2}; padding: 5px; overflow: hidden; }

3 发新话题总框架
所属CSS class或ID：mainbox & formbox
CSS代码（mainbox部分见上）
formbox部分：

复制内容到剪贴板

代码:

.formbox th { width: 180px; }

.formbox th, .formbox td { padding: 5px; }

.formbox th, .formbox td { border-bottom: 1px solid {BGBORDER}; }

.formbox table a { color: {HIGHLIGHTLINK}; }

.formbox label { cursor: pointer; }

.formbox th ul { padding: 5px 0; margin: 5px 0; }

#menu li, .popupmenu_popup li, #announcement li, .portalbox li, .tabs li, .postmessage fieldset li, .side li, .formbox li, .notice li { list-style: none; }

.forumlist tbody strong, .threadlist tbody strong , .formbox tbody strong  { color: {NOTICETEXT}; }

4 顶部title
1 积分策略说明
所属CSS class或ID：.headactions
CSS代码：

复制内容到剪贴板

代码:

.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); }

.pages_btns { width: 100%; padding: 0 0 8px; overflow: hidden; }

.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; }

2 右部title请参照总框架中所有h1标记的定义

5 标题输入部分
1 标题外框
CSS代码：BORDER-BOTTOM-WIDTH: 0px
2 主题分类外框
CSS代码：BORDER-BOTTOM-WIDTH: 0px
3 标题输入框
所属CSS class或ID：threadtypes
CSS代码：

复制内容到剪贴板

代码:

#threadtypes table td, #threadtypes table th { border-top: 1px solid {BGBORDER}; border-bottom: 0;}

外部附加CSS：

复制内容到剪贴板

代码:

BORDER-TOP-WIDTH: 0px; PADDING-RIGHT: 0px; PADDING-LEFT: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BORDER-RIGHT-WIDTH: 0px

6 内容部分
所属CSS class或ID：posteditor_left
无CSS代码

7 smilies
所属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; }

8 editor编辑按钮部分
1 总框架
所属CSS class或ID：editor
CSS代码：

复制内容到剪贴板

代码:

#editor { border: solid; border-color: {CATBORDER}; border-width: 1px 1px 0; background: {COMMONBOXBG}; }

#editor td { border: none; padding: 2px; }

2 编辑按钮框架
所属CSS class或ID：editortoolbar
CSS代码：

复制内容到剪贴板

代码:

.editortoolbar table { width: auto; }

.editortoolbar a, .editortoolbar .a { display: block; padding: 1px; border: 1px solid {COMMONBOXBG}; cursor: pointer; }

.editortoolbar a.hover, .editortoolbar a:hover, .editortoolbar .a1 { background-color: {ALTBG2}; border: 1px solid {BORDERCOLOR}; text-decoration: none; }

9 内容输入部分
1 总框架
所属CSS class或ID：editor_text
CSS代码：

复制内容到剪贴板

代码:

.editor_text { border: 1px solid; border-color: {CATBORDER} {CATBORDER} {CATBORDER} {CATBORDER}; }

.editor_text textarea { border: none; width: 99%; font: 12px/1.6em "Courier New", Courier, monospace; }

2 输入部分
标记为textarea，请参照上面的标记部分
附加CSS：WIDTH: 99%; HEIGHT: 250px
textarea控制DISCUZ代码模式的背景颜色
所见即所得模式的背景颜色修改可参照以下方法

查找

复制内容到剪贴板

代码:

#wysiwyg { font: {MSGFONTSIZE}/1.6em {FONT} !important; }

将其修改为

复制内容到剪贴板

代码:

#wysiwyg { font: {MSGFONTSIZE}/1.6em {FONT} !important; background:{ALTBG2};}

10 上传附件title（请参考总框架中的TH标记）
1 阅读权限及售价部分
所属CSS class或ID：nums
CSS代码：

复制内容到剪贴板

代码:

td.nums { width: 80px; text-align: center; }

11 发新话题按钮
控制标签：BUTTON
CSS代码：

复制内容到剪贴板

代码:

button { border: 1px solid; border-color: {COMMONBOXBORDER} {LIGHTTEXT} {LIGHTTEXT} {COMMONBOXBORDER}; background: {CATCOLOR}; height: 2em; line-height: 2em; cursor: pointer; }（所有的按钮基本都是这个控制，如首页的快速登陆）

button.submit { margin-right: 1em; border: 1px solid; border-color: #FFFDEE #FDB939 #FDB939 #FFFDEE; background: #FFF8C5; color: {NOTICETEXT}; padding: 0 10px; }（部分提交按钮由这个控制，比如这里的提交按钮，登陆页面的提交等）

[ 本帖最后由缘亦如此于 2007-8-21 18:42 编辑 ]

[Discuz! Support Team]
——唯一官方认证、推荐的团队
阜阳168网,阜阳综合城市门户