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>