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
CSS九宫格带边框的多种实现的更多相关文章
- css挤带边框的三角
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...
- 利用css制作带边框的小三角
标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...
- css实现带边框的冒泡提示框
需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...
- css写带边框的三角形
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- css实现带箭头选项卡
这阵子在做一个web端项目中遇到一个问题,需要实现带箭头的选项卡点击可切换.起初没想太多,直接切一个向上的小箭头图片,外层div设置相同颜色的边框,再用相对定位和绝对定位.这种方法是可行的,但是因为手 ...
- Android自定义控件 -- 带边框的TextView
使用xml实现边框 原来使用带边框的TextView时一般都是用XML定义来完成,在drawable目录中定义如下所示的xml文件: <?xml version="1.0" ...
- 纯css写带小三角对话框
在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...
- 使用纯CSS实现带箭头的提示框
爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 <!DOCTYPE html> < ...
- CSS导航菜单水平居中的多种方法
CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...
随机推荐
- Apache Hudi与Apache Flink集成
感谢王祥虎@wangxianghu 投稿 Apache Hudi是由Uber开发并开源的数据湖框架,它于2019年1月进入Apache孵化器孵化,次年5月份顺利毕业晋升为Apache顶级项目.是当前最 ...
- install Wine + WeChat in Fedora 31
install Wine + WeChat in Fedora 31 dnf -y install dnf-plugins-core dnf config-manager --add-repo htt ...
- 炉石传说酒馆战棋一键拔线(windows)
小编的业余游戏之一<炉石传说>,这里分享的是现在很火的游戏拔线(跳过约20秒的战斗动画),用夜吹的话说,注意,不是"日你大坝",是"整活",哈哈.小 ...
- linux的pci驱动模型
做个笔记 linux通过pcibios_scan_root函数以深度优先的算法搜索整个pci架构,建立一个树形的链表,如下: 之后再调用pci_bus_add_devices函数把所有搜索到的pci_ ...
- 【linux-centos】安装ifstat!
1.卸载原装ifstat find / -name *ifstat* 把/usr/sbin/ifstat.ifstat的man目录的.gz文件删除 2.下载安装 wget http://gael.ro ...
- 联赛%你测试10T2:漫无止境的八月
题意: 思路: 有几个特殊的性质: 在不考虑q里面的单点修改,我们先只判断一个序列是否Yes. 我们注意到每次操作都是对一个长度为k的区间进行区间加减1的操作,所以我们如果将序列里面的数按%k分组,把 ...
- Ubuntu20.04 体验和美化
Ubuntu20.04美化和体验 windows用久了,换下系统也挺好的.ubuntu20.04优化后,用起来蛮舒服的. 系统配置 1.修改软件源 Ubuntu默认是国外的软件源, 我们可以手动切换为 ...
- linux(centos8):用systemctl管理war包形式的jenkins(java 14 / jenkins 2.257)
一,如何安装jenkins? 参见: https://www.cnblogs.com/architectforest/p/13685904.html 说明:刘宏缔的架构森林是一个专注架构的博客,地址: ...
- go init执行顺序
package test import "fmt" // 初始化函数 引入包的时候要先执行 可以重复定义多个 同一个go文件从上到下 多个文件 是按照字符串进行排序 从小到大 执行 ...
- spring boot:使用caffeine+redis做二级缓存(spring boot 2.3.1)
一,为什么要使用二级缓存? 我们通常会使用caffeine做本地缓存(或者叫做进程内缓存), 它的优点是速度快,操作方便,缺点是不方便管理,不方便扩展 而通常会使用redis作为分布式缓存, 它的优点 ...