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

本身考察的知识点并不复杂,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

CSS九宫格带边框的多种实现的更多相关文章

  1. css挤带边框的三角

    <!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...

  2. 利用css制作带边框的小三角

    标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

  3. css实现带边框的冒泡提示框

    需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...

  4. css写带边框的三角形

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  5. css实现带箭头选项卡

    这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...

  6. Android自定义控件 -- 带边框的TextView

    使用xml实现边框 原来使用带边框的TextView时一般都是用XML定义来完成,在drawable目录中定义如下所示的xml文件: <?xml version="1.0" ...

  7. 纯css写带小三角对话框

    在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

  8. 使用纯CSS实现带箭头的提示框

    爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...

  9. CSS导航菜单水平居中的多种方法

    CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

  1. ucore操作系统学习笔记(二) ucore lab2物理内存管理分析

    一.lab2物理内存管理介绍 操作系统的一个主要职责是管理硬件资源,并向应用程序提供具有良好抽象的接口来使用这些资源. 而内存作为重要的计算机硬件资源,也必然需要被操作系统统一的管理.最初没有操作系统 ...

  2. SQL Server语法入门

    1.说明:增加.删除一个列 Alter table tablename add columnName col type alter table tablename drop columnName co ...

  3. BUUCTF-misc九连环 详解

    这个没什么玄学,我们解压出来一张照片,放到hxd中搂一眼,最后结尾的那几行中看到了zip压缩包的结尾标识符,难道这里面还有压缩包,于是我们就formostlrb 果然有图片有压缩包 我们打开压缩包看到 ...

  4. 【最大匹配+二分答案】POJ 3057 Evacuation

    题目大意 POJ链接 有一个\(X×Y\)的房间,X代表墙壁,D是门,.代表人.这个房间着火了,人要跑出去,但是每一个时间点只有一个人可以从门出去. 问最后一个人逃出去的最短时间,如果不能逃出去,输出 ...

  5. switch host 切换本地host

    百度网盘提取地址 提取码: 753r 下载后放到软件目录即可使用

  6. 第六章 Linux系统之文件管理

    一.文件管理概述 1.对文件做些什么? 谈到Linux文件管理,首先我们需要了解的就是,我们要对文件做些什么事情? 其实无非就是对一个文件进行创建.复制.移动.查看.编辑.压缩.查找.删除等等 2.内 ...

  7. 第五章 Linux操作系统关机、重启、注销及其查看ip命令

    一.更新系统时间与网络时间同步 1.  安装ntpdate工具 # yum -y install ntp ntpdate 2.  设置系统时间与网络时间同步 # ntpdate cn.pool.ntp ...

  8. 【认知服务 Azure Cognitive Service】使用认知服务的密钥无法访问语音服务[ErrorCode=AuthenticationFailure] (2020-08时的遇见的问题,2020-09月已解决)

    问题情形 根据微软认知服务的文档介绍,创建认知服务(Cognitive Service)后,可以调用微软的影像(计算机视觉,人脸),语言(LUIS, 文本分析,文本翻译),语音(文本转语音,语音转文本 ...

  9. B站弹幕爬取

    B站弹幕爬取 单个视频弹幕的爬取 ​ B站弹幕都是以xml文件的形式存在的,而xml文件的请求地址是如下形式: http://comment.bilibili.com/233182992.xml ​ ...

  10. Helium文档12-WebUI自动化-go_to在当前的Web浏览器窗口中打开指定的URL

    前言 go_to在当前的Web浏览器窗口中打开指定的URL 入参介绍 url def go_to(url): """ :param url: URL to open. : ...