css面试题——九宫格

逛博客时看到一css面试题，感觉还是比较经典的，所以动手做了一下

来自一淘的 WEB 前端的面试题，题目要求如下：

使用 HTML+CSS 实现如图布局，border-5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。

题目不难，主要还是考察面试者对 CSS 灵活运用程度。

查看Demo:

http://sandbox.runjs.cn/show/no0kubon

结构：

    <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>

样式：

    body{background:#fff;}
    body,ul,li,a{margin: 0px;padding: 0px;}
    .box{width:165px;height:165px;margin:0 auto;}
    .box li{float:left;list-style:none;}
    .box a{display:inline-block;width:50px;height:50px;border:5px solid blue;line-height:50px;text-align:center;text-decoration:none;margin:-0 0 -5px -5px;position:relative;}
    .box a:hover{border-color:red; z-index:1;}

在雨夜带刀的博客逛到的题目

http://stylechen.com/jiugongge.html