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」来解决.而今天主要讲解如何让未知 ...
随机推荐
- 多测师讲解 _教师(必备)_高级讲师肖sir
教学心得1.备课要充分,防止第二天上课会出现一些突发情况2.上课要有自己的思路,不一定要按照课件上的讲3.上课气氛比较沉闷的时候,可以适当的开下玩笑,缓解大家的学习氛围4.讲课的时候提醒学员不要做笔记 ...
- Mysql数据库分布式事务XA详解
XA事务简介 XA 事务的基础是两阶段提交协议.需要有一个事务协调者来保证所有的事务参与者都完成了准备工作(第一阶段).如果协调者收到所有参与者都准备好的消息,就会通知所有的事务都可以提交了(第二阶段 ...
- centos8平台使用journalctl管理systemd-journald日志
一,systemd-journald的作用 1,什么是systemd-journald? systemd-journald 是 systemd 自带的日志系统,是一个收集并存储各类日志数据的系统服务. ...
- matplotlib直方图
import matplotlib.pyplot as plt import matplotlib as mpl from matplotlib.font_manager import FontPro ...
- xpath取其中几个使用position
from lxml import etree html = ''' <!DOCTYPE html> <html lang="en"> <head> ...
- JS变量作用域与解构赋值
用var变量是有作用域的 变量在函数内部声明时,那么该变量只属于整个函数体,函数外不可调用 当两个不同的函数里,使用了用一个相同的变量名,二者不互相影响,相互独立 遇到嵌套函数时,外部函数不可调用内部 ...
- springboot错误统一处理
1,对于404,500这类错误,可以直接新建public/error目录 ,在error目录 中新建404.html, 500.html或5xx.html,springboot会自动跳转到这些静态页面 ...
- 如何利用go-zero在Go中快速实现JWT认证
关于JWT是什么,大家可以看看官网,一句话介绍下:是可以实现服务器无状态的鉴权认证方案,也是目前最流行的跨域认证解决方案. 要实现JWT认证,我们需要分成如下两个步骤 客户端获取JWT token. ...
- retrofit和RxJava结合
public class MainActivity extends AppCompatActivity { @SuppressLint("CheckResult") protect ...
- day03基本数据类型
运算符补充 今天补充一些简单知识: #!/usr/bin/env python # -*- coding:utf-8 -*- value = "我是中国人" # 判断'中国'是 ...