nechcm
nechcm
| 引用: | 以下内容是我一一打出来的,不可避免的会有些错误,大家发现后请通知我,我会及时更正nechcm
此帮助文档写给那些刚接触Diy-Page的朋友,以下我将以DiY-Page默认风格为例为大家简单介绍一下Diy-page的风格! |
|
nechcm
一.风格文件的存放位置:nechcm
1.图片:dpimages\style\defaultnechcm
2.模板:dpmain\style\defaultnechcm
nechcm
二.模板文件介绍:nechcm
1.domain\style\index.php : 风格的基本信息,如风格名称,图片所在文件夹名称以及设计者的信息nechcm
nechcm
2.dpmain\style\default\box : 对象所用样式的目录nechcm
index.php : box文件默认的所属页面区域,如header.left.right,此文件一般不需要改动,可以忽略nechcm
longbar.htm  nechcm
nechcm
nechcm
miniframe.htm  nechcm
nechcm
nechcm
null.htm  nechcm
nechcm
nechcm
smallbox.htm  nechcm
nechcm
nechcm
topbar.htm  nechcm
nechcm
nechcm
wideframe.htm  nechcm
nechcm
nechcm
nechcm
3.dpmain\style\default\divfrm :nechcm
index.php :不用考虑nechcm
index.htm :首页的基本框架(制作风格时要修改css的路径)nechcm
index.css :风格的核心,所有的属性都在这里,如首页背景,字体颜色以及box和obj文件的属性等等nechcm
nechcm
4.dpmain\style\default\obj : 对象所在目录nechcm
A.论坛基本模块:nechcm
nechcm
| 引用: | bbscms_announcelist.htm //论坛公告显示nechcm
bbscms_attachgallery.htm //附件图片展示nechcm
bbscms_forumdisplay.htm //论坛帖子列表(内容对象)nechcm
bbscms_forumlink.htm //联盟论坛链接显示nechcm
bbscms_forumlist.htm //论坛列表nechcm
bbscms_memberlist.htm //自定义会员列表nechcm
bbscms_onlinelist.htm //论坛在线列表nechcm
bbscms_posterlist.htm //会员发帖排行nechcm
bbscms_statinfo.htm //论坛统计信息nechcm
bbscms_threadcontent.htm //帖子内容显示(内部对象)nechcm
bbscms_threadlist.htm //主题列表 |
|
nechcm
B.系统基本模块:nechcm
nechcm
| 引用: | common_guidebar.htm //页面导航栏nechcm
common_htmlcode.htm //HTML代码nechcm
common_iframe.htm //iFrame内嵌页面nechcm
common_imagecode.htm //图片(可链接)nechcm
common_linkbar.htm //底部链接栏nechcm
common_swfcode.htm //Flash动画 |
|
nechcm
三.风格属性简单介绍:nechcm
这里只是简单介绍一下css所修饰的模板,对css的学习请找专业教程nechcm
dpmain\style\default\divfrm\index.css :nechcm
nechcm
| 引用: | //整体定义部分nechcm
body,td,th { //主体部分nechcm
font-family: Tahoma, Arial; //主体部分字体 按优先顺序排列nechcm
font-size: 12px; //主体部分字体大小nechcm
color: #38548D; //主体部分字体颜色 nechcm
}nechcm
body { //主体部分扩展nechcm
margin-left: 0px; //模块左侧边距 nechcm
margin-top: 0px; //模块顶部边距nechcm
margin-right: 0px; //模块右侧边距nechcm
margin-bottom: 0px; //模块右侧边距nechcm
background-color: #EDF2FB; //模块背景nechcm
}nechcm
a:link { //主体链接颜色部分nechcm
text-decoration: none; //链接效果nechcm
color: #38548D; //链接颜色nechcm
}nechcm
a:visited { //访问过的链接的颜色部分nechcm
text-decoration: none; //链接效果nechcm
color: #38548D; //链接颜色nechcm
}nechcm
a:hover { //鼠标经过的链接颜色部分nechcm
text-decoration: none; //链接效果nechcm
color: #8AA3BF; //链接颜色nechcm
}nechcm
a:active { //活动连接的颜色部分nechcm
text-decoration: none; //链接效果nechcm
color: #38548D; //链接颜色nechcm
}nechcm
hr { //分隔线的颜色部分nechcm
color: #BCD5F1; //分隔线的颜色nechcm
}nechcm
input,textarea,select { //输入框部分nechcm
padding: 2px; //边距nechcm
border-left: 1px #BCD5F1 solid; //左边框边距与颜色及属性nechcm
border-right: 1px #8AA3BF solid; //右边框边距与颜色及属性nechcm
border-top: 1px #BCD5F1 solid; //上边框边距与颜色及属性nechcm
border-bottom: 1px #8AA3BF solid; //下边框边距与颜色及属性nechcm
color: #38548D; //输入框文字颜色nechcm
background: #FFFFFF; //输入框背景颜色 nechcm
}nechcm
ul { //列表项目部分nechcm
margin: 0; //边界nechcm
padding: 0; //边距nechcm
}nechcm
li { //列表项目扩展nechcm
list-style: none; //列表属性nechcm
}nechcm
nechcm
//框架部分nechcm
#header { //头部属性nechcm
width: 994px; //宽度nechcm
margin-right: auto; nechcm
margin-left: auto; nechcm
padding: 0px;nechcm
background: #FFFFFF;nechcm
}nechcm
#contain { //中间整体部分nechcm
width: 994px;nechcm
margin-right: auto;nechcm
margin-left: auto;nechcm
}nechcm
#mainbg { //中间整体部分扩展nechcm
width: 994px;nechcm
padding: 0px;nechcm
background: #FFFFFF;nechcm
float: left;nechcm
}nechcm
#left{ //左侧部分nechcm
width: 200px;nechcm
float: left; nechcm
margin: 2px 2px 1px 1px; nechcm
padding: 1px; nechcm
background: #FFFFFF;nechcm
}nechcm
#right { //右侧部分 nechcm
width: 780px; nechcm
overflow: hidden;nechcm
float: right; nechcm
margin: 2px 0px 2px 0px;nechcm
padding: 1px; nechcm
background: #FFFFFF;nechcm
}nechcm
#footer{ //底部部分nechcm
width: 994px;nechcm
clear: both;nechcm
margin-right: auto;nechcm
margin-left: auto; nechcm
padding: 0px;nechcm
background: #FFFFFF;nechcm
}nechcm
nechcm
nechcm
//box部分(属性名称和box里的模板基本一致)nechcm
nechcm
//null.htm部分nechcm
.NullDIV {nechcm
margin: 0;nechcm
padding: 0;nechcm
}nechcm
nechcm
//longbar.htm部分nechcm
.LongBarTable {nechcm
border: 0;nechcm
}nechcm
.LongBarTitleTD {nechcm
border-right: 1px solid #DCDDE2;nechcm
background-image: url("../../../../dpimages/style/default/longbar_bg_left.gif");nechcm
letter-spacing: 0.2em;nechcm
color: #000000;nechcm
}nechcm
.LongBarMainTD {nechcm
background-image: url("../../../../dpimages/style/default/longbar_bg.gif");nechcm
padding-left: 12px;nechcm
}nechcm
nechcm
//miniframe.htm部分nechcm
.MiniFrameTitleTable {nechcm
border: #BCD5F1 1px solid;nechcm
background-image: url("../../../../dpimages/style/default/bg1.gif");nechcm
margin: 5px 0 5px 0;nechcm
}nechcm
.MiniFrameTitlePreTD {nechcm
background-image: url("../../../../dpimages/style/default/plus.gif");nechcm
background-repeat: no-repeat;nechcm
background-position: 50% 50%;nechcm
}nechcm
.MiniFrameTitleTD {nechcm
background-image: url("../../../../dpimages/style/default/bg1.gif");nechcm
font-weight: bold;nechcm
letter-spacing: 0.2em;nechcm
color: #38548D;nechcm
}nechcm
.MiniFrameMainTable {nechcm
border: #BCD5F1 1px dashed;nechcm
background-color: #F2FFFF;nechcm
}nechcm
nechcm
//smallbox.htm部分nechcm
.SmallBoxTable {nechcm
border: 1px solid #76D9D8;nechcm
margin: 5px 0 5px 0;nechcm
}nechcm
.SmallBoxTitleTD {nechcm
background-image: url("../../../../dpimages/style/default/smallboxbg.gif");nechcm
color: #38548D;nechcm
}nechcm
.SmallBoxMainTD {nechcm
padding: 5px;nechcm
}nechcm
nechcm
//topbar.htm部分nechcm
.TopBarTable {nechcm
border: #BCD5F1 1px solid;nechcm
background-image: url("../../../../dpimages/style/default/bg1.gif");nechcm
margin: 5px 0 5px 0;nechcm
}nechcm
.TopBarPreTD {nechcm
background-image: url("../../../../dpimages/style/default/plus.gif");nechcm
background-repeat: no-repeat;nechcm
background-position: 50% 50%;nechcm
}nechcm
.TopBarTitleTD {nechcm
font-weight: bold;nechcm
letter-spacing: 0.2em;nechcm
color: #38548D;nechcm
}nechcm
.TopBarMainTD {nechcm
padding: 0;nechcm
}nechcm
nechcm
//wideframe.htm部分nechcm
.WideFrameTitleTable {nechcm
border: #BCD5F1 1px solid;nechcm
background-image: url("../../../../dpimages/style/default/bg1.gif");nechcm
margin: 5px 0 5px 0;nechcm
}nechcm
.WideFrameTitlePreTD {nechcm
background-image: url("../../../../dpimages/style/default/plus.gif");nechcm
background-repeat: no-repeat;nechcm
background-position: 50% 50%;nechcm
}nechcm
.WideFrameTitleTD1 {nechcm
font-weight: bold;nechcm
letter-spacing: 0.2em;nechcm
color: #38548D;nechcm
}nechcm
.WideFrameTitleMidTD {nechcm
background-image: url("../../../../dpimages/style/default/gtgt.gif");nechcm
background-repeat: no-repeat;nechcm
background-position: 50% 50%;nechcm
}nechcm
.WideFrameTitleTD2 {nechcm
font-size: 9px;nechcm
text-transform: uppercase;nechcm
color: #38548D;nechcm
}nechcm
.WideFrameMainTable {nechcm
border: #BCD5F1 1px dashed;nechcm
background-color: #F2FFFF;nechcm
}nechcm
nechcm
nechcm
//obj部分nechcm
nechcm
//bbscms_forumdisplay.htm和bbscms_threadcontent.htm的属性nechcm
.FullLightBorder { nechcm
border: 1px solid #CCCCCC;nechcm
}nechcm
.BoldLighted {nechcm
font-weight: bold;nechcm
color: #38548D;nechcm
}nechcm
.Lighted {nechcm
color: #38548D;nechcm
}nechcm
.DarkBg {nechcm
background-color: #DFEAF6;nechcm
}nechcm
.LessDarkBg {nechcm
background-color: #F2FFFF;nechcm
}nechcm
nechcm
//common_linkbar.htm的属性nechcm
.LinkBar { nechcm
width: 994px;nechcm
height: 38px;nechcm
background-image: url("../../../../dpimages/style/default/linkbar_bg.gif");nechcm
text-align: center;nechcm
padding-top: 10px;nechcm
}nechcm
.LinkBarTitle {nechcm
font-weight: bold;nechcm
color: #000000;nechcm
}nechcm
.LinkBarText {nechcm
color: #000000;nechcm
}nechcm
nechcm
//common_guidebar.htm属性nechcm
#topnav {nechcm
background: url("../../../../dpimages/style/default/topnav_bg.gif");nechcm
overflow: hidden;nechcm
height: 36px;nechcm
font-size: 14px;nechcm
padding-top: 3px;nechcm
}nechcm
#topnav ul {nechcm
width: 1000px !important;nechcm
width: 980px;nechcm
line-height: 33px;nechcm
margin-left: 5px;nechcm
margin-right: auto;nechcm
}nechcm
#topnav li {nechcm
float: left;nechcm
width: 97px;nechcm
color: #000000;nechcm
font-weight: bold;nechcm
text-align: center;nechcm
}nechcm
#topnav li a,#topnav li a:visited {nechcm
color: #000000;nechcm
text-decoration: none;nechcm
font-weight: bold;nechcm
display: block;nechcm
width: 97px;nechcm
height: 33px;nechcm
margin-left: auto;nechcm
margin-right: auto;nechcm
}nechcm
#topnav li a:hover {nechcm
background: url("../../../../dpimages/style/default/topnav_bg_hover.gif") no-repeat 2px 0px;nechcm
}nechcm
#topnav li.activate {nechcm
width: 100px;nechcm
background: url("../../../../dpimages/style/default/topnav_bg_activate.gif") no-repeat 2px 0px;nechcm
text-align: center;nechcm
}nechcm
#topnav li.activate a:hover{nechcm
background: none;nechcm
text-align: center;nechcm
}nechcm
nechcm
//引用.代码所用table的属性nechcm
.BoxBorder {nechcm
background-color: #DDDDDD;nechcm
}nechcm
.BoxBackground {nechcm
background-color: #F7F7F7;nechcm
} |
|
nechcm
|
