作者：雨霖铃111130 | 来源：互联网 | 2013-07-25 10:39
今天在一QQ群里看到一道面试题，感觉比较有意思，于是做着试了试，感觉很不错，题目如下：
题目要求：
使用 HTML+CSS 实现如下图布局，border-width是5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
我是这样做的：
html代码：
css代码：
|
1
2
3
4
5
6
|
* {margin:0;padding:0;}
.box {margin:50pxauto;width:170px;height:170px;}
.box {list-style:none;}
.box li {float:left;}
.box li a{display:block;position:relative;width:50px;height:50px;border:5pxsolid#00f;margin:-5px00-5px;text-align:center;line-height:50px;color:#090;text-decoration:none;}
.box li a:hover {border-color:#f00;z-index:1;}
|
京公网安备 11010802041100号