• 1556阅读
  • 32回复

对论坛背景的研究(忆江南) [复制链接] [手机版]

上一主题 下一主题
离线zhangjingyu

只看楼主 倒序阅读 使用道具 绿 楼主  发表于: 2022-02-06 18:05:23 星期日
关键词: 论坛横幅广告
这里说的论坛背景主要包括三部分:最上面的页头背景,中间的主体背景和页脚背景。后面两个可以没有,但可能需要指定一个主体背景色。

研究和测试了好几天,主要是因为感觉长时间不更换论坛背景会不会显得太单调了?换换背景也能换换感觉吧。有需求和想法,也趁着春节这几天有时间。

时间花了不少,至少从初一到初三。昨天初五修改背景图(忆江南,三个部分都有)直到半夜,今天又改了一个上午。直到今天下午才算基本把样式弄明白个大概。

既然是更换背景,最主要的当然是页头背景。这个背景图有时候可能要高些,但主导航(上面“门户、论坛、积分竞拍……”那个导航)的位置似乎是固定不变的。于是在附加了一个页头背景后(可以两个单独显示,或者同时显示,也就是有三种组合。当最后看到它们的样式基本一致时,忽然意识到,它们不是基本一样的吗?那还有必要附加吗?直接替换原页头背景图不就行了吗?也删除过样式和代码,但最后一想:原页头背景在一定的可能下,也可以和新的页头背景一起显示啊。当然了,原页头背景是会遮挡一部分新添加的背景图的,由原背景的高度决定。想想这种可能性还是有的,就还原代码。至于让谁显示,完全由样式文件决定),又通过在主导航上方添加一个广告位,通过空白背景图重新定位主导航的位置,才大致有解决方案,但这个方案只是解决的表面存在的定位问题,却似乎并不是最完美的。

今天在继续测试“忆江南”背景图时发现,通过广告位重新定位主导航的位置有一个明显的问题:在页面加载的过程中,卷轴和主导航会首先向上移动再回到重新定位后的位置。这种感觉很不好。于是又继续修改页头背景图,把卷轴放到最上面去。移位问题终于有所缓解。


后来又继续查看样式,想弄明白为什么主导航的位置就是基本固定不变的呢?这也是最初的疑惑,所以最后不得不通过添加广告位的方式临时解决主导航的定位问题。

直到下午两点左右,终于知道了大概。原来是head块的原因,它包括最左面的logo,而logo的高度正好是head块的高度,而主导航紧贴着这个块。它的样式中指定了宽度和对齐方式,但没有指定高度,也就是默认logo的高度。通过指定高度,终于可以重新定位主导航了,而且是在样式文件中修改。这样,新添加的头部横幅广告位也可以腾出来了,不用再参与其中了。至于效果,主导航不会再移位后回归了,只会原位加载后显示,不会乱跑。虽然实现的方式大同小异,但效果不一样,也很是不解其中的道理。

至于,具体指定head的高度多少也是有公式的:新添加页头背景图的高度减去#top的30个像素,也就是最上面的左导航的高度。这是最大值,使主导航紧贴页头背景。如果背景图的下面不是主要部分,或者背景图主体高度不够,可以减小这个差值,从而使主导航及其下面的部分覆盖部分页头背景。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 沙发  发表于: 2022-02-06 18:43:33 星期日  点亮(0)

这是新添加的广告位代码。今天,它的使命结束了,保存截图记录曾经的历史。稍后还要通过备份数据表,恢复到本地,修改后,再备份,上传后再恢复数据,完成广告位描述的修改。这个广告位的标识就是Site.Blankheader,再结合截图中的描述,确实可以见证历史,真的算是专用广告位啊。

而它的工作替任者,仅仅是样式文件中添加的一行简单代码(具体数值参考主帖计算公式):
#head{height:185px;}

想不到吧,仅仅20个字符而已就解决上面如此繁琐的工作。当然了,那个广告位还是有效的,以后说不定还可以使用呢。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 板凳  发表于: 2022-02-06 19:08:35 星期日  点亮(0)
添加的代码也很简单(具体样式在样式文件中定义):
在header.htm文件中
<body>的后面添加:
<div id="wrapA">

在footer.htm文件中
</body>的前面添加:
</div>

