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

九宫格布局在制作一些Web App时还是经常可以用到的,这里我们以一个大概的结构示例来作CSS实现页面九宫格布局的简单示范,不过需要注意IE6下的兼容性问题.

一、效果图：

三、布局二(各浏览器兼容性良好)

CSS Code复制内容到剪贴板

九宫格布局

body{margin:0;padding:0;}

.grid_wrapper{

width: 170px;

height: 170px;

margin-left: auto;

margin-right: auto;

}

.grid{

margin-left: 5px;

margin-top: 5px;

}

.grid:after{

content: ".";

display: block;

line-height: 0;

height: 0;

clear: both;

visibility: hidden;

overflow: hidden;

}

.grid a,.grid a:visited{

float: left;

display: inline;

border: 5px solid #ccc;

width: 50px;

height: 50px;

text-align: center;

line-height: 50px;

margin-left: -5px;

margin-top: -5px;

position: relative;

z-index: 1;

}

.grid a:hover{

border-color: #f00;

z-index: 2;

}

1

2

3

4

5

6

7

8

9

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

三、布局二(各浏览器兼容性良好)

CSS Code复制内容到剪贴板

九宫格布局

body,ul,li{margin:0;padding:0;}

.grid_wrapper{

width: 170px;

height: 170px;

margin-left: auto;

margin-right: auto;

}

.grid{

margin-left: 5px;

margin-top: 5px;

list-style-type:none;

}

.grid:after{

content: ".";

display: block;

line-height: 0;

width:0;

height: 0;

clear: both;

visibility: hidden;

overflow: hidden;

}

.grid li{float:left;line-height: 50px;}

.grid li a,.grid li a:visited{

display:block;

border: 5px solid #ccc;

width: 50px;

height: 50px;

text-align: center;

margin-left: -5px;

margin-top: -5px;

position: relative;

z-index: 1;

}

.grid li a:hover{

border-color: #f00;

z-index: 2;

}

• 1
• 2
• 3
• 4
• 5
• 6
• 7
• 8
• 9

相关推荐：