一道九宫格面试题

今天在一QQ群里看到一道面试题，感觉比较有意思，于是做着试了试，感觉很不错，题目如下：

题目要求：

使用 HTML+CSS 实现如下图布局，border-width是5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）

我是这样做的：

html代码：

<ul class="box">    <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>

css代码：

* {margin: 0; padding: 0;}.box {margin: 50px auto; width: 170px; height: 170px;}.box {list-style: none;}.box li {float: left;}.box li a{display: block; position: relative; width: 50px; height: 50px; border: 5px solid #00f; margin: -5px 0 0 -5px; text-align: center; line-height: 50px; color: #090; text-decoration: none;}.box li a:hover {border-color: #f00; z-index: 1;}