频道栏目
首页 > 程序开发 > Web开发 > PHP教程 > PHP面试题 > 正文
一道九宫格面试题
2016-01-06 17:41:56      个评论      
收藏   我要投稿

一道九宫格面试题

今天在一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;}
点击复制链接 与好友分享!回本站首页
相关TAG标签 九宫 一道
上一篇:PHP面试任务:一周计算
下一篇:PHP精编面试题–PHP面试宝典
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训

版权所有: 红黑联盟--致力于做实用的IT技术学习网站