一道九宫格面试题
时间:2024-01-01 08:42 来源:网络整理 作者:墨客科技 点击:次
|
今天在一QQ群里看到一道面试题，感觉比较有意思，于是做着试了试，感觉很不错，题目如下： 题目要求： 使用 HTML+CSS 实现如下图布局，border-width是5px，一个格子大小是 50*50，hover时候边框变为红色（兼容IE6+，考虑语义化的结构） 我是这样做的： html代码： <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>css代码： * {margin: 0; padding: 0;}.box {margin: 50px auto; width: 170px; height: 170px;}.box {list-style: none;}.box li {float: left;}.box li a{display: block; position: relative; width: 50px; height: 50px; border: 5px solid #00f; margin: -5px 0 0 -5px; text-align: center; line-height: 50px; color: #090; text-decoration: none;}.box li a:hover {border-color: #f00; z-index: 1;} (责任编辑：admin) |