用CSS實現佈局
讓我們一起來做一個頁面
首先，我們需要一個佈局。
請使用CSS控制3個div，實現如下圖的佈局。
--------------------------------------------------------------------------------------------
比較好的方案是
代碼:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:20%;
margin-right:10px;
-margin-right:7px; /* 修正IE6-中3像素偏移bug */
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:20%;
}
#thirdly{
+zoom:1; /* 在IE中，初始化觸發Layout */
/* 注意：現在IE中，爲該容器設定margin-left值無效 */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>
考察應試者的基本佈局知識——浮動或絕對定位（顯然，後者在流體佈局各區塊自適應內容高度的情況下並不適用）。
這裏給一個通常的佈局方案：
複製內容到剪貼板
代碼:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>提示：您可以先修改部分代碼再運行
然而在IE6-中，當：
複製內容到剪貼板
代碼:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
width:400px; /* 然而在IE6-中，當width設定爲除auto（默認值）以外的值時，觸發Layout特性，會整體向右產生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>提示：您可以先修改部分代碼再運行
或是：
複製內容到剪貼板
代碼:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
margin-left:210px;
height:200px; /* 然而在IE6-中，當height設定爲除auto（默認值）以外的值時，觸發Layout特性，左邊緣會向右產生3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>提示：您可以先修改部分代碼再運行
最終調整爲一個比較健壯的流體佈局方案：
複製內容到剪貼板
代碼:
<style type="text/css">
div{background:#ccc;}
h2{margin:0;}
#firstly{
float:left;
width:200px;
}
#secondly{
clear:left;
float:left;
margin-top:10px;
width:200px;
}
#thirdly{
-zoom:1; /* 在IE6-中，初始化觸發Layout */
margin-left:210px;
-margin-left:207px; /* 修正IE6-中觸發Layout後3像素偏移bug */
}
</style>
<div id="firstly"></div>
<div id="secondly"></div>
<div id="thirdly"></div>提示：您可以先修改部分代碼再運行
------------------------------------------------------------------------------------------------------------------------------------------------------
頁面DIV的縮放代碼
有點時間，繼續優化：
提示：您可以先修改部分代碼再運行
複製內容到剪貼板
代碼:
<script type="text/javascript">
function getDefaultStyle(obj,attribute){ // 返回最終樣式函數，兼容IE和DOM，設置參數：元素對象、樣式特性
return obj.currentStyle?obj.currentStyle[attribute]:document.defaultView.getComputedStyle(obj,false)[attribute];
}
function zoom(id,x,y){ // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個參數）
var obj=document.getElementById(id); // 獲取元素對象
/* 以下實際值計算全部忽略小數，遇小數統一向上或向下取值，避免各瀏覽器取值方式干擾 */
var dO=getDefaultStyle(obj,"overflow");
var dP0=getDefaultStyle(obj,"paddingTop"),dP0=parseInt(dP0),dP0Y=parseInt(dP0*y); // 獲取元素各方向padding值、padding縮放值
var dP1=getDefaultStyle(obj,"paddingRight"),dP1=parseInt(dP1),dP1X=parseInt(dP1*x);
var dP2=getDefaultStyle(obj,"paddingBottom"),dP2=parseInt(dP2),dP2Y=parseInt(dP2*y);
var dP3=getDefaultStyle(obj,"paddingLeft"),dP3=parseInt(dP3),dP3X=parseInt(dP3*x);
var dW=obj.clientWidth-dP1-dP3,dWX=parseInt(dW*x); // 獲取元素寬度、縮放寬度
var dH=obj.clientHeight-dP0-dP2,dHY=parseInt(dH*y); // 獲取元素高度、縮放高度
var dMR=getDefaultStyle(obj,"marginRight");if(dMR=="auto")dMR=0;var pdMR=parseInt(dMR); // 獲取元素margin-right數值
var dMB=getDefaultStyle(obj,"marginBottom");if(dMB=="auto")dMB=0;var pdMB=parseInt(dMB); // 獲取元素margin-bottom數值
var dZ=getDefaultStyle(obj,"zIndex"); //獲取元素z軸索引（依需求可選）
obj.οnmοuseοver=function(){ // 鼠標移入
if((x<1 || y<1) && dO!="auto" && dO!="hidden")this.style.overflow="auto"; // 適應縮小效果（依需求或可設值爲hidden）
this.style.position="relative"; // 設置相對定位，z軸索引向瀏覽者偏移
this.style.zIndex=dZ+1; // 再設置z軸優先（依需求可選）
this.style.marginRight=-(dWX-dW)-(dP1X-dP1)-(dP3X-dP3)+pdMR+"px"; // 根據容器橫向縮放，設置反向margin-right補位
this.style.marginBottom=-(dHY-dH)-(dP0Y-dP0)-(dP2Y-dP2)+pdMB+"px"; // 根據容器縱向縮放，設置反向margin-bottom補位
this.style.padding=dP0Y+"px "+dP1X+"px "+dP2Y+"px "+dP3X+"px "; // 設置padding縱、橫向縮放
this.style.width=dWX+"px"; // 設置橫向縮放
this.style.height=dHY+"px"; // 設置縱向縮放
this.style.backgroundColor="#f00"; // 設置調試背景
}
obj.οnmοuseοut=function(){
this.style.position="";
this.style.zIndex="";
this.style.marginRight="";
this.style.marginBottom="";
this.style.padding="";
this.style.width="";
this.style.height="";
this.style.backgroundColor="";
}
}
zoom("firstly",2,1.5);
zoom("secondly",1,1);
zoom("thirdly",0.5,2);
</script>提示：您可以先修改部分代碼再運行