CSS九宫格带边框的多种实现

九宫格,每个单元格滑动上去显示完整边框。

本身考察的知识点并不复杂,margin负值的遮挡,以及流布局中relative的超越。

代码固定部分是这样的,

<div>
 <div>1</div>
 <div>2</div>
 <div>3</div>
 <div>4</div>
 <div>5.0</div>
 <div>6</div>
 <div>7</div>
 <div>8</div>   
 <div>9</div>      
</div>

有四个场景,

1.兼容较新浏览器,不能改html结构,利用CSS3,   里面我用到了nth-child  http://jsbin.com/exuKuXI/3  兼容IE9+

2.兼容所有浏览器,可以改html结构,可以使用浮动   http://jsbin.com/uTOQEVO/3

3.兼容所有浏览器,可以改html结构,不允许使用浮动   http://jsbin.com/IvopIxi/40

4.兼容所有浏览器,不能改html结构,可以使用js  http://jsbin.com/ESELAQU/6

 

posted @ 2013-09-24 10:04  web 的世界  阅读(2178)  评论(0编辑  收藏  举报