关于阿里面试的一个小题（推荐）

最近搜到的阿里一个面试小题要求如下：

用div+css做出如下效果：

用js做出：

当鼠标悬停在红色div上时，div放大，并且不占挤其他盒子效果如下：

代码如下

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
 2 "http://www.w3.org/TR/html4/strict.dtd">
 3 
 4 <html xmlns="http://www.w3.org/1999/xhtml" lang="en">
 5     <head>
 6         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 7         <title>阿里小笔试</title>
 8         <script type="text/javascript" src="script/jquery-1.12.2.js"></script>
 9         <style type="text/css">
10             body {
11                 padding: 0;
12                 margin: 0;
13             }
14             .small1 {
15                 box-sizing:border-box;
16                 background: #FF0000;
17                 width: 100px;
18                 height: 100px;
19                 position: relative;
20                 z-index: 1000;
21             }
22             .small2 {
23                 box-sizing:border-box;
24                 background: #008000;
25                 width: 100px;
26                 height: 100px;
27                 position:absolute;
28                 top: 100px;
29                 z-index: 100;
30             }
31             .big {
32                 box-sizing:border-box;
33                 background: #808080;
34                 width: 100px;
35                 height: 200px;
36                 position: absolute; left: 100px; top:0;
37                 top: 0px;
38                 z-index: 100;
39             }
40         </style>
41         <meta name="author" content="Administrator" />
42         <!-- Date: 2016-04-06 -->
43     </head>
44     <body>
45         <div class="small1"></div>
46         <div class="small2"></div>
47         <div class="big"></div>
48         <script type="text/javascript">
49             $(function(){
50                 $(".small1").hover(function() {
51                     $(this).css({"width":"120px","height":"120px"});
52                 }, function() {
53                     $(this).css({"width":"100px","height":"100px"});
54                 });
55             });
56         </script>
57     </body>
58 </html>

 

posted @ 2016-04-06 10:19  Arther_J  阅读(162)  评论(0)  编辑  收藏  举报