简单方法实现网页自动适应任何分辨率任何窗口大小

作者：网页修行来源：51js 时间：2008-09-13 19:28:00　

简单方法实现网页自动适应任何分辨率任何窗口大小(只适用于IE)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>IE6</title><style>*{padding:0;margin:0;}#AllBody{width:1004px;margin:0 auto;}#Top{background-color:#154BA0;height:50px;}#Left{width:200px;background-color:#9FC8DF;float:left;height:500px;}#Right{width:804px;background-color:#ffe;float:left;height:500px;}#Bottom{clear: both;float: none;background-color:#86B9D6;height:150px;}</style><script type="text/javascript">function WinOnResize(){document.getElementById("AllBody").style.zoom=parseInt((document.documentElement.clientWidth)/1004*100) + "％";}</script></head><body onresize="WinOnResize()" onload="WinOnResize()"><div id="AllBody"><div id="Top"></div><div id="Left"></div><div id="Right"></div><div id="Bottom"></div></div></body></html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>IE6</title><style>*{padding:0;margin:0;}#AllBody{width:1004px;margin:0 auto;}#Top{background-color:#154BA0;height:50px;border-bottom:2px solid #006;}#Left{width:200px;background-color:#9FC8DF;float:left;height:500px;}#Right{width:800px;background-color:#ffe;float:left;height:500px;border-left:2px solid #039;border-right:2px solid #039;}#Bottom{border-top:2px solid #006;clear: both;float: none;background-color:#86B9D6;height:150px;}</style><script type="text/javascript">function WinOnResize(){document.getElementById("AllBody").style.zoom=parseInt((document.documentElement.clientWidth)/1004*100) + "％";}</script></head><body onresize="WinOnResize()" onload="WinOnResize()"><div id="AllBody"><div id="Top">此区域内有很多精致布局</div><div id="Left">此区域内有很多精致布局</div><div id="Right">此区域内有很多精致布局</div><div id="Bottom">此区域内有很多精致布局</div></div></body></html>

标签：自适应,布局,分辨率

投稿

简单方法实现网页自动适应任何分辨率任何窗口大小

猜你喜欢

网页设计进阶之一 (步骤和大局观)

JavaScript获取事件对象的注意点

asp实现页面延迟运行的两个简单方法

Google投放广告的js的分析

FF下，用 col 隐藏表格列的方法详解！

javascript新闻图片轮换类

thinkphp(php)插件钩子(hooks)分析的简单实现机制

CSS绝对定位在宽屏分辨率下错位

36个折纸风格logo设计

用Oracle并行查询发挥多CPU的威力

asp测字符串长度及截取定长字符串汉字的处理

IE的button元素bug

如何快速地更新网页内容？

教你用FrontPage2003轻松布局网页

plsql和tsql常用函数比对

优化Oracle停机时间及数据库恢复

Microsoft SQL Server 2000安装问题集锦

如何实现固定长度的自动编号？

SQL Server 中导入导出数据三方法比较

SQL Server 2008 到底需要使用哪些端口？