位置：首页>> 网络编程>> 网页设计>> 简单方法实现网页自动适应任何分辨率任何窗口大小

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

作者：网页修行　来源：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>

投稿

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

猜你喜欢