<!DOCTYPE html>
<html>
<head>
<title>九宫格</title>
<meta http-equiv="content-Type" content="text/html;charset=utf-8">
</head>
<body>
<html>
<head>
<style type="text/css">
body,ul,li{margin:0;padding:0;}
ul{
margin:10px auto;
width:170px;
height:170px;
list-style-type:none;
}
li{float:left;line-height: 50px;}
li a,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;
}
li a:hover{
border-color: #f00;
z-index: 2;
}
</style>
</head>
<body>
<ul>
<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/jiaxin/p/6574672.html