[原创]淘宝面试题 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>

 

posted @ 2015-04-02 18:03  杨博客  阅读(380)  评论(0)    收藏  举报