阿里巴巴Web前端開發面試題賦答案

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

第一部分：用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代碼沒有放在頁面的後面，加載速度慢還沒有顯示出來。或者是頁面地址出錯了。