<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>九宫格</title>
<style>
body{ padding: 30px;}
ul,li{ margin:0; padding: 0;}
li{list-style:none;}
.wrap{ width: 165px; height: 165px; margin:0 auto; padding: 0 0 5px 5px; overflow: hidden; background: #007ca3}
.wrap li{ width: 50px; height: 50px; line-height: 50px; margin:5px 5px 0 0; text-align: center; background: #f0f0f0; float: left; position:relative;}
.wrap li a{ width: 50px; height: 50px; display: block; text-decoration: none; color: #a90c40}
.wrap li a:hover{ border: 5px solid #dd0000; position: absolute; left: -5px; top: -5px;}
</style>
</head>
<body>
<ul class="wrap">
<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>
效果图：