注册
登录
网站首页
加入收藏
使用帮助
联系我们
论坛
排行榜
最新帖子
管理团队
应用
风格
搜索
晨风暮雨
心无涯
社区休闲馆
上网一族
查看帖子
主题:
[转帖]leadbbs风格制作完美篇
回复:
2
帖
上篇
返回版面
下篇
发表新主题
发起投票
回复此主题
1
复制本帖地址
ruobing
2006-02-13 07:43:05
阅读:2092次
回复
只看此人
楼主
门派
职务
总版主
声望
+34
魅力
27
金币
4626
经验
35154
文章
1354
注册
2004-06-29
LeadBBS官方论坛
[转帖]leadbbs风格制作完美篇
以下制作遵循条件:不受电脑分辨率限制,适合800X600---1280X1024
《一》后台在线编辑风格设定篇
第一种:仅制作有顶部LOGO的风格
论坛首部代码:
<table width=100% height=120 border=0 align=center cellpadding=0 cellspacing=0>
<tr>
<td width=100% background=/bbs/images/skin/0/top1.gif> </td>
<td width=760 height=120 align=center><img src=/bbs/images/skin/0/top2.gif></td>
<td width=100% background=/bbs/images/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/images/skin/0/head.gif);}
.TBHead2{background-color:#000000;background-image:url(/bbs/images/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/images/skin/0/1.jpg></td>
<td width=100% background=/bbs/images/skin/0/2.jpg><img height=30 src=/bbs/images/skin/0/2.jpg></td>
<td width=150><img height=30 src=/bbs/images/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/images/skin/0/4.jpg></td>
<td width=100% background=/bbs/images/skin/0/5.jpg><img height=30 src=/bbs/images/skin/0/5.jpg></td>
<td width=150><img height=30 src=/bbs/images/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/images/skin/0/left.gif><img src=/bbs/images/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/images/skin/0/right.gif><img src=/bbs/images/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/images/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/images/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 下拉菜单选中项目颜色
欢迎大家光临本论坛!
[img]http://www.ruobing66.com/bbs/images/upload/2006/4.gif[/img]
高杰
2006-02-14 13:32:32
引用
只看此人
2
楼
会员
认证会员
金币
474
经验
1597
文章
89
注册
2005-01-10
LeadBBS官方论坛
网页更新速度真快!
宇宙广袤无垠, 大海浩濣无边, 人生价值几何, 贵在不断登攀。
竹影疑踪
2006-04-06 08:54:43
引用
只看此人
3
楼
职务
区版主
声望
+23
魅力
105
金币
5439
经验
36518
文章
1405
注册
2006-02-02
是很有用的东西,不过还不完善。
[img]http://www.ruobing66.com/upfiles/img/2005101251983753.gif[/img]
发表新主题
发起投票
回复此主题
1
loading...
loading...
loading...
loading...
loading...
loading...
loading...
回复帖子 注意: *为必填项
*验证信息
用户名
密码
注册新用户
*帖子名称
内容(最大97K)
解析UBB代码
恢复上次发帖
当前保存
(无)
其它选项
显示签名
锁定帖子
回复短消息通知
Alt+S快速提交
Copyright
©
2003-2025 晨风暮雨 -
清空COOKIE
-
手机版
-
RSS
版权所有,转载请注明:来自心无涯论坛:http://www.ruobing.site/bbs
Powered by
LeadBBS 9.2
.
Page created in 0.2031 seconds with 4 queries.
顶部