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

本身考察的知识点并不复杂,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. day26 Pyhton select功能语句实现

    一.查询语句功能实现 select id,name where age > '20' name_value = {'id':0,'name':1,'age':2,'phone':3,'job': ...

  2. C语言必踩神坑,世上本没有坑,摔的人多了,也就有了坑!

    这是一个伤心的故事,有多少小伙伴在写C语言代码时遇到过的情景! 提问:C语言中,未初始化的局部变量到底是多少? 答案往往是: 与编译器有关: 可能但不保证初始化为0: 未确定. 总之,全部都是些一本正 ...

  3. 很多人都搞不清楚C语言和C++的关系!今天我们来一探究竟为大家解惑~

    最近,身边有许多小伙伴已经开始学习编程了,但是呢,学习又会碰到许多的问题,其中作为新手小白提到最多的问题就是编程语言的选择. 每次遇到这种问题,看起来很简单,但是又有很多小伙伴搞不清编程语言之间的关系 ...

  4. 扫描仪扫描文件处理-Photoshop批处理无响应问题

    问题描述:Photoshop批处理时候卡死.卡住.无响应问题(出现在处理60M及以上TIFF文件的时候) 解决办法: 调整系统虚拟内存见<扫描-Photoshop批处理内存不足问题解决> ...

  5. kafka+zookeeper快速启动

    vim zookeeper.sh   #!/bin/bash /usr/local/zookeeper/bin/zkServer.sh restart /usr/local/zookeeper/con ...

  6. php+nginx改为socket

    使用socket方式连接Nginx优化php-fpm性能 Nginx连接fastcgi的方式有2种:TCP和unix domain socket 什么是Unix domain socket?-- 维基 ...

  7. Curl可以模拟浏览器

    curl直接访问被拒绝 [22:10:00 root@C7 ~]#curl -I www.163.com HTTP/1.1 403 Forbidden Date: Wed, 24 Jun 2020 0 ...

  8. Vue踩坑日记-This dependency was not found:element-ui.js

    该问题为在Vue启动项目时候报错找不到element-ui模块 解决办法:打开CMD 控制台 CD到项目根目录 我的目录(C:\Users\Administrator\Desktop\cms-heli ...

  9. 开机自起tomcat

    开机自启动Tomcat: 每次开机都要启动tomcat,网上看了好多都是用shell脚本来实现tomcat开机自启动,后来看到一种方法,直接修改系统文件来实现,已经实践过,方法有效. 1.修改脚本文件 ...

  10. 如何用vue实现一个矩形标记区域 rectangle marker

    代码地址:vue-rectangle-marker 一.前言 一些cms系统经常会用到区域标记功能,所以写了个用vue实现的矩形标记区域,包含拖拽.放大缩小.重置功能. 二.实现结果 初始 标记 三. ...