1. 用 CSS 實現佈局

讓我們一起來做一個頁面

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

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

這題不難，在平時專案開發過程中也經常會碰到：

主要考慮幾個問題：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}    

1. <div id=“first”></div>  
2. <divid=“second”></div>
3. <divid=“third”></div>

檢視演示

2. 用 javascript 優化佈局

由於我們的使用者群喜歡放大看頁面

於是我們給上一題的佈局做一次優化。

當滑鼠略過某個區塊的時候，該區塊會放大25%，

並且其他的區塊仍然固定不動。

提示：

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

可以使用任何開原始碼，包括曾經你自己寫的。

關鍵字：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 要考慮封裝、複用

1. function zoom(id,x,y){ // 設定縮放函式引數：容器id、橫向縮放倍數、縱向縮放倍數（等比例縮放時也可以設定一個引數）   
2. var obj=document.getElementById(id); // 獲取元素物件值 
3. var dW=obj.clientWidth; // 獲取元素寬度 
4. var dH=obj.clientHeight; // 獲取元素高度 
5. //var oTop=obj.offsetTop; 
6. //var oLeft=obj.offsetLeft; 
7. obj.onmouseover=function(){ // 滑鼠移入 
8. this.style.width=dW*x+“px”; // 橫向縮放 
9. this.style.height=dH*y+“px”; // 縱向縮放 
10. this.style.backgroundColor=“#f00″; // 設定除錯背景
11. this.style.zIndex=1; // 設定z軸優先  
12. }  
13. obj.onmouseout=function(){ // 滑鼠移出，設回預設值  
14. this.style.width=”“;  
15. this.style.height=”“;  
16. this.style.padding=”“;  
17. this.style.backgroundColor=”“;  
18. this.style.zIndex=”“;  
19. }  
20. }  
21. zoom(“first“,1.25,1.25);  
22. zoom(“second“,1.25,1.25);  
23. zoom(“third”,1.25,1.25);