css九宫格布局代码实例
分类：实例代码
分享一段代码实例，它实现了九宫格布局效果。
代码实例如下:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.pipipi.net/" />
<title>犀牛前端部落</title>
<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>
<div 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>
</div>
</body>
</html>