[原创]淘宝面试题 float实现三个div布局
1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 3 <html xmlns="http://www.w3.org/1999/xhtml"> 4 <head> 5 <title></title> 6 <style type="text/css"> 7 div { 8 background: #CCCCCC; 9 } 10 11 #first { 12 width: 100px; 13 height: 150px; 14 float: left;/* 设置float,为了是让后面呗=被float影响的#third div也能和他到一行 */ 15 } 16 17 #second { 18 clear: both; /* 先清除上面float的影响,如果不清除则这个div不会另起一行 */ 19 float: left;/* 设置float 影响下一行*/ 20 margin-top: 10px; 21 width: 100px; 22 height: 150px; 23 24 } 25 26 #third {/* 没有设置float 被影响,向上一直找到没有不被float影响的地方,#sencond影响他, #first也影响他*/ 27 width: 200px; 28 margin-left: 110px; 29 _margin-left: 107px; 30 height: 310px; 31 32 } 33 /* */ 34 </style> 35 </head> 36 <body> 37 <div id="first">div1</div> 38 <div id="second">div2</div> 39 <div id="third">div3</div> 40 41 <script type="text/javascript"> 42 // first div变大的时候,会将second div向下挤,所以要想会将second idv不动,还是需要绝对定位 43 window.onload = function () { 44 function zoom(id, x, y) { // 设置缩放函数参数:容器id、横向缩放倍数、纵向缩放倍数(等比例缩放时也可以设定一个参数) 45 debugger; 46 var obj = document.getElementById(id); // 获取元素对象值 47 var dW = obj.clientWidth; // 获取元素宽度 48 var dH = obj.clientHeight; // 获取元素高度 49 //var oTop=obj.offsetTop; 50 //var oLeft=obj.offsetLeft; 51 obj.onmouseover = function () { // 鼠标移入 52 this.style.width = dW * x + "px"; // 横向缩放 53 this.style.height = dH * y + "px"; // 纵向缩放 54 this.style.backgroundColor = "#f00"; // 设置调试背景 55 this.style.zIndex = 1; // 设置z轴优先 56 } 57 obj.onmouseout = function () { // 鼠标移出,设回默认值 58 this.style.width = ""; 59 this.style.height = ""; 60 this.style.padding = ""; 61 this.style.backgroundColor = ""; 62 this.style.zIndex = ""; 63 } 64 } 65 zoom("first", 1.25, 1.25); 66 zoom("second", 1.25, 1.25); 67 zoom("third", 1.25, 1.25); 68 69 } 70 71 </script> 72 </body> 73 </html>