游客: 登录 免费注册 栏目列表 搜索 领红包 自选风格 版主推荐 社区功能 审核投诉 帮助 VIP申请
华声论坛 → 音画学堂区 → 教程交流 →

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

发新帖  新投票  回帖 
帖子主题:华声/Discuz论坛-动画/音画帖任意分辨率任意浏览器自适应居中代码[原创]
共4734个阅读者,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层是帖子高度占位层

[Copy to clipboard] [ - ]
CODE:
<div style="height:810px"></div>

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


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

1、FLASH动画帖(1000*600)

[Copy to clipboard] [ - ]
CODE:
<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)

[Copy to clipboard] [ - ]
CODE:
<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
问好楼主。
在华声，发全屏帖，有一个显得较特殊的做法，早几年梦版主发过帖介绍。
此法仅在允许全屏代码的版块才有效（如：此栏目，绝美特效栏目等）。
在全部代码的最前面加上

[Copy to clipboard] [ - ]
CODE:
</td></table></td></table>

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

[Copy to clipboard] [ - ]
CODE:
</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.037861 s, 9 q - 无图精简版,sitemap,