兩道web前端工程師的面試題
阿新 • • 發佈:2019-02-03
1. 用 CSS 實現佈局
讓我們一起來做一個頁面
首先,我們需要一個佈局。
請使用 CSS 控制 3 個 div,實現如下圖的佈局。
這題不難,在平時專案開發過程中也經常會碰到:
主要考慮幾個問題: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}
- <div id=“first”></div>
- <divid=“second”></div>
- <divid=“third”></div>
2. 用 javascript 優化佈局
由於我們的使用者群喜歡放大看頁面
於是我們給上一題的佈局做一次優化。
當滑鼠略過某個區塊的時候,該區塊會放大25%,
並且其他的區塊仍然固定不動。
提示:
也許,我們其他的佈局也會用到這個放大的效果哦。
可以使用任何開原始碼,包括曾經你自己寫的。
關鍵字:javascript、封裝、複用
慚愧啊,用上邊那個佈局我怎麼也沒把它優化出來,硬這頭皮用絕對定位改了佈局;
所以樣式改成了這樣
CSS程式碼- body{ margin:0; padding:0}
- div{background:#CCCCCC; position:absolute}
- #first{width:100px; height:150px}
- #second{top:160px;width:100px;height:150px}
-
#third{
javascript 要考慮封裝、複用
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);