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

第一部分：用CSS實現(xiàn)布局

讓我們一起來做一個頁面

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

請使用CSS控制3個div，實現(xiàn)如下圖的布局。

第二部分：用javascript優(yōu)化布局

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

于是我們給上一題的布局做一次優(yōu)化。

當(dāng)鼠標(biāo)略過某個區(qū)塊的時候，該區(qū)塊會放大25%，

并且其他的區(qū)塊仍然固定不動。

提示：

也許，我們其他的布局也會用到這個放大的效果哦?？梢允褂萌魏伍_源代碼，包括曾經(jīng)你自己寫的。

關(guān)鍵字：javascript、封裝、復(fù)用

第三部分：處理緊急情況

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

于是我們將頁面發(fā)布上網(wǎng)。

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

面試題到此為止，你是否能夠?qū)Υ鹑缌髂?，仔細想一下，然后在翻頁看一下答案?/p>

#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優(yōu)化布局

提示：

也許，我們其他的布局也會用到這個放大的效果哦。

可以使用任何開源代碼，包括曾經(jīng)你自己寫的。

關(guān)鍵字：javascript、封裝、復(fù)用

慚愧啊，用上邊那個布局我怎么也沒把它優(yōu)化出來，硬這頭皮用絕對定位改了布局；

所以樣式改成了這樣：

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 要考慮封裝、復(fù)用

function zoom(id,x,y){ // 設(shè)置縮放函數(shù)參數(shù)：容器id、橫向縮放倍數(shù)、縱向縮放倍數(shù)（等比例縮放時也可以設(shè)定一個參數(shù)）  
var obj=document.getElementById(id); // 獲取元素對象值  
var dW=obj.clientWidth; // 獲取元素寬度  
var dH=obj.clientHeight; // 獲取元素高度  
//var oTop=obj.offsetTop;  
//var oLeft=obj.offsetLeft;  
obj.onmouseover=function(){ // 鼠標(biāo)移入  
this.style.width=dW*x+"px"; // 橫向縮放  
this.style.height=dH*y+"px"; // 縱向縮放  
this.style.backgroundColor="#f00″; // 設(shè)置調(diào)試背景  
this.style.zIndex=1; // 設(shè)置z軸優(yōu)先  
}  
obj.onmouseout=function(){ // 鼠標(biāo)移出，設(shè)回默認(rèn)值  
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代碼沒有放在頁面的后面，加載速度慢尚未顯示出來?；蛘呤琼撁娴刂烦鲥e了。

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