前端小练习——九宫格布局

相关介绍：

最近在仿天猫官网，如下图这是一张列表页中的一部分效果，正常情况下边框是灰色的，鼠标移动到小盒子上时其边框变红。

动态效果图是这样的：

刚开始觉得很容易实现，等到自己写样式的时候发现，右边和下边边框会被后一个盒子覆盖住了。抓耳挠腮之际，觉得这个效果好像见过，但是一时想不起来。昨晚睡觉的时候，也一直在想这个事情，边框被挡住了？边框被挡住了？…..怎么让边框显示出来呢？…..，想着想着后面想到了z-index这个属性。鼠标滑过对应的盒子，改变其z-index不就可以了吗？这样的话就需要用到绝对定位、相对定位了。
后面又想起来这东西的原型不就是九宫格吗？虽然这是比较入门的东西，但说来惭愧，自己学了这么久，还不曾写过这个小demo。既然这次遇到了，不如就动手写写吧！
效果图：

注：

1. 这里没有考虑语义化，可以用li标签包裹a标签
2. 没有用display: inline-block; 因为此属性在IE6/7下无效，此处用浮动。如果用的话需要去除空格（要用到font-size：0，增加了代码）
3. 又此处最大的盒子设置了高度，此处也不需要清浮动。

代码如下：

方法一：（绝对定位，在盒子外再包裹一个盒子span）

这里是HTML：
<div class="wrap">
    <span><a href="#">1</a></span>
    <span><a href="#">2</a></span>
    <span><a href="#">3</a></span>
    <span><a href="#">4</a></span>
    <span><a href="#">5</a></span>
    <span><a href="#">6</a></span>
    <span><a href="#">7</a></span>
    <span><a href="#">8</a></span>
    <span><a href="#">9</a></span>
</div>

这里是CSS：
* {
    margin: 0;
    padding: 0;
}
.wrap {
    background: #ccc;
    width: 330px;
    height: 330px;
    margin: 30px auto; //可写可不写，只是方便在浏览器中查看
}
.wrap span {
    position: relative;
    float: left;
    width: 100px;
    height: 100px;
    background: #fff;
    margin: 0 -10px -10px 0;  //负边距加大元素右边和下边宽度
    border: 10px solid #ccc;
}
.wrap span a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
    line-height: 100px;
    font-size: 20px;
    border: 10px solid #ccc;
    text-align: center; 
    margin: -10px 0 0 -10px; //负边距将a往上、往左拉
}
.wrap span a:hover {
    z-index: 2;
    border: 10px solid red;
    background: yellow;
}

做完之后，觉得前面a标签多添加了一层盒子，比较麻烦，想把span标签去掉，如下方法二：

---

---

方法二：（相对定位）

这里是HTML：

<div class="wrap">
    <a href="#">1</a>
    <a href="#">2</a>
    <a href="#">3</a>
    <a href="#">4</a>
    <a href="#">5</a>
    <a href="#">6</a>
    <a href="#">7</a>
    <a href="#">8</a>
    <a href="#">9</a>
</div>

这里是CSS：

    * {
        margin: 0;
        padding: 0;
    }
    .wrap {
        background: #ccc;
        width: 330px;
        height: 330px;
        margin: 30px auto;
    }

    .wrap a {
        float: left;
        width: 100px;
        height: 100px;
        line-height: 100px;
        background: #fff;
        font-size: 20px;
        text-align: center;
        border: 10px solid #ccc;
        margin: -10px 0 0 -10px;
    }
    .wrap a:hover {
        position: relative;
        border: 10px solid red;
        background: yellow;
    }

---

EOF