游客

标题:面试题：css九宫格 兼容IE6 考虑语义化的结构
正文:
网上疯传了一道css面试题，题目是这样的：9个元素，每个50*50px，排成九宫格默认是border颜色为blue，hover到格子上变成red（兼容到IE6，考虑语义化的结构）css效果这道题目的重点和难点在于hover时候的效果，观察会发现相邻的两个格子需要共享同一条边。* 拿到这道题目，首先想到的是用绝对定位来做 * 显而易见，我们需要一个大的div来作为容器 * 那么9个格子如果都相对于这个div定位的话，就太繁琐了 * 观察这个九宫格，其实不难想到，对于每个格子，我们可以创建两个元素，a和span,用a来做span的容器， 只需要span相对于a来定位就可以了，这样只需要设置一个统一的样式，而不必单独为 每一个格子设置样式。思路有了，接下来就是代码的尝试了JiuGongGe.htmlhtml:<div id="main"> <a href="#"> <span class="bgcolor">1</span> </a> <a href="#"> <span class="bgcolor">2</span> </a> <a href="#"> <span class="bgcolor">3</span> </a> <a href="#"> <span class="bgcolor">4</span> </a> <a href="#"> <span class="bgcolor">5</span> </a> <a href="#"> <span class="bgcolor">6</span> </a> <a href="#"> <span class=
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页