CSS实现页面九宫格布局的简单示范

一、效果图：

三、布局二（各浏览器兼容性良好）

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12. body{margin:0;padding:0;}   
13. .grid_wrapper{   
14.  width: 170px;   
15.  height: 170px;   
16.  margin-left: auto;   
17.  margin-right: auto;   
18. }   
19. .grid{   
20.  margin-left: 5px;   
21.  margin-top: 5px;   
22. }   
23. .grid:after{   
24.  content: ".";   
25.  display: block;   
26.  line-height: 0;   
27.  height: 0;   
28.  clear: both;   
29.  visibility: hidden;   
30.  overflow: hidden;   
31. }   
32. .grid a,.grid a:visited{   
33.  float: left;   
34.  display: inline;   
35.  border: 5px solid #ccc;   
36.  width: 50px;   
37.  height: 50px;   
38.  text-align: center;   
39.  line-height: 50px;   
40.  margin-left: -5px;   
41.  margin-top: -5px;   
42.  position: relative;   
43.  z-index: 1;   
44. }   
45. .grid a:hover{   
46.  border-color: #f00;   
47.  z-index: 2;   
48. }   
49.   
50.   
51.   
52. "grid_wrapper">   
53.  "grid">   
54.   "#" title="1">1   
55.   "#" title="2">2   
56.   "#" title="3">3   
57.   "#" title="4">4   
58.   "#" title="5">5   
59.   "#" title="6">6   
60.   "#" title="7">7   
61.   "#" title="8">8   
62.   "#" title="9">9   
63.     
64.   
65.   
66.   
67.   

IE6下兼容有问题，效果图如下：

三、布局二（各浏览器兼容性良好）

1.   
2.   
3.   
4.   
5.   
6.   
7.   
8.   
9.   
10.   
11.   
12. body,ul,li{margin:0;padding:0;}   
13. .grid_wrapper{   
14.  width: 170px;   
15.  height: 170px;   
16.  margin-left: auto;   
17.  margin-right: auto;   
18. }   
19. .grid{   
20.  margin-left: 5px;   
21.  margin-top: 5px;   
22.  list-style-type:none;   
23. }   
24. .grid:after{   
25.  content: ".";   
26.  display: block;   
27.  line-height: 0;   
28.  width:0;   
29.  height: 0;   
30.  clear: both;   
31.  visibility: hidden;   
32.  overflow: hidden;   
33. }   
34. .grid li{float:left;line-height: 50px;}   
35. .grid li a,.grid li a:visited{   
36.  display:block;   
37.  border: 5px solid #ccc;   
38.  width: 50px;   
39.  height: 50px;   
40.  text-align: center;   
41.  margin-left: -5px;   
42.  margin-top: -5px;   
43.  position: relative;   
44.  z-index: 1;   
45. }   
46. .grid li a:hover{   
47.  border-color: #f00;   
48.  z-index: 2;   
49. }   
50.   
51.   
52.   
53. "grid_wrapper">   
54.     
55.   
56. "#" title="1">1
  
57.   
58. "#" title="2">2
  
59.   
60. "#" title="3">3
  
61.   
62. "#" title="4">4
  
63.   
64. "#" title="5">5
  
65.   
66. "#" title="6">6
  
67.   
68. "#" title="7">7
  
69.   
70. "#" title="8">8
  
71.   
72. "#" title="9">9
  
73.     
74.   
75.   
76.