第一部分：用CSS實現佈局 讓我們一起來做一個頁面 首先，我們需要一個佈局。 請使用CSS控制3個div，實現如下圖的佈局。 第二部分：用javascript優化佈局 由於我們的用戶群喜歡放大看頁面 於是我們給上一題的佈局做一次優化。 當滑鼠略過某個區塊的時候，該區塊會放大25%， 並且其他的區塊仍 ...
第一部分：用CSS實現佈局
讓我們一起來做一個頁面
首先，我們需要一個佈局。
請使用CSS控制3個div，實現如下圖的佈局。
第二部分：用javascript優化佈局
由於我們的用戶群喜歡放大看頁面
於是我們給上一題的佈局做一次優化。
當滑鼠略過某個區塊的時候，該區塊會放大25%，
並且其他的區塊仍然固定不動。
提示：
也許，我們其他的佈局也會用到這個放大的效果哦。可以使用任何開源代碼，包括曾經你自己寫的。
關鍵字：javascript、封裝、復用
第三部分：處理緊急情況
好了，我們的頁面完成了。
於是我們將頁面發佈上網。
突然，晴天霹靂，頁面無法訪問了，這時候，你會怎麼做？
面試題到此為止，你是否能夠對答如流呢，仔細想一下，然後在翻頁看一下答案。
答案部分
第一題：主要考慮幾個問題：1. IE6 的 3 像素 BUG；2. 清楚浮動；
CSS代碼：
div{background:#CCCCCC;}
#first{float:left;width:100px; height:150px}
#second{clear:left;float:left;margin-top:10px;width:100px;height:150px}
#third{zoom:1; width:200px;margin-left:110px;_margin-left:107px; height:310px}
XML/HTML代碼
<div id="first"></div>
<div id="second"></div>
<div id="third"></div>
第二題：用javascript優化佈局
提示：
也許，我們其他的佈局也會用到這個放大的效果哦。
可以使用任何開源代碼，包括曾經你自己寫的。
關鍵字：javascript、封裝、復用
慚愧啊，用上邊那個佈局我怎麼也沒把它優化出來，硬這頭皮用絕對定位改了佈局；
所以樣式改成了這樣：
body{ margin:0; padding:0}
div{background:#CCCCCC; position:absolute}
#first{width:100px; height:150px}
#second{top:160px;width:100px;height:150px}
#third{ width:200px; height:310px; left:110px}
javascript 要考慮封裝、復用
function zoom(id,x,y){ // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個參數）
var obj=document.getElementById(id); // 獲取元素對象值
var dW=obj.clientWidth; // 獲取元素寬度
var dH=obj.clientHeight; // 獲取元素高度
//var oTop=obj.offsetTop;
//var oLeft=obj.offsetLeft;
obj.onmouseover=function(){ // 滑鼠移入
this.style.width=dW*x+"px"; // 橫向縮放
this.style.height=dH*y+"px"; // 縱向縮放
this.style.backgroundColor="#f00″; // 設置調試背景
this.style.zIndex=1; // 設置z軸優先
}
obj.onmouseout=function(){ // 滑鼠移出，設回預設值
this.style.width="";
this.style.height="";
this.style.padding="";
this.style.backgroundColor="";
this.style.zIndex="";
}
}
zoom("first",1.25,1.25);
zoom("second",1.25,1.25);
zoom("third",1.25,1.25);
第三題也許是JS代碼沒有放在頁面的後面，載入速度慢尚未顯示出來。或者是頁面地址出錯了。
