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

这里说的论坛背景主要包括三部分：最上面的页头背景，中间的主体背景和页脚背景。后面两个可以没有，但可能需要指定一个主体背景色。

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

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

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

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

图片:491.jpg

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

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

至于，具体指定head的高度多少也是有公式的：新添加页头背景图的高度减去#top的30个像素，也就是最上面的左导航的高度。这是最大值，使主导航紧贴页头背景。如果背景图的下面不是主要部分，或者背景图主体高度不够，可以减小这个差值，从而使主导航及其下面的部分覆盖部分页头背景。

本地测试完成，撤。

样式文件也下载回来了，验证问题出现的原因确实是因为文件没有修改完整造成的。再仔细想想，应该是保存目录的原因。本地是直接保存在214目录的，而家园论坛是保存在其下子目录top_jiangnan的：
#wrapA{background:url($imgpath/$stylepath/top_jiangnan/$db_wrapabg) no-repeat center top;}

那也不对啊，这一点点的差别完全可以在文件中稍微修改即可，怎么其它的就没有了呢？算了，不研究了，浪费脑细胞，本来就剩得不多了。

本地样式文件用下载回来的稍加修改后覆盖，省得再有问题。

想把页头背景和页脚背景换回原来的进行测试，本地进行。然而，没能成功！很是郁闷。查看源代码，审核元素等都不知道什么原因。把缓存目录的样式文件删除了，不行；一遍遍的清空浏览器缓存，不行；清除论坛cookies，还是不行。就是搞不明白，问题到底在哪儿？按说本地论坛的文件和家园论坛应该是一样的啊，不应该有什么太大的区别。时间用了一两个小时，不止吧。最后没办法，只能在家园论坛直接测试。结果，非常的顺利，几分钟搞定。查看本地样式文件，只修改了#wrapA的样式，仅此一处（$db_wrapabg的数据保存在数据表中）：
#wrapA{background:url($imgpath/$stylepath/$db_wrapabg) no-repeat center top;}
哎，一切都是白忙活！想当初，这应该是最初的测试修改。但奇怪的是，还有body，head高度指定等数据需要修改测试，为什么就没完整的修改文件呢？百思不得其姐。

body{font:13px/1.5 Arial; color:#333;background:$db_bodystyle;min-height:700px;}
.wrap,#top{min-width:820px;margin:auto;}
.wrap{background:url($imgpath/$stylepath/$db_wrapbg) no-repeat center top;}
#wrapA{background:url($imgpath/$stylepath/top_jiangnan/$db_wrapabg) no-repeat center top;}
/*通过head高度调整主导航位置，参考值为top图高度减去#top的30px，可加可减。见4255*/
#head{height:$db_headheight;}
/*底部*/
.footer-wrap{background:url($imgpath/$stylepath/$db_footerbg) no-repeat center bottom;padding:10px 0 20px;margin-top:1px;height:130px;}

论坛因为有你才精彩！！！

不错，测试调整“head高度”也正常。准备睡觉！

不早了，准备休息了。本来想着11点就能完成的，没想到还是晚了。

zhangjingyu 到这个时候了。
后台主要想修改文本框的宽度和高度，也是今晚的主要工作，但效果不是太理想。多行文本框的高度和宽度似乎没法修改，无论是在htm文件中，还是在样式文件中，问题的关键还是自己对样式的把握还不够，不懂css的硬伤啊。

单行文本框的宽度，起初似乎也是没法修改，通 .. (2022-06-11 01:26)  查看本帖 

后台截图来了。由于不能直接上传附件，只好先传到相册，再调用。哎，flash player伤不起啊。

这个“忆江南风格参数”部分就是在setting.htm文件中添加的。可以直接预览wrapA背景图，方便知道有还是没有，有的话是哪一个，不对的话接着换。

images/admin/admin_style.css
添加：.input_wf{width:710px;font-size:16px;}
指定单行文本框的宽度和字号。

后台提交数据后，一切又都变得和之前没有区别了。
只是，后台的字号还比较小，和测试时的不一样，因为还有一处样式忘了改了。