css面试题——九宫格
逛博客时看到一css面试题,感觉还是比较经典的,所以动手做了一下
来自一淘的 WEB 前端的面试题,题目要求如下:
使用 HTML+CSS 实现如图布局,border-width:5px,格子大小是 50px*50px,hover时边框变成红色,需要考虑 IE6+ 和语义化的结构。
题目不难,主要还是考察面试者对 CSS 灵活运用程度。
查看Demo:
http://sandbox.runjs.cn/show/no0kubon
结构:
<ul class="box"> <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{background:#fff;} body,ul,li,a{margin: 0px;padding: 0px;} .box{width:165px;height:165px;margin:0 auto;} .box li{float:left;list-style:none;} .box a{display:inline-block;width:50px;height:50px;border:5px solid blue;line-height:50px;text-align:center;text-decoration:none;margin:-0 0 -5px -5px;position:relative;} .box a:hover{border-color:red; z-index:1;}
在雨夜带刀的博客逛到的题目