今天在一QQ群里看到一道面试题，感觉比较有意思，于是做着试了试，感觉很不错，题目如下：
题目要求：
使用 HTML+CSS 实现如下图布局，border-width是5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构）
我是这样做的：
html代码：
|
1
2
3
4
5
6
7
8
9
10
11
|
|
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号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有