一淘九宫格的面试题

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4 <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5 <title>一淘九宫格的面试题</title>
 6 </head>
 7 <style>
 8     *{ margin:0; padding:0;}
 9     .box,.box2{ width:190px; margin:100px auto;}
10     /*----------------float：left--------------------*/
11     .box li{ float:left; list-style:none;}
12     .box li a{ float:left; border:5px solid blue; width:50px; height:50px; margin-left:-5px; margin-top:-5px; position:relative;}
13    .box li a:hover{ border:5px solid red; z-index:2; }
14    /*-----------采用display：inline-block-------------*/
15     .box2{ clear:both; padding-top:100px;font-size:0;}
16    .box2 li{ display:inline-block; *display:inline; *zoom:1;}
17    .box2 li a{ display:inline-block; border:5px solid blue; width:50px; height:50px; margin-left:-5px; margin-top:-5px; position:relative; font-size:12px;}
18    .box2 li a:hover{ border:5px solid red; z-index:2; }
19 </style>
20 <body>
21     <div class="box">
22         <ul>
23           <li><a href="#">1</a></li>
24           <li><a href="#">2</a></li>
25           <li><a href="#">3</a></li>
26           <li><a href="#">4</a></li>
27           <li><a href="#">5</a></li>
28           <li><a href="#">6</a></li>
29           <li><a href="#">7</a></li>
30           <li><a href="#">8</a></li>
31           <li><a href="#">9</a></li>
32         </ul>
33     </div>
34     <div class="box2">
35         <ul>
36           <li><a href="#">1</a></li>
37           <li><a href="#">2</a></li>
38           <li><a href="#">3</a></li>
39           <li><a href="#">4</a></li>
40           <li><a href="#">5</a></li>
41           <li><a href="#">6</a></li>
42           <li><a href="#">7</a></li>
43           <li><a href="#">8</a></li>
44           <li><a href="#">9</a></li>
45         </ul>
46     </div>
47 </body>
48 </html>
posted on 2013-09-23 17:37 仙梦之飘阅读(824) 评论(3) 编辑收藏举报