<!doctype html>
<html>
<head>
<title></title>
</head>
<body>
<style type="text/css">
dl{ 330px;padding: 10px;margin: 0 auto;text-align: center;line-height: 100px;}
dl dt{font-size: 30px;font-family: "微软雅黑"}
dl dd{float: left;display: block; 100px;height: 100px;background-color: #ccc;border: solid 10px red;margin-left: -10px;margin-bottom: -10px;}
dl dd:hover{border-color: blue;position: relative;}
</style>
<dl>
<dt>CSS九宫格</dt>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
<dd>dd</dd>
</dl>
</body>
</html>