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

2020-11-27 来源：赴品旅游

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

一、效果图：
2016627113915155.jpg (175×173)

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

CSS Code复制内容到剪贴板

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>九宫格布局</title> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
</head> 
<body> 
<html> 
<head> 
<style type="text/css"> 
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; 
} 
</style> 
</head> 
<body> 
<p class="grid_wrapper"> 
 <p class="grid"> 
 <a href="#" title="1">1</a> 
 <a href="#" title="2">2</a> 
 <a href="#" title="3">3</a> 
 <a href="#" title="4">4</a> 
 <a href="#" title="5">5</a> 
 <a href="#" title="6">6</a> 
 <a href="#" title="7">7</a> 
 <a href="#" title="8">8</a> 
 <a href="#" title="9">9</a> 
 </p> 
</p> 
</body> 
</html>

IE6下兼容有问题，效果图如下：
2016627114120994.jpg (175×228)

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

CSS Code复制内容到剪贴板

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>九宫格布局</title> 
<meta http-equiv="X-UA-Compatible" content="IE=edge"> 
</head> 
<body> 
<html> 
<head> 
<style type="text/css"> 
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; 
} 
</style> 
</head> 
<body> 
<p class="grid_wrapper"> 
 <ul class="grid"> 
 <li><a href="#" title="1">1</a></li> 
 <li><a href="#" title="2">2</a></li> 
 <li><a href="#" title="3">3</a></li> 
 <li><a href="#" title="4">4</a></li> 
 <li><a href="#" title="5">5</a></li> 
 <li><a href="#" title="6">6</a></li> 
 <li><a href="#" title="7">7</a></li> 
 <li><a href="#" title="8">8</a></li> 
 <li><a href="#" title="9">9</a></li> 
 </ul> 
</p> 
</body> 
</html>

显示全文

全部栏目

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