逐梦论坛 - Powered by Discuz! Board

标题: [LeadBBS相关] [蚂蚁]leadbbs风格制作完美篇 [打印本页]

作者: shillan 时间: 2006-2-16 18:27 标题: [蚂蚁]leadbbs风格制作完美篇

有帖说论坛靠左靠右的问题，可参考本代码。

以下制作遵循条件：不受电脑分辨率限制，适合800x600---1280x1024

《一》后台在线编辑风格设定篇

第一种：仅制作有顶部logo的风格
论坛首部代码：
<table width=100% height=120 border=0 align=center cellpadding=0 cellspacing=0>
<tr>
<td width=100% background=/bbs/skin/0/top1.gif> </td>
<td width=760 height=120 align=center><img src=/bbs/skin/0/top2.gif></td>
<td width=100% background=/bbs/skin/0/top3.gif> </td>
</tr>
</table>

说明：
1：top1.gif+top2.gif+top3.gif=顶部整体logo图片
2：top1.gif和top3.gif属于在不同分辨率下自动向俩侧延伸宽度的图片(图片重复叠加)；
top2.gif为主要图片，主要适合800x600的电脑分辨率
也可以将扩展图片放中间,主要图片分割分别放俩边(以下同)

第二种：制作含顶部和底部图片的风格
制作方法同上，只需要将代码分别放在首部和底部就可以了。说明也是一样。

第三种：在以上基础上，增加区版的上面的图片装饰1
在css里设置，因为要适宜不同分辨率，建议采用变化不大的图案的图片。
代码：
.tbhead{background-color:#000000;background-image:url(/bbs/skin/0/head.gif);}
.tbhead2{background-color:#000000;background-image:url(/bbs/skin/0/head.gif);}

说明：当head.gif无链接时，颜色为#000000(图片重复叠加)

第四种：在以上基础上，增加表格头部和尾部内容代码：
表格头部代码：
<table height=30 cellspacing=0 cellpadding=0 width=100% align=center border=0>
<tr>
<td width=150><img height=30 src=/bbs/skin/0/1.jpg></td>
<td width=100% background=/bbs/skin/0/2.jpg><img height=30 src=/bbs/skin/0/2.jpg></td>
<td width=150><img height=30 src=/bbs/skin/0/3.jpg></td>
</tr>
</table>
表格尾部代码(相同于以上代码)：
<table height=30 cellspacing=0 cellpadding=0 width=100% align=center border=0>
<tr>
<td width=150><img height=30 src=/bbs/skin/0/4.jpg></td>
<td width=100% background=/bbs/skin/0/5.jpg><img height=30 src=/bbs/skin/0/5.jpg></td>
<td width=150><img height=30 src=/bbs/skin/0/6.jpg></td>
</tr>
</table>
说明：
1：1.jpg、3.jpg、4.jpg、6.jpg为顶部和底部表格的俩边主要图片图案；
2：2.jpg、5.jpg为顶部和底部表格中间的随分辨率不同自动延伸宽度的图片(图片重复叠加)；
3：由于增加表格四周的图片随分辨率不同变化比较复杂，代码过多，就不说了。例如官方的风格“网游天使”风格

第五种：在以上基础上增加整个论坛俩边带图片的代码：
(论坛版面偏左或偏右可用此法.class=tbbgbody)
在原有首部代码下增加：
<table width=100% border=0 cellpadding=0 cellspacing=0>
<tr>
<td width=20 valign=top background=/bbs/skin/0/left.gif><img src=/bbs/skin/0/left1.gif width=20 height=100></td>
<td width=100% valign=top rowspan=2>
<table border=0 width=100% cellspacing=0 cellpadding=0>
<tr>
<td>
说明：
1：left.gif为左边整个背景图片随论坛高度自动延伸的背景图片(图片重复叠加)；
2：left1.gif为左边的自定义图片，如果不需要，可修改为left.gif。

在原有底部代码上增加：
</td>
</tr>
</table>
</td>
<td width=20 valign=top background=/bbs/skin/0/right.gif><img src=/bbs/skin/0/right1.gif width=20 height=100></td>
</tr>
</table>
说明：
1：right.gif为右边整个背景图片随论坛高度自动延伸的背景图片(图片重复叠加)；
2：right1.gif为右边的自定义图片，如果不需要，可修改为left.gif。

《二》css层制作篇
1：全局布置：
body{font-size:9pt;color:#000000;font-family: "宋体";background-color:#faf1d7;background-image:url(/bbs/skin/0/bg.gif);scrollbar-face-color: red; scrollbar-highlight-color: #cccccc;scrollbar-shadow-color: #9d9d9d; color: #7d7d7d; scrollbar-3dlight-color: #777777; scrollbar-track-color: #d9d9d9; scrollbar-darkshadow-color: #eeeeee;scrollbar-arrow-color:#000000;}

说明：定义整个页面字体大小9pt,字体颜色为#000000，字体为宋体，预载颜色为#faf1d7，论坛背景为：bg.gif(图片重复叠加),浏览器滚动条的各个面设置。
如果需要加鼠标特效，在后面加上语句：cursor:url(/bbs/skin/0/0.ani);

2:其他：
p{font-size:9pt;}
td{font-size:9pt;}
li{font-size:9pt;margin-left: 0pt;}
ul{font-size:9pt;margin-left: 20pt;}
说明：以上为段落定义

textarea--------------文本输入框的字体

a{text-transform: none; text-decoration: none; color: #774400;}--脱离
a:hover {color: #008800;}---点击
有链接时鼠标脱离和点击颜色定义

3：leadbbs的特定css
如果使用了图片，则图片是重复叠加
.tbtop 论坛头部导航背景
.navcolor 论坛“首页”“交流区”、尾部字颜色
.tbhead .tbhead2 区显示栏背景
.headfont 区显示栏字颜色
.tbbg1 版左第一个背景
.tbbg9 版右背景
.tbone 框颜色
.fminpt 框内背景
.tbfour 表格头部
.tbtwofont 新帖后的数字统计颜色
.tbthree 回复、发帖处。可忽略不理解默认等于.tbone，当定义头部或扩展风格时用
.tbframebg 左框架背景
.tbframebutton 左框架字颜色
.tbmenu 下拉菜单边框色
.menubg 下拉菜单背景色
.menucolor 下拉菜单选中项目颜色

以上风格制作
论坛宽度一律为100%
主题长度一律为56

原帖地址：http://w.leadbbs.com/a/a.asp?b=10&id=2245024

欢迎光临逐梦论坛 (http://temp2023.zhumeng.org/)