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