首页 > 前端 > 【面试题】一淘关于九宫格面试题

【面试题】一淘关于九宫格面试题

这是我在群里看见的一道一淘面试题，初看挺简单，实际上还是有点小坑的，下面就来分析下。

 原题分析

首先是九宫格布局，这个很简单，用 float 就能实现，每个块宽高 50px。

然后就是每个块的边框实现，这里有两种方案，一种就是 border，不过块的宽度要相应的减少，因为 IE6 不支持 box-sizing；另外一种就是用 background-image，用背景图去模拟 border。

还有就是边框融合，可以用 margin 应用负值来实现。

最后就是悬停变色，大家的想法一样，用 hover。但是！IE6 中只有 a 标签支持！所以，我们要用 a 标签实现。

其中还有一个注意点，就是 hover 时，元素被覆盖问题。这个也很简单，hover 时应用 z-index 即可。 

实现源码（DEMO_0、DEMO_1 IETester 测试通过）

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		ul {
			list-style: none;
			width: 150px;
			height: 150px;
		}

		a {
			float: left;
			width: 50px;
			height: 50px;
			margin: 0 -5px -5px 0;
			background-image: url("./blue.png");
		}
		a:hover {
			position: relative;
			background-image: url("./red.png");
			background-repeat: no-repeat;
			z-index: 999;
		}
	</style>
</head>
<body>
	<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>
</body>
</html>