做风格难吗?
很简单 只要你用心看下去 很快你就能做出属于自己的个性风格
我们来做个小游戏:
选择你需要修改的模板 找到 当前模板主模块(Main_Style)-----基本设置
把98% 改成768px (px的意思是像素 一定要写上去)
然后保存 再去论坛首页刷新一下
怎么样 你的第一个自己的风格就做成了 变成了窄的风格了
是不是很有意思?
想做到更多吗
打开后台风格CSS 找到 你要修改的CSS 打开
找到 body {font-size : 12px; color : #222; font-family : tahoma, 宋体, fantasy; text-align : center; margin : 0; background-image : none;}
在最后加上一句:background-color:#000000;
再刷新首页看看 是不是变了 呵呵 很有意思吧
一步一步看下去 你会做到更多 获得更多自己动手的快乐
让我们一起来 做个性的风格 做自己的风格 自己动手做快乐的风格!
第一天: 读懂CSS里的每个样式的意思
8.0的风格基本做到了样式与模板代码分离
就是很多效果你只要改CSS就能修改到论坛里很多地方的显示效果
写下了8.0风格CSS的一些基本的样式解析 希望可以帮助大家很快找到自己想要做修改的地方的样式
DV8.0风格CSS解析
================================================================================================
/* 默认风格 Dvbbs 8.0.0*/
* {word-wrap : break-word ;word-break : break-all ;}
/*word-wrap是控制换行的。
使用break-word时，是将强制换行。中文没有任何问题，英文语句也没问题。但是对于长串的英文，就不起作用。
break-word是控制是否断词的。
normal是默认情况，英文单词不被拆开。
break-all，是断开单词。在单词到边界时，下个字母自动到下一行。主要解决了长串英文的问题。
keep-all，是指Chinese, Japanese, and Korean不断词。即只用此时，不用word-wrap，中文就不会换行了。（英文语句正常。）
ie下：
使用word-wrap:break-word;所有的都正常。
ff下：
如这2个都不用的话，中文不会出任何问题。英文语句也不会出问题。但是，长串英文会出问题。
为了解决长串英文，一般用word-wrap:break-word;word-break:break-all;。但是，此方式会导致，普通的英文语句中的单词会被断开（ie下也是）。
目前主要的问题存在于 长串英文 和 英文单词被断开。其实长串英文就是一个比较长的单词而已。
即英文单词应不应该被断开那？那问题很明显了，显然不应该被断开了。
对于长串英文，就是恶意的东西，自然不用去管了。但是，也要想些办法，不让它把容器撑大。
用：overflow:auto; ie下，长串会自动折行。ff下，长串会被遮盖。
所以，综上，最好的方式是word-wrap:break-word;overflow:hidden;而不是word-wrap:break-word;word-break:break-all;。
word-wrap:break-word;overflow:auto;在ie下没有任何问题。在ff下，长串会被遮住部分内容。
*/
a {text-decoration : none;color : #222; }
/*论坛文字链接的颜色
Decoration属性
none：无效果
underline：下划线效果
*/
a:hover {text-decoration : underline; color : #147DCE; }
/*鼠标悬停在链接上时所产生的效果 */
body {font-size : 12px; color : #222; font-family : tahoma, 宋体, fantasy; text-align : center; margin : 0; background-image : none;}
/*
font-size : 12px; color : #222; font-family : tahoma, 宋体, fantasy;
论坛无链接文字的大小，颜色，字体设置
text-align : center;
文字对齐中间
margin : 0;
边距为０
background-image : none;
没有背景图
*/
td {font-family : tahoma, 宋体, fantasy; font-size : 12px;line-height : normal;}
/* 表内横向格（行）的样式 */
th {background-image : url("{$PicUrl}css/default/bg1.gif"); background-color : #6E98C5; color : white; font-size : 12px; font-weight : bold; line-height: normal; }
/* 表内纵向格（比如一级版块栏目那里的一条，友情论坛最上面那一条等）
background-image：背景图片
background-color：背景颜色
Color：默认为文字颜色
font-size：字体大小
font-weight：字形，一般有4种属性：normal（默认）、bold（加粗）、bolder（特粗）、lighter（特细）
*/
th a ,.menudiv1 a{color : #fff; text-decoration : none; }
/*表内横向格（行）和menudiv1 样式里的有链接的文字的样式
menudiv1
菜单导航栏文字运用的样式 如：重登录 隐身 等 */
th a:hover,.menudiv1 a:hover {color : #fff;text-decoration : underline;}
/* 横向格（行）和menudiv1 样式里的鼠标悬停在链接上时所产生的文字的效果 */
/*帖子分页部分*/
.tabletitle1 {background-color : #EDF5F9; border:1px solid #B4C6DA; }
/*分页中 Xhtml无图版 Xslt RSS 2.0 这几个文字运用背景框的样式 */
.page {background-color : #EDF5F9; line-height : normal;border:1px solid #B4C6DA; padding:0px 2px;}
/*暂时没发现用在哪里 */
.page2 {background-color : #68A6DD; line-height : normal;border:1px solid #B4C6DA; padding-right:6px; color:#fff;}
/*暂时没发现用在哪里 */
.page_line {border-right:1px solid #B4C6DA; float:left}
/*暂时没发现用在哪里 */
/*表单部分*/
form{margin:0px;}
/*表单的边距为０ */
input , select , textarea , option {vertical-align:middle;font-family : tahoma, verdana, 宋体, fantasy; font-size:12px; color : #000000;}
/*输入框、选择框、文本框、选择按钮的属性：
文字的颜色 字体 大小
vertical-align 垂直对齐属性
*/
input { border:1px solid #98BBD7; background:#EFF6FB;}
/*输入框的样式
border:1px solid #98BBD7;
框的边为１个像素的颜色为#98BBD7 样式为solid（实边单线）
background:#EFF6FB;
背景颜色
*/
.box_select { z-index:-1; position:absolute; top: 0; left: 0; width:100%; height:100%; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0;}
/*
z-index:-1;position:absolute; top: 0; left: 0;
检索或设置对象的层叠顺序。
较大 number 值的对象会覆盖在较小 number 值的对象之上。如两个绝对定位对象的此属性具有同样的 number 值，那么将依据它们在HTML文档中声明的顺序层叠。对于未指定此属性的绝对定位对象，此属性的 number 值为正数的对象会在其之上，而 number 值为负数的对象在其之下。设置参数为 null 可以移除此属性。
此属性仅仅作用于 position 属性值为 relative 或 absolute 的对象。
这个属性不会作用于窗口控件，如 select 对象。
在IE5.5+中， iframe 对象开始支持此属性。而在之前的浏览器版本中， iframe 对象是窗口控件，会忽略此属性。此属性对于 currentStyle 对象而言是只读的。对于其他对象而言是可读写的。
对应的脚本特性为 zIndex
filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0;
透明，不显示，透明度0
css 虑镜（仅IE有效）
*/
div.forminfo{float:left;}
/* float:left;
左浮动
*/
.chkbox, .radio {border: 0px;background: none;vertical-align: middle; }
.button {border:1px solid #98BBD7; background:#EFF6FB; height:20px; color:#000000}
textarea.con{width:96%;}
.normaltextSmall {font-size : 11px; color : #000000;font-family : verdana, Arial, Helvetica, sans-serif, fantasy;}
/*表格部分*/
.tabletitle2 {background-color : #EDF5F9; }
.tablebody1 {background-color : #fff; line-height : normal; }
/*运用在很多地方 比如文字广告 最新创建圈子等 一般用在td的属性上*/
.tablebody2 {background-color : #EDF5F9; line-height : normal;}
.tablebody3 {background-color : #6E98C5; }
.tableborder1 {width : 98%; border:1px none inherit; background-color : #6E98C5;}
/*许多大的外框的属性 比如文字广告 最新创建圈子等的外框 一般用在table的属性上*/
.tableborder2 {width : 98%; border : 1px solid #dedede; background-color : #efefef; margin:0 auto;}
/*分页里 当前位置导航 和 我的收件箱 (0) 切换用户身份 那一条信息的外框样式 用在table的属性上*/
.tableborder3 {width : 98%; border-left : 1px solid #6E98C5; border-right : 1px solid #6E98C5; border-top : 0px none inherit;border-bottom : 0 solid #6E98C5; background-color : #efefef; }
.tableborder4 {width : 98%; border : 1px solid #6E98C5;}
.tableborder5 {border : 0px;background-color : none;}
.tableborder6 {width : 98%; border : 0 none inherit;background-color : #fff;}
/* tableborder(3-6)
基本都是运用到外框的样式*/
.singleborder {font-size : 0px;line-height : 1px;padding : 0px;background-color : #6E98C5;}
/* 显示效果为一条颜色为#6E98C5 的细线*/
#tabletitleLink a {color : #fff; text-decoration : none;}
#tabletitleLink a:hover {color:#fff;text-decoration : underline;}
#nobold {font-weight : normal;}
.menuskin {border : 1px solid #3579C5; visibility : hidden; font-size : 12px;position : absolute;background-color : #EFF6FB; /*background-image : url("Default/dvmenubg3.gif"); background-repeat : repeat-y;*/ filter:alpha(opacity=80); -moz-opacity: 0.8;}
/* 下拉菜单属性，Border是边框属性，background-color是背景颜色属性，background-image是背景图片
filter:alpha(opacity=80); -moz-opacity: 0.8;
透明度为８０％
*/
.menuskin a {padding-right : 10px;padding-left : 10px; color : black;text-decoration : none; position:relative; filter:alpha(opacity=100);}
/*这里是当鼠标鼠标移动到下拉菜单上所产生的效果，padding-right是文字右边距，padding-left 为左边距，大家可以根据自己的需要来调整*/
.menuitems {margin : 2px; padding : 1px; text-align : left; line-height : 14pt; }
/*下拉菜单的基本属性*/
.brightClass {background-color : #d7d7d7; }
.redfont {color : red;}
/*首页论坛在线情况那里在线图例等红色字的颜色*/
.bluefont {color : #6E98C5;}
/*首页论坛在线情况那里的蓝色小方块的颜色*/
.imgonclick {cursor : pointer;border:0px}
/*首页论坛在线情况那里的蓝色小方块的颜色*/
.menu_popup {display : none; }
/* display属性基本上分为inline,block,和none。
inline就像它的本意——显示为inline的元素为行。strong,anchor锚和em强调元素默认是行。
block元素前后换行。标题和段落元素是块元素。
none，意思不显示元素，在可用性上可以实现漂亮的效果，交替样式或hover效果的高级运用。*/
.itableborder {margin:0 auto;width : 98%; padding:0px; line-height :20px; text-align:left;height:20px;}
/*用在了很多地方，比如公告 论坛信息 有新帖 无新帖的那几个地方等*/
hr {height:0px;border :0px;border-top: #6E98C5 1px solid;width : 100%; }
/*分隔线的样式 */
div.quote {margin : 5px 20px; border : 1px solid #cccccc; padding : 5px;background : #f3f3f3; line-height : normal;}
/*引用文字框的样式 */
div.htmlcode {margin : 5px 20px; border : 1px solid #cccccc;padding : 5px;background : #fdfddf;font-size : 14px;
font-family : tahoma, 宋体, fantasy;font-style : oblique;line-height : normal;}
div.info {border:1px dotted #95B0CD; padding : 5px;line-height : normal; background :#EFF7FF;}
div.info ul.info { margin:0px; padding:0px; list-style-type:none; padding-left:0px; }
div.info ul.info li{background-color : #D7EBF7;margin:2px;padding:2px;}
/*info样式运用在帖子内容页的评论那个框*/
font.showtools {color : white; background-color : #b88ffc; }
.magicframe {border : 1px solid #cccccc; left:0px;}
.pageinput {border : 1px solid #d6e0ef; background-color : #fafafa; height : 18px;
font-family : Arial, 宋体, fantasy; font-size : 11.5px; }
.copyright {color : #cccccc; line-height : 130%; }
/*看起来应该是版权那里的样式 不过版权那里好象没用上去 */
#tdleft {float:left; width:100%; text-align:left; }
/*用户信息框 */
#tdleft div { width:auto; float:left;}
#list_mainbar {border-bottom: 1px solid #6E98C5;}
#top_mainbar{height:auto;text-align :left;border-bottom : 1px solid #6E98C5; }
/*也在用户信息框那里 */
.mainbar{border-left : 1px solid #6E98C5; border-right : 1px solid #6E98C5;line-height:22px;background-color : #fff;}
.mainbar0{line-height:22px;background-color : #fff;}
.mainbar1{border: 1px solid #6E98C5; line-height:25px;background-color : #EDF5F9;height:25px;}
.mainbar2{border-left : 1px solid #6E98C5;border-right : 1px solid #6E98C5;border-bottom : 1px solid #A6BBD0; line-height:22px;background-color : #fff;}
.mainbar3{border-left : 1px solid #6E98C5; border-right : 1px solid #6E98C5;border-bottom : 1px solid #6E98C5; background-color : #fff;}
.mainbar4{border-left : 1px solid #6E98C5; border-right : 1px solid #6E98C5;border-top : 1px solid #6E98C5; background-color : #fff;height:25px;line-height:25px;}
/*mainbar（０－４） 都是论坛里相关的一些ＤＩＶ外框的样式*/
/*总宽度设置*/
.main,.mainbar,.mainbar0,.mainbar1,.mainbar2,.mainbar3,.mainbar4,.bar1,div.th,.list,.postlary1,.postlary2,.postbottom1,.postbottom2{width :{$width};min-width :760px;margin : 0 auto;}
/* min-width :760px 最小宽度*/
.mainbarhover{background-color:#F4F9FC;}
/*鼠标划过版块背景时的变化*/
.index_left_states{border-right : 1px dotted #A6BBD0;width :46px;float:left;height:60px; margin-right:4px;}
/*改变论坛状态图标右边的那条线的样式*/
.index_right{float:right;width :220px;text-align : left; line-height:25px;}
/*论坛列表右边关于 主题发贴斑竹 等那一块的样式*/
.index_right div { height:16px; line-height:16px;}
.index_left_states img{margin-top:18px;}
/*论坛首页版块状态图片的定位 */
.boardlogo{float:right;margin-top:4px;margin-right:5px;border:0px;}
/*版块图片的样式*/
#t_top{background-color:#4D93E0; height:4px;font-size : 0px;}
#t_bottom{height:4px;line-height:4px;font-size : 0px;background-color:#CDE1F1;}
/*论坛顶部样式*/
#t_menu{background-image : url("{$PicUrl}css/default/bg2.gif"); height:23px;line-height:23px;text-align : left;color:#fff;padding-left:8px;padding-top:4px;}
/*menu 导航样式*/
.bar1{border-left : 1px solid #6E98C5; border-right : 1px solid #6E98C5;border-top : 1px solid #6E98C5;border-bottom : 1px solid #6E98C5; line-height:25px;background-color : #fff;}
#topbar_top{background-image : url("{$PicUrl}css/default/topbg.gif"); height:9px;line-height:9px;font-size : 0px;color : #6E98C5;}
#topbar_mid{height:70px;text-align : left;background-color : #fff;}
#topbar_bottom{background-image : url("{$PicUrl}css/default/bottombg.gif");height:9px;line-height:9px;font-size : 0px;color : #6E98C5;}
#topbar_menu{background-image : url("{$PicUrl}css/default/tabs_m_tile.gif"); height:22px;line-height:22px;text-align : left;}
#topbar_mid_l{width:25%;float:left;margin-left:1px;margin-top:5px;margin-left:5px;min-width:180px;}
#topbar_mid_m{width:60%;float:left;margin-top:5px;min-width:468px;}
#topbar_mid_r{float:right;margin-top:5px;min-width:90px;line-height:15pt;text-align :right;margin-right:5px;}
.menudiv1{float:left;margin-left:2px;height:20px;line-height:20px;text-indent:1px;}
/*menu 导航 重登录 隐身 等等的样式
text-indent:1px;
首行文字缩进*/
div.th{border: 1px solid #6E98C5;border-bottom : 0px; background-image : url("{$PicUrl}css/default/bg1.gif");
background-color : #6E98C5; color : white;font-size : 12px;font-weight : bold;height : 26px;line-height : 26px; text-align : left;}
div.th div{height : 26px;line-height : 26px;text-align : center;}
div.th a {color : #fff;text-decoration : none; }
div.th a:hover {color : #fff;text-decoration : underline; }
div.th img{border:0px;margin-top:9px;margin-left:5px;}
/*th横向条框的样式，很多的地方用到，栏目标题条 友情链接 在线情况等等的 论坛里比较特殊的那一条的属性设置*/
.bottomline{height :24px;line-height :24px;border-bottom : 1px solid #6E98C5;float:left;}
#rules{border-bottom : 1px solid #6E98C5;text-align : left; line-height : 15px; }
/*版规下面那条线的颜色*/
#rulesbody{text-indent:24px;padding:10px;}
.list1{float:left;width:33px;border-right : 1px solid #6E98C5;}
/* 帖子列表th样式背景作者左边的那条线的颜色 */
.list_r{float:right;width:400px;border-left : 1px solid #6E98C5; }
/* */
.list{border-left : 1px solid #6E98C5;/* 帖子列表左边的那条线的颜色 */ border-right : 1px solid #6E98C5;/* 帖子列表右边的那条线的颜色 */border-bottom : 1px solid #6E98C5;/* 帖子列表底下的那条线的颜色 */ background-color : #fff;height:30px;line-height:26px;text-align : left;overflow :hidden;}
/* ;overflow :hidden
检索或设置当对象的内容超过其指定高度及宽度时如何管理内容
超出部分会自动隐藏,这样做不好的地方是就是这部分的信息显示不完全,比如图片只显示了一部分. 但是页面布局不会乱.可以防止表格撑破.*/
.list div{height:30px;}
.list_s{float:left;text-align : center;width:33px;border-right : 1px solid #6E98C5;background-color :#EDF5F9; }
/* */
.list_s img{margin-top:6px;}
/*列表页状态图片的定位*/
.list_a{float:left;text-align : center;width:80px;border-right : 1px solid #6E98C5;background-color : #EDF5F9; overflow :hidden;}
.list_c{float:left;text-align : center;width:50px;border-right : 1px solid #6E98C5;background-color : #fff; overflow :hidden;}
.list_t{float:left;text-align : center;width:120px;margin-left:5px;overflow :hidden;}
.list_r1{float:right;width:400px;border-left : 1px solid #6E98C5;background-color : #EDF5F9;}
.list_img{float:left;text-align : center;}
.list_img img{margin-left:2px;margin-top:8px;margin-right:8px;border:0px;}
/*列表页标题旁边那个＋号－号的图片的定位*/
/*当首页分版块有三级分类时版块名称位置微调*/
.board_style { padding-top:0px;}
.board_style img { padding-top:4px;}
/*帖子正文顶部用户信息部分*/
.user_menu_info { border-bottom:1px solid #B7D3EA; height:24px; color:#AEBEDA; margin-bottom:5px; }
.user_menu_info a { color:#004F97; }
/*专题部分*/
.dissertation { background:#D9F2FE url("{$PicUrl}dissertation_bg.gif"); border-top:1px solid #B3CEDB; }
.dissertation_left { background:#D9F2FE url("{$PicUrl}dissertation_bg2.gif"); float:left; padding:0px 3px;border-right:1px solid #B3CEDB; }
.dissertation_line { border-right:1px solid #B3CEDB; float:left; padding:0px 3px;}
/*控制正文字体大小和简繁转换样式*/
.text_style {float:right;padding:2px 6px 0px 0px; height:18px;}
.text_style a { border:1px solid #B7D3EA; padding:1px 2px; background:#F3FAFF;}
.text_style a:hover { border:1px solid #3376AC; padding:1px 2px; background:#4387BD; color:#fff;}
/*发表按钮样式*/
.posttopic{background-image : url("{$PicUrl}postnew.gif");}
/*发表新贴的图标样式*/
.postvote{float:left;background-image : url("{$PicUrl}votenew.gif");}
/*发新投票的图标样式*/
.postpaper{background-image : url("{$PicUrl}xzb.gif");}
/*发小字报的图标样式*/
.repost{background-image : url("{$PicUrl}mreply.gif");}
/*回复此帖的图标样式*/
.postalipay{background-image : url("{$PicUrl}tenpay.gif");}
/*发起交易的图标样式*/
.posttopic,.postvote,.postpaper,.repost,.postalipay{width:85px;height:26px;float:left;margin : 2px;cursor:pointer;}
#boardmaster{margin-top:2px;text-align : left;}
#boardmaster a{margin-right:2px;}
#masterpic{float:left;width:20px;height:20px;margin-top:3px;background-image : url("{$PicUrl}team2.gif"); }
/*分页版主图标的样式*/
#boardmanage{float:right;margin-right:2px;}
#subject{text-align :left;}
#subject img{margin-top:5px;}
.listexpression{margin-left:2px;margin-top:2px;margin-right:8px;float:left;}
.filetype{margin-top:5px;margin-right:8px;float:left;}
.listtitle{float:left;}
.listtitle div{float:left;}
/*列表标题*/
.listtitle img{margin-top:5px;margin-right:8px;float:left;}
/*列表标题里图片的定位*/
.postlary1{border: 1px solid #6E98C5;background-color:#fff;text-align : left;}
/* 帖子内容外框表格线的颜色 样式一 贴子内容背景颜色一*/
.postlary2{border: 1px solid #6E98C5;background-color:#EDF5F9;text-align : left; }
/* 帖子内容外框表格线的颜色 样式二 贴子内容背景颜色二*/
.postuserinfo{float:left;width:190px;text-indent:24px;}
.post{border-left: 1px solid #6E98C5;margin-left : 190px;min-height:300px;padding:10px;}
/* 帖子内容块的样式
min-height:300px;
最小高度*/
.postie{border-left: 1px solid #6E98C5;margin-left:190px;height:300px;padding:10px;}
/*帖子管理那一块的块级样式*/
.postie a { color:#004F97; }
.postbottom1{background-color:#fff;height:28px;line-height:28px;border-left: 1px solid #6E98C5;border-right: 1px solid #6E98C5;text-align : left; }
/*含有ＩＰ查看的那一条的块级样式一*/
.postbottom2{height:28px;line-height:28px;background-color : #EDF5F9;border-left: 1px solid #6E98C5;border-right: 1px solid #6E98C5;text-align : left; }
/*含有ＩＰ查看的那一条的块级样式二*/
#postend{border-bottom : 1px solid #6E98C5;}
/*也是含有ＩＰ查看的那块的样式*/
.lockuser{height:30px;line-height:30px;width:150px;border: 1px solid #6E98C5;border-top:3px double #6E98C5;text-align : center;color:#00008B;margin :0px;background-color : #EDF5F9; }
.vote{float:left;border-left: 1px solid #6E98C5;height:28px;}
.li1{border-left : 1px solid #6E98C5;
line-height : 28px;height : 28px;}
.li2{border-left : 1px solid #6E98C5; line-height : 28px;height : 28px;background-color : #EDF5F9;}
/*帖子内容广告CSS定义*/
div.body_adv_top{border-bottom:1px dotted #95B0CD; padding : 4px;line-height : normal; font-size:12px;}
div.body_adv_bottom{border-top:1px dotted #95B0CD; padding : 4px;line-height : normal; font-size:12px;}
div.body_adv_top,div.body_adv_bottom{width:95%;margin:0 auto;}
div.body_adv_left{float:left;}
div.body_adv_right{float:right; font-size:12px;}
/*屏蔽层样式定义*/
#Shade {position:absolute;left: 0;top: 0;width: 100%;filter:alpha(opacity=50);-moz-opacity:.5;opacity:.5;display: none;background-color: #000;z-index: 96;}
#AutoPostPrompt{font-size:12px;line-height:18px;padding:5px 5px 5px 32px;background:#F8FDFF url("{$PicUrl}index_box_bg.gif") repeat-x top left;border:2px solid #005985;text-align:left;z-index: 2008;display: none;position: absolute;}
.iframe_style { z-index:99; position:absolute; top: 0; left: 0; width:100%; height:100%; background-color:#fff; border:none; filter:alpha(opacity=0); -moz-opacity: 0; opacity: 0;}
#iframe_table { z-index: 108; position: absolute;width:100%;height:100%;}
/*帖子讨论样式定义*/
#topicpk{text-align:left;}
#topicpk div {padding-left:20px;padding-top:5px;}
#topicpk t1{ }
#topicpk t2{ }
#topicpk t3{ }
#topicpk #pk_title{color:#3399FF;font-size:18px;line-height : 20px;height : 20px;}
#topicpk #pk_title a{color:#3399FF;}
#topicpk #pk_user{ }
#topicpk #pk_intro{ word-break :break-all; display:block;overflow:hidden }
#topicpk_middle{ text-align:center;}
#topicpk_center{width:98%;padding:0;line-height:normal;text-align:center; margin:0 auto; }
.vsbg{ background:url("{$PicUrl}vsbg.gif") no-repeat; background-position:50% 0%;}
#topicpk_center #pk_0{ }
#topicpk_center #pk_1{float:left;width:49%; }
#topicpk_center #pk_0 dl,#topicpk_center #pk_1 dl,#topicpk_center #pk_2 dl{height:30px;line-height:30px; padding:0px;margin:0 0 5px 0;}
#pk_0 dl p, #pk_1 dl p, #pk_2 dl p { font-size:14px; font-weight:bold; color:#fff; padding: 0 10px; margin:0px;}
#topicpk_center #pk_0 dl{background:#90C304;}
#topicpk_center #pk_1 dl{background:#62A2DB;}
#topicpk_center #pk_2{ float:right;width:49%; }
#topicpk_center #pk_2 dl{background:#D8D8D8;}
#topicpk_center #pk_vs{float:left;width:100px; height:5px; margin:0px; padding:0px;}
#pkinfo{width:100%;border:1px solid; margin:0px; margin-bottom:5px;}
#pkinfo dt{text-align:left;font-size:12px;padding:0px; line-height:24px;}
#pkinfo div{background:#fff;margin:0px; line-height:24px;}
#pkinfo .line{border-bottom:1px dotted #ccc; line-height:24px; width:100%; float:left; background:#fff;}
#pkinfo .con{text-indent:24px; line-height:24px;}
#pkinfo .con p{margin:0px;}
#pkinfo .bottom{color:gray; height:24px; line-height:24px; float:left; width:100%; }
#topicpk_center #pk_0 #pkinfo{border-color:#9FC163;}
#topicpk_center #pk_0 #pkinfo dt{background:#D8E8BD;}
#topicpk_center #pk_1 #pkinfo{border-color:#A6C7DA;}
#topicpk_center #pk_1 #pkinfo dt{background:#D7EBF7;}
#topicpk_center #pk_2 #pkinfo{border-color:#DEDEDE;}
#topicpk_center #pk_2 #pkinfo dt{background:#DEDEDE;}
.b {width:98%; display:block; text-align:left;}
/*这一块的好象没什么说的了 呵呵 这次的写代码的朋友已经写清楚了这一块是做什么用的
大家可以改改颜色的值什么的 看看是哪一部分改变了 就知道是哪的样式了*/
=====================================================================================
好好对照着看下 建一个风格修改专用论坛 然后随便改里面的值 不要怕做坏 做坏了 大不了复制原始数据再来
相信你已经能做出一个简单修改的漂亮论坛
=========================================
小提示:把上面的CSS代码复制下来
放到编辑软件里去看
注释部分就会和代码部分 分开颜色显示 看起来会很清晰
第二天:修改一个自己喜欢的论坛头部和尾部
会修改CSS 就改变了论坛的颜色等
但是很想拥有自己个性的头部和尾部 怎么做呢?
别急 跟我来
我们先来找到修改的地方
后台----风格模板管理---选择你要修改的模板( 请选择相关模板：旁边的下拉菜单里进行选择)----点旁边的按钮 编辑
---------
找到下方第二排的
当前模板主模块(Main_Style)----界面风格(点击链接打开)-----
Dvbbs.mainhtml(4)
这里就是修改整个论坛头部的地方
在旁边的文字输入框里的代码就是关于头部的代码
你可以在里面任意修改内容 当然这需要有一定的HTML基础
关于HTML的网页学习 朋友们可以在网上多找一些电子书和相关教程看看 其实也很简单
如果修改出错了也不要紧
在最左边有个 获取官方数据 的链接 在这里你可以打开或者下载到与右边模板对应的官方原始模板
覆盖 就能还原了
点右边的 演示 能直接看到左边框内代码的页面演示效果
点演示下面的 帮助 按纽还能看到一些关于左边模板部分里的一些内部变量描述
比如 关于头部的有:
顶部表格部分
内部变量描述：
{$width}：表格宽度变量；（主模块(Main_Style)基本设置） {$link}：论坛地址变量；（后台常规管理论坛基本设置） {$logo}：论坛首页LOGO变量；（后台常规管理论坛基本设置） {$top_ads}：顶部横幅广告变量；（后台常规管理论坛基本设置） {$title}：收藏标题变量； {$mailto}：论坛联系邮件地址变量；（后台常规管理论坛基本设置） 102：论坛版块ID页面变量；（动态变量，反映版块ID） {$menu}：导航菜单变量；（变量反映本模板：Dvbbs.mainhtml(6)，Dvbbs.mainhtml(7)中的信息）
Dvbbs.mainhtml(8)
这里就是关于论坛风格尾部代码的地方了
修改方法和头部一样 在这里 你可以任意地按照自己的需要改成自己想要的页面结束部分的效果
下面给出主模块(Main_Style)界面风格的一些对应解释:
（1）当前模板主模块(Main_Style)界面风格
Dvbbs.mainhtml(0)
获取官方数据 | 此字段就是基本设置
|
Dvbbs.mainhtml(1)
获取官方数据 | 页面头部信息，就是获取页面的关键字，站点描述等。
|
Dvbbs.mainhtml(2)
获取官方数据 | 论坛页面开始代码，在<body>里可以设置论坛的背景，整个页面的边距等。 |
Dvbbs.mainhtml(3)
获取官方数据 | 顶部短信广告部分 |
Dvbbs.mainhtml(4)
获取官方数据 | 顶部表格，一般导航菜单栏以上（含导航）全部在这里进行设置。这部分就是论坛风格的头部，很重要。 |
Dvbbs.mainhtml(5)
获取官方数据 | 论坛分版导航栏，就是
>> 欢迎大家前来交流…… 我的收件箱 (0)
动网先锋论坛 → 动网论坛 → 『 动网风格模板区 』 → 帖子列表 这一块 |
Dvbbs.mainhtml(6)
获取官方数据 | 顶部用户导航栏：已登录用户菜单（就是用户登陆后 重登陆 隐身...那一条）
|
Dvbbs.mainhtml(7)
获取官方数据 | 顶部用户导航栏：客人菜单（就是还没有登陆的时候 登陆 注册 ...那一条） |
Dvbbs.mainhtml(8)
获取官方数据 | 页面结束部分，有新贴，无新帖那三个按纽以下（不含这部分）的内容基本全是在这里设置，就是论坛的最底部，这一部分也很重要。阿里吧吧广告，论坛版权部分等全部在这里。
|
Dvbbs.mainhtml(9)
获取官方数据 | 论坛模板菜单部分
|
Dvbbs.mainhtml(10)
获取官方数据 | 用户导航栏管理链接 （如果是论坛的管理员帐号登陆后，管理菜单下的 回收站 管理等） |
Dvbbs.mainhtml(11)
获取官方数据 | 手机短信信息部分（7。1以后版本特有）
|
Dvbbs.mainhtml(12)
获取官方数据 | 论坛用户功能部分
|
Dvbbs.mainhtml(13)
获取官方数据 | 论坛操作成功信息
|
Dvbbs.mainhtml(14)
获取官方数据 | 操作错误提示部分
|
Dvbbs.mainhtml(15)
获取官方数据 | 验证码表单 |
Dvbbs.mainhtml(16)
获取官方数据 | 道具中心菜单 |
Dvbbs.mainhtml(17)
获取官方数据 | 公共MENU菜单（用户控制面板）部分 |
Dvbbs.mainhtml(18)
获取官方数据 | 页面文件头部申明是用的哪一种类型 |
Dvbbs.mainhtml(19)
获取官方数据 | 回收站 管理 |
Dvbbs.mainhtml(20)
获取官方数据 | 网站地图和博客的连接 |
|
Dvbbs.mainhtml(21)
获取官方数据 | 博客的连接 |
|
Dvbbs.mainhtml(22)
获取官方数据 | 文字广告部分 |
|
第三天:修改8.0的左右分栏风格
8.0的风格最闪亮的地方 也是很多朋友都非常喜欢的分栏风格可以很自由地选择是否使用分栏
但是修改个性风格后 左边的分栏就会出现和右边不搭配的问题
而分栏的样式修改 在后台模板修改找不到
怎么办呢?
不用急 让我们一起来修改
首先 我们要知道 分栏的左部应该在哪个文件里修改
找到这个文件: inc/Templates/leftmenu.xslt
从第8行的 <style type="text/css">
到20行 的 </style>
这之间的全是关于左栏的风格CSS修改
相关的样式可以基本在这里找到
这里的样式的取名基本都和论坛左栏里的位置对应
修改起来还是比较方便的
22行以后就是关于左栏的排版格式的修改
如果你没有基础的代码知识 可以只修改上面部分的CSS
如果你有一定的代码知识
那么你可以直接修改下面的代码为你自己想要的任何样式
左栏的风格修改完后 剩下打开和关闭左栏的那一条细线
这条细线的颜色修改在
index.asp
68行
<TD bgColor="改成你要的颜色值" style="WIDTH: 10px">
到现在 你已经做出了一个很个性的属于自己的风格 而且还有了与其匹配的左右分栏风格
怎么样?
做风格是不是很简单 呵呵
希望大家都能做出自己喜欢的风格!^_^
