九宫格

使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。

 1 <!DOCTYPE HTML>
 2 <html>
 3     <head>
 4         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
 5         <title>九宫格</title>
 6         <style type="text/css">
 7             ul {
 8                 width: 165px;
 9             }
10 
11             ul li {
12                 list-style: none;
13                 float: left;
14             }
15 
16             ul li a {
17                 display: block;
18                 width: 50px;
19                 border: 5px solid #0000FF;    
20                 margin: 0 0 -5px -5px;
21                 line-height: 50px;
22                 text-align: center;    
23                 text-decoration: none;
24             }
25 
26             ul li a:hover {
27                 border-color: #FF0000;
28                 position: relative;            
29             }
30         </style>
31     </head>
32     <body>
33         <ul>
34             <li><a href="#">1</a></li>
35             <li><a href="#">2</a></li>
36             <li><a href="#">3</a></li>
37             <li><a href="#">4</a></li>
38             <li><a href="#">5</a></li>
39             <li><a href="#">6</a></li>
40             <li><a href="#">7</a></li>
41             <li><a href="#">8</a></li>
42             <li><a href="#">9</a></li>
43         </ul>
44     </body>
45 </html>

 

posted @ 2013-08-29 10:31  Bruce.Chang.Lee  阅读(228)  评论(0)    收藏  举报