一道頁面佈局的前端面試題

用 CSS 實現佈局

讓咱們一塊兒來作一個頁面。首先，咱們須要一個佈局。
javascript

請使用 CSS 控制 3 個 div，實現以下圖的佈局。java

這題不難，在平時項目開發過程當中也常常會碰到：函數

主要考慮幾個問題：1. IE6 的 3 像素 BUG；2. 清楚浮動；佈局

代碼：優化

 
      1 
      div{background:#CCCCCC;}       
     
      2 
      #first{float:left;width:100px; height:150px}       
     
      3 
      #second{clear:left;float:left;margin-top:10px;width:100px;height:150px}      
     
      4 
      #third{zoom:1; width:200px;margin-left:110px;_margin-left:107px;height:310px}

XML/HTML代碼：this

 
      1 
      <div id="first"></div>  
     
      2 
      <div id="second"></div>  
     
      3 
      <div id="third"></div>

用 javascript 優化佈局

因爲咱們的用戶羣喜歡放大看頁面，因而咱們給上一題的佈局作一次優化。spa

當鼠標略過某個區塊的時候，該區塊會放大25%，而且其餘的區塊仍然固定不動。調試

也許，咱們其餘的佈局也會用到這個放大的效果。能夠使用任何開源代碼，包括曾經你本身寫的。code

關鍵字：javascript、封裝、複用。對象

慚愧啊，用上邊那個佈局我怎麼也沒把它優化出來，硬這頭皮用絕對定位改了佈局；

因此樣式改爲了這樣：

 
      1 
      body{ margin:0; padding:0}   
     
      2 
      div{background:#CCCCCC; position:absolute}   
     
      3 
      #first{width:100px; height:150px}   
     
      4 
      #second{top:160px;width:100px;height:150px}   
     
      5 
      #third{ width:200px; height:310px; left:110px}

javascript 要考慮封裝、複用。

JavaScript代碼：

 
      01 
      function zoom(id,x,y) 
     
      02 
      { 
     
      03 
          // 設置縮放函數參數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也能夠設定一個參數）   
     
      04 
          var obj=document.getElementById(id); // 獲取元素對象值   
     
      05 
          var dW=obj.clientWidth; // 獲取元素寬度   
     
      06 
          var dH=obj.clientHeight; // 獲取元素高度   
     
      07 
          //var oTop=obj.offsetTop;   
     
      08 
          //var oLeft=obj.offsetLeft;   
     
      09 
          obj.onmouseover=function(){ // 鼠標移入   
     
      10 
              this.style.width=dW*x+"px"; // 橫向縮放   
     
      11 
              this.style.height=dH*y+"px"; // 縱向縮放   
     
      12 
              this.style.backgroundColor="#f00″; // 設置調試背景  
     
      13 
              this.style.zIndex=1; // 設 置z軸優先  
     
      14 
          }  
     
      15 
          obj.onmouseout=function() { // 鼠標移出，設回默認值  
     
      16 
              this.style.width="";  
     
      17 
              this.style.height="";  
     
      18 
              this.style.padding="";  
     
      19 
              this.style.backgroundColor="";  
     
      20 
              this.style.zIndex="";  
     
      21 
          }  
     
      22 
      }  
     
      23 
      zoom("first",1.25,1.25);  
     
      24 
      zoom("second",1.25,1.25);  
     
      25 
      zoom("third",1.25,1.25);