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

本身考察的知识点并不复杂,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. 实验一 HTML基本标签及文本处理

    实验一 HTML基本标签及文本处理 [实验目的] 1.掌握利用因特网进行信息游览.搜索,下载网页.图片.文字和文件: 2.对给定的网站,能指出网站的链接结构.目录结构.页面布局方式: 3.掌握HTML ...

  2. PHP代码审计03之实例化任意对象漏洞

    前言 根据红日安全写的文章,学习PHP代码审计的第三节内容,题目均来自PHP SECURITY CALENDAR 2017,讲完相关知识点,会用一道CTF题目来加深巩固.之前分别学习讲解了in_arr ...

  3. selenium环境配置学习笔记

    一 为什么进行自动化测试 缩短测试周期 避免人为出错 测试信息存储 轻易获取覆盖率 二 web/ui自动化条件和适用范围 手工测试已经完成,后期在不影响进度的前提下逐渐实现自动化 项目周期长,重复性工 ...

  4. Jenkins集成appium自动化测试(Windows篇)

    一,引入问题 自动化测试脚本绝大部分用于回归测试,这就需要制定执行策略,如每天.代码更新后.项目上线前定时执行,才能达到最好的效果,这时就需要进行Jenkins集成. 不像web UI自动化测试可以使 ...

  5. C语言入门编程需要掌握的核心要点有哪些? 为你总结了这20个!

    摘要: C语言作为编程的入门语言,学习者如何快速掌握其核心知识点,面对茫茫书海,似乎有点迷茫.为了让各位快速地掌握C语言的知识内容,在这里对相关的知识点进行了归纳. 引言 C语言精简的语法集和标准库, ...

  6. spring boot:使用redis cluster集群作为分布式session(redis 6.0.5/spring boot 2.3.1)

    一,为什么要使用分布式session? HpptSession默认使用内存来管理Session,如果将应用横向扩展将会出现Session共享问题, 所以我们在创建web集群时,把session保存到r ...

  7. 爬虫学习之-scrapy交互式命令 scrapy查看页面

    scrapy shell https:///www.baidu.com  会启动爬虫请求网页 view(response) 会在浏览器打开请求到的临时文件 response.xpath("/ ...

  8. Error:(4, 17) java: 程序包org.junit不存在

    内容:Error:(4, 17) java: 程序包org.junit不存在 场景:运行测试类的时候,IED新建一个自己的项目,并且不用maven的情况下 解决方案:File -> Projec ...

  9. 在学习python的过程中,遇到的最大的困难是什么?

    本人文科生,回顾自己近 2 年的Python 自学经历,有一些学习心得和避坑经验分享给大家,让大家在学习 Python 的过程中少走一些弯路!减少遇到不必要的学习困难! 首先,最开始最大的困难应该就是 ...

  10. Spring Cloud Alibaba Seata

    一.简介 官网地址:http://seata.io/zh-cn/ 1,概念 Seata是一款开源的分布式事务解决方案,致力于在微服务架构在提供高性能和简单一样的分布式事务服务. 2,处理过程 Tran ...