完成块的配对收尾。这样做可以保证添加的位置绝对正确,不用担心块的闭合问题。html语言我不懂,就这样大白话吧。然后在测试中发现一个问题:如果页脚图是个大图(长度超过960像素),在主题列表页和帖子阅读页都可以正常显示,但在首页却只能显示出960px。我也怀疑过是不是我上面添加的代码问题?测试后感觉不应该,而且它们的位置没有任何问题。首页文件index.htm也和原始论坛文件对比过,似乎也没有问题,也就是说后期修改过程中基本没有大的问题。但闭合配对是实实在在存在的问题,最后通过在文件中添加一个“</div>”解决配对问题。我也不确定这样添加代码对不对,但至少配对问题解决了,页脚图也能正常显示了。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 地板  发表于: 2022-02-06 19:44:41 星期日  点亮(0)
忆江南背景图样式(添加了center):
对于像这样有边框,不能自适应宽窄屏切换的,可以在后台“论坛模式-论坛设置-宽窄屏切换”里设置为窄屏。
body{font:13px/1.5 Arial; color:#333;background:#fcfefc url($imgpath/$stylepath/body_jiangnan.jpg) center repeat-y;min-height:700px;}
.wrap,#top{min-width:820px;margin:auto;}
.wrap{background:url($imgpath/$stylepath/headerbg123.jpg) no-repeat center top;}
#wrapA{background:url($imgpath/$stylepath/top_jiangnan.gif) no-repeat center top;}
/*通过head高度调整主导航位置,最大值为top图高度减去#top的30px。见4255*/
#head{height:185px;}
/*底部*/
.footer-wrap{background:url($imgpath/$stylepath/footer_jiangnan.gif) no-repeat center bottom;padding:10px 0 20px;margin-top:1px;height:130px;}
#footer:first-letter{text-transform:uppercase;}
#footer img{vertical-align:top;}
=================分隔线====================
.wrap{background:url($imgpath/$stylepath/headerbg123.jpg) no-repeat center top;}
#wrapA{background:url($imgpath/$stylepath/top_jiangnan.gif) no-repeat center top;}
上面的两行样式没有本质上的区别,这也是后来发现的,是不是后知后觉?.wrap是原来的页头背景图样式,#wrapA是后添加的,和2楼模板文件中的代码对应。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 4楼 发表于: 2022-02-06 20:19:10 星期日  点亮(0)
童年背景图样式
body{font:13px/1.5 Arial; color:#333;background:#fefff9 url($imgpath/$stylepath/body_none.jpg) repeat-y;min-height:700px;}
.wrap,#top{min-width:820px;margin:auto;}
.wrap{background:url($imgpath/$stylepath/headerbg123.jpg) no-repeat center top;}
#wrapA{background:url($imgpath/$stylepath/top_tongnian.jpg) no-repeat center top;}
/*通过head高度调整主导航位置,最大值为top图高度减去#top的30px。见4255*/
#head{height:185px;}
/*底部*/
.footer-wrap{background:url($imgpath/$stylepath/footer_none.gif) no-repeat center bottom;padding:10px 0 20px;margin-top:1px;*height:130px;}
#footer:first-letter{text-transform:uppercase;}
#footer img{vertical-align:top;}
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 5楼 发表于: 2022-02-06 20:27:57 星期日  点亮(0)
默认背景样式
body{font:13px/1.5 Arial; color:#333;background:#fff url($imgpath/$stylepath/body_214.jpg) repeat-y;min-height:700px;}
.wrap,#top{min-width:820px;margin:auto;}
.wrap{background:url($imgpath/$stylepath/headerbg.jpg) no-repeat center top;}
#wrapA{background:url($imgpath/$stylepath/top_none.jpg) no-repeat center top;}
/*通过head高度调整主导航位置,最大值为top图高度减去#top的30px。见4255*/
#head{*height:185px;}
/*底部*/
.footer-wrap{background:url($imgpath/$stylepath/footer_none.gif) no-repeat center bottom;padding:10px 0 20px;margin-top:1px;*height:130px;}
#footer:first-letter{text-transform:uppercase;}
#footer img{vertical-align:top;}
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 6楼 发表于: 2022-02-06 20:31:32 星期日  点亮(0)
关于背景图定位:
左上角:0 0
右上角:100% 0
左下角:0 100%(页脚背景可能用得上)
右下角:100% 100%
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 7楼 发表于: 2022-02-06 20:49:43 星期日  点亮(0)
三个样式测试完毕(把上面的代码粘贴到样式文件中),还不错。下面修改广告位描述。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 8楼 发表于: 2022-02-06 21:15:35 星期日  点亮(0)
广告位描述修改完毕,顺便在后台备份下数据。

几天的忙碌终于告一段落。今天初六,又快到上班的时候了,这年过得也太快了吧。明天干啥?更新“时光里的故事”,还是再修修我做的自动键,练习练习?还是做点儿别的?哎,时间不够用啊。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!
离线zhangjingyu

只看该作者 9楼 发表于: 2022-02-06 22:00:41 星期日  点亮(0)
从chinaz下载了很多风格模板。但我并不是想从中找到一个可用的模板,毕竟有很多都是早期版本的。而且就算是能用也需要不断的调整,不可能所有地方的样式都是适合的,而这需要很多的时间。我只是单纯的想从中找到一些可以用的背景图片,因为我不会做,只能借鉴一下。只是最后,几十个模板目录也没找到几个可用的。
尊重每位祺师,做有价值的祺文化社区!欢迎光临,并感谢您的支持与陪伴!
我希望能通过这个论坛让更多的朋友更多的关爱自己的家人和朋友,不要等到有一天失去后才知道没有好好的珍惜,才知道
拥有的珍贵!亲爱的们,如果你懂得,请把这份关爱传递,让更多的人加入到爱心接力当中,让每个人的心中都洋溢着爱的温馨!

我们应该知道:岁月如梭!其实生命,是很短暂,也是很脆弱的东西…… 设置自己的帖子签名请点这里!