布局面试题

：点上面关注免费学习前端知识！

---

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

HTML结构

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

CSS样式

ul {

    margin: 50px;

    width: 154px;

    text-align: center;

    line-height: 50px;

    list-style: none;

}

li {

    float: left;

    margin-left: -1px;

    margin-top: -1px;

}

li a {

    display: block;

    position: relative;

    width: 50px;

    height: 50px;

    border: 1px solid blue;

}

li a:hover {

    border: 1px solid red;

    z-index: 2;

}

猫卡

喵喵