<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style type="text/css">
body,ul{margin: 0;padding: 0}
li{list-style: none;}
.box{width: 400px;height: 500px;margin: 100px auto;}
.clear{*zoom:1;}
.clear:after{content: "";display: block;clear: both;}
.box li{float: left;}
.box li a{width:100px; height:100px; line-height:100px;text-decoration: none; text-align:center;border:5px solid #aaa;display:block; margin:0 0 -5px -5px; color:black; font-size:30px;position:relative; z-index:1;}
.box li a:hover{ border:5px solid red; z-index:2;}
</style>
</head>
<body>
<ul class="box clear">
<li><a href="#">1</a></li>
<li><a href="#">2</a></li>
<li><a href="#">3</a></li>
<li><a href="#">4</a></li>
<li><a href="#">5</a></li>
<li><a href="#">6</a></li>
<li><a href="#">7</a></li>
<li><a href="#">8</a></li>
<li><a href="#">9</a></li>
</ul>
</body>
</html>
原文：http://www.cnblogs.com/ZL8655/p/5402300.html