六月 | 2013 | 刘晓帆的博客

据说业界比较有名气的司徒正美被这道题给难住了。来自一淘的 WEB 前端的面试题，题目要求如下：
使用 HTML+CSS 实现如图布局，border-width:5px，格子大小是 50px*50px，hover时边框变成红色，需要考虑 IE6+ 和语义化的结构。
题目不难，主要还是考察面试者对 CSS 灵活运用程度。

下面是我写的方法，欢迎参考~

<html> <head> <style type="text/css"> * { padding: 0; margin: 0; } body { text-align: center; } div { width: 170px; margin: 100px auto; } a { float: left; width: 50px; height: 50px; border: solid 5px #000; display: block; line-height: 50px; _line-height: 40px; text-align: center; margin: 0 -5px -5px 0; z-index: 1; position: relative; } a:hover { border-color: red; z-index: 2; } </style> </head> <body> <div> <a href="#">11</a> <a href="#">2</a> <a href="#">3</a> <a href="#">4</a> <a href="#">5</a> <a href="#">6</a> <a href="#">7</a> <a href="#">8</a> <a href="#">9</a> </div> </body> </html>

提示：你可以先修改部分代码再运行。

刘晓帆的博客

Monthly Archives: 六月 2013
Home / 2013 / 六月

Js字符串操作函数大全(含正则)

concat

九宫格布局