最近發現阿里巴巴的Web前端開發面試題，共分三部分：CSS部分，JavaScript部分，緊急處理部分，分享給大家做個參考～

第一部分：用CSS實現布局

讓我們一起來做一個頁面

首先，我們需要一個布局。

請使用CSS控制3個div，實現如下圖的布局。

第二部分：用javascript優化布局

由于我們的用戶群喜歡放大看頁面

于是我們給上一題的布局做一次優化。

當鼠標略過某個區塊的時候，該區塊會放大25%，

并且其他的區塊仍然固定不動。

提示：

也許，我們其他的布局也會用到這個放大的效果哦。可以使用任何開源代碼，包括曾經你自己寫的。

關鍵字：javascript、封裝、復用

第三部分：處理緊急情況

好了，我們的頁面完成了。

于是我們將頁面發布上網。

突然，晴天霹靂，頁面無法訪問了，這時候，你會怎么做？

面試題到此為止，你是否能夠對答如流呢，仔細想一下，然后在翻頁看一下答案。

#p#

答案部分

第一題：主要考慮幾個問題：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代碼沒有放在頁面的后面，加載速度慢尚未顯示出來。或者是頁面地址出錯了。

這種情況下，先查看頁面的源代碼，看看有沒有什么問題，然后找后臺技術人員，看是不是服務器或技術方面的問題。