Web前端開發面試題賦答案，web前端試題賦

Web前端開發面試題賦答案，web前端試題賦

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