发新帖  新投票  回帖 
4550个阅读者,17条回复 | 打印 | 订阅 | 收藏
梦回轻狂

发表时间:2011-5-10 20:45

华声/Discuz论坛-动画/音画帖任意分辨率任意浏览器自适应居中代码[原创]



梦回轻狂 发表在 教程交流 华声论坛 http://bbs.voc.com.cn/forum-163-1.html

我做了多次尝试发现用下面的代码可以很好的实现宽屏、标屏自适应居中,
在IE7、IE8、火狐浏览器下效果非常好,帖出来供大家参考:
在华声论坛+IE6+大于等于1280的分辨率下也能居中,
只是稍微偏左一点点(Discuz7论坛IE6下完全居左)。

重要说明:
1、z-index:32768 这里不一定要32768,一般大于1000就可以了
2、margin-top:160px;这是华声论坛的经验值(为了显示出发帖者的信息)
Discuz7论坛下应该240左右;
3、最后一个DIV层是帖子高度占位层

<div style="height:810px"></div>

其高度应该设置成:帖子主体高度+margin-top值(160)+下方留白(约50)


华声/Discuz7论坛-动画/音画帖任意分辨率任意浏览器下自适应居中的发帖代码

1、FLASH动画帖(1000*600)

<div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:160px;"><center><embed width="1000" height="600" src="http://webftp.bbs.hnol.net/mhqk/player/hongyan/myimglstplayer.swf" FlashVars='' type=application/x-shockwave-flash wmode=window quality="high" allowfullscreen="true" allowNetworking="all" allowScriptAccess="always"></embed></center></div><div style="height:810px"></div>



2、单幅音画帖(1000*500)

<div style="position:absolute;z-index:32768;background:none;width:100%;left:0px;margin-top:160px;"><center><IFRAME src="http://webftp.bbs.hnol.net/menghen/1102/guanyuaiqing/guanyuaiqing.html" width="1000" height="500" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="no"></IFRAME></center></div><div style="height:860px"></div>




[本帖最后由 梦回轻狂 于 2011-5-12 08:21 编辑]


本帖最近评分记录
一追一   2011-5-14 09:53  金钱  +10   感谢分享
一追一   2011-5-14 09:53  魅力  +10   感谢分享



----------------------------------------------

  能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。


  中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。

  食园有路心作引,厨海无涯汗推舟……

 
梦回轻狂

回复时间:2011-5-10 20:49
希望看到FLASH没有居中的朋友回一下帖!

敬请使用IE6的朋友留意一下!

[本帖最后由 梦回轻狂 于 2011-5-10 20:57 编辑]




----------------------------------------------

  能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。


  中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。

  食园有路心作引,厨海无涯汗推舟……

 
蝶舞ゞ红尘

回复时间:2011-5-10 20:49
先抢个沙发再细看~~嘿

 
晖色调

回复时间:2011-5-10 20:51
梦回辛苦!我这看是全居中!




----------------------------------------------
珍惜善友!
 
贝子

回复时间:2011-5-10 20:56
没居中,还是居左呢

 
wsdtr

回复时间:2011-5-10 21:06
居中的。梦回版版辛苦。




----------------------------------------------
飞车
 
梦隐儿

回复时间:2011-5-10 21:52
梦回老师好!我看到的,截图如下:

按此在新窗口浏览图片

[本帖最后由 梦隐儿 于 2011-5-10 21:54 编辑]




----------------------------------------------
吾 梦千年心不归
誓 隐网海避世来
疯 儿醉尘漠如烟
颠 铭世浮度炎凉
 
烟雨寒

回复时间:2011-5-11 00:57
居中,梦回版辛苦了!




----------------------------------------------
岁月静好,我们一起走。。
 
雪影无痕

回复时间:2011-5-11 11:30
我用的是搜狗和IE8的浏览器看见的都全居中,梦回老师辛苦了~~




----------------------------------------------
你有你的精彩 我有我的自在 ——ツ影子┇﹍★
 
学恩

回复时间:2011-5-11 14:16
老师辛苦了。

 
ywmoo

回复时间:2011-5-11 18:24
非常好!




----------------------------------------------
付出爱心就是福,
消除烦恼就是慧。
 
ydmyanz

回复时间:2011-5-13 21:11
非常好!

 
一追一
原创音画组

回复时间:2011-5-14 09:53
好东西,来学习一下

 
枳橘吟

回复时间:2011-5-15 16:13
问好楼主。
在华声,发全屏帖,有一个显得较特殊的做法,早几年梦版主发过帖介绍。
此法仅在允许全屏代码的版块才有效(如:此栏目,绝美特效栏目等)。
在全部代码的最前面加上

</td></table></td></table>

即可。原发帖代码中的定位、左移可不设置。原帖宽度以1000px为参考。给原帖内容加上居中标签,宽度可不考虑。

</td></table></td></table><center> 原帖内容 </center>


另一个要注意的,在粘贴代码时,代码中不能有换行的内容(在pg中编辑时,有自动排版的功能,即含有代码换行),如果有,效果就可能不正常。此编辑框右下设置有“清除换行”按钮。
其他情况不参与讨论了。仅此予大家参考。


[本帖最后由 枳橘吟 于 2011-5-19 16:43 编辑]


本帖最近评分记录
一追一   2011-5-15 16:43  金钱  +5   感谢分享
一追一   2011-5-15 16:43  魅力  +5   感谢分享
 
枳橘吟

回复时间:2011-5-15 19:01
谢谢版主
一追一 2011-5-15 16:43 金钱 +5 感谢分享
一追一 2011-5-15 16:43 魅力 +5 感谢分享
褒奖。

 
妍羽

回复时间:2011-5-15 19:48
那要是没有空间的朋友发帖,那这些代码还不是一样的不管用。

 
梦回轻狂

回复时间:2011-5-16 08:28
回14楼枳老

谢谢枳老分享,问好!

这种方法已经在音画版看到了。是利用表格默认居中的原理实现的,

这样写代码的优点是:帖子在任何浏览器下都绝对居中

缺点是:1、会提前截断2层表格,导致帖子下方的其它原有表格元素显示变形

2、帖子左右两边的背景是白色不透明的

我的写法是完全遵循CSS标准构建的,其优点可以弥补上述两个地方,缺点是IE6下偏左一点。




----------------------------------------------

  能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。


  中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。

  食园有路心作引,厨海无涯汗推舟……

 
梦回轻狂

回复时间:2011-5-16 08:32
回16楼 研羽

可以把HTML内容直接写在帖子里面试试(可以用表格,图片,动画直接上传到论坛)


此外,网上可以找到比较多的免费空间,你不妨百度一下!




----------------------------------------------

  能跑的不如能吃的,能吃的不如能睡的;睡觉是头等大事,吃饭是二等大事,运动是三等大事,其余的都是小事。


  中医认为药物和食物是同源的,自古就秉持“寓医于食”的防病治病理念。《黄帝内经》云:“大毒治病十去其六;常毒治病十去其七,小毒治病十去其八,无毒治病十去其九”,“先进厨房,后进药房”的说法在民间更是广为流传。

  食园有路心作引,厨海无涯汗推舟……

 
发新帖 新投票
 回帖
查看积分策略说明快速回复主题
你的用户名: 密码:   免费注册(只要30秒)


启用 Html 代码
使用个人签名
(请您文明上网理性发言!并遵守相关规定
   



Processed in 0.039354 s, 9 q - 无图精简版,sitemap,