游客

标题:css九宫格 用负margin使元素的border叠加
正文:
上次一个九宫格的面试题，点击这里，本文是对九宫格另外的实现方法的探讨。9个元素，每个50*50px，排成九宫格默认是border颜色为blue，hover到格子上变成red（兼容到IE6）题目的关键是解决“公用边”，上次我主要做了两个方面的尝试：* 用负margin使元素的border叠加* 用table的border-collapse实现边框合并这一次的思路则更加简明，也是个人认为是更好的方法。感谢 如果不用border，怎么实现hover后，格子四周变红呢？那肯定是两个dom嵌套在一起，一大一小，小的dom作为“格子”，大的dom作为格子的红色“边框”。先看我初始化的一个格子设定： html：<div id="test"> <a href="#"><div>1</div></a></div>初始css:#test div{ width: 50px; line-height: 50px; text-align:center; background: #AAA;}#test a{ width: 55px; line-height: 55px; float: left;}#test a:hover{ background: red;}由于a标签设置了宽度为55px，div标签设置了宽度为50px，这时候格子hover看起来只露出了右边的5px红色部分。接下来，div添加属性margin-top:5px;margin-right:5px，这时可以显示上部的5px边框。再接着，在div的容器，也就是a标签设置padding-left:5px;padding-bottom:5px;，使格子左边框和下边框都显示出来。那么为什么要将a标签设置为55px，再进行一系列关于margin和padding的设置呢，原因我们最后再说。因此修改后的css为：#test div{ width: 50px; line-height: 50px; text-align:center; background: #AAA; margin-right:5px; margin-top:5px;}#
[<<][[1]][2][3][>>]

查看评论(0)
发表评论



首页