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

相关介绍：

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

动态效果图是这样的：

刚开始觉得很容易实现，等到自己写样式的时候发现，右边和下边边框会被后一个盒子覆盖住了。抓耳挠腮之际，觉得这个效果好像见过，但是一时想不起来。昨晚睡觉的时候，也一直在想这个事情，边框被挡住了？边框被挡住了？…..怎么让边框显示出来呢？…..，想着想着后面想到了z-index这个属性。鼠标滑过对应的盒子，改变其z-index不就可以了吗？这样的话就需要用到绝对定位、相对定位了。

后面又想起来这东西的原型不就是九宫格吗？虽然这是比较入门的东西，但说来惭愧，自己学了这么久，还不曾写过这个小demo。既然这次遇到了，不如就动手写写吧！

效果图：

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

代码如下：

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

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