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

本身考察的知识点并不复杂,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. Linux nginx 安装 启动

    nginx下载地址:https://nginx.org/download/ ## 解压 tar -zxvf nginx-1.9.9.tar.gz ##进入nginx目录 cd nginx-1.9.9 ...

  2. 多测师_高级肖sir分享pycharm中设置主题和设置代码颜色方法

    一.修改pycharm中的主题颜色 二.修改代码颜色 File-->Settings-->Editor--> Color Scheme-->Language Defaults- ...

  3. day06 Pyhton学习

    一.昨日内容回顾 字典: 由{}表示,内部存储key:value 要求: key不能重复 key必须可哈希.不可变 value没有限制 没有索引和切片 增删改查 新增: dic.[新key]=valu ...

  4. Spring Boot 系列:日志动态配置详解

    世界上最快的捷径,就是脚踏实地,本文已收录架构技术专栏关注这个喜欢分享的地方. 开源项目: 分布式监控(Gitee GVP最有价值开源项目 ):https://gitee.com/sanjianket ...

  5. form中的标签例子

    <form action="dreamdu.php" method="post" id="dreamduform"> <f ...

  6. spring boot:使用caffeine+redis做二级缓存(spring boot 2.3.1)

    一,为什么要使用二级缓存? 我们通常会使用caffeine做本地缓存(或者叫做进程内缓存), 它的优点是速度快,操作方便,缺点是不方便管理,不方便扩展 而通常会使用redis作为分布式缓存, 它的优点 ...

  7. centOS7永久关闭防火墙(防火墙的基本使用(转)

    查看防火墙状态: systemctl status firewalld.service 如图 绿的running表示防火墙开启 执行关闭命令: systemctl stop firewalld.ser ...

  8. Linux文件元数据和节点表结构

    文件元数据 一块硬盘的分区可以认为有两部分组成,保存元数据的成为节点表,用来保存属性等. 元数据中有个小指针,指向数据存放的实际空间. 元数据(Metadata) 又称中介数据.中继数据,为描述数据的 ...

  9. 小白也能看懂的JVM内存区域

    前言 最近在准备面试题刷到了JVM这块,作为一个小白,巩固知识点最好的方式就是亲手写出来并分享:相信我的理解,同样是小白的你,一定有很大的帮助.不信,请你往下看! JVM内存区域简介 如果有人问Jav ...

  10. Java nio Client端简单示例

    java nio是一种基于Channel.Selector.Buffer的技术,它是一种非阻塞的IO实现方式 以下Client端示例 public class ClientNio { public s ...