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」来解决.而今天主要讲解如何让未知 ...
随机推荐
- 我要告诉你:java接口中可以定义private私有方法
在传统的Java编程中,被广为人知的一个知识点是:java Interface接口中不能定义private私有方法.只允许我们定义public访问权限的方法.抽象方法或静态方法.但是从Java 9 开 ...
- cocos creator屏幕适配的一些知识点
一. cocos creator 提供的几种适配策略 EXACT_FIT: 整个应用程序在指定区域可见,无需尝试保留原始纵横比.可能会出现失真,应用程序会被拉伸或压缩.也就是说设计分辨率的长和宽不会等 ...
- 17.JAVA-常用总结
for另一种写法 for(UserBean bean : list){ //for循环取出list中每个成员,并赋给bean变量 System.out.println(bean.getName()); ...
- 多测试_常用linux命令_002
linux 介绍 常用的操作系统(os): windows .dos.android.ios.unix.linux linux系统:是一个免费.开源的操作系统 支持多cpu,多用户,多线程的操作系统, ...
- 多测师讲解selenium_iframe框定位_高级讲师肖sir
iframe 框定位方法: 查看iframe框 京东点击登录定位元素 定位qq: qq登录定位的元素 查找iframe框 定位iframe框 from selenium import webdrive ...
- Springboot+Redis(发布订阅模式)跨多服务器实战
一:redis中发布订阅功能(http://www.redis.cn/commands.html#pubsub) PSUBSCRIBE pattern [pattern -]:订阅一个或者多个符合pa ...
- ubuntu下vi不能正常使用的解决方法
现象 ubuntu中vi在编辑状态下方向键不能用,还有回格键不能删除等我们平时习惯的一些键都不能使用. 原因 ubuntu预装的是vim tiny版本,需要的是vim full版本. 方案 $sudo ...
- win8怎样才能启用administrator登录 别的用户也是如此
但是你可以用命令调出administrator账户打开C盘,打开windows文件夹,再打开system32文件夹,找到cmd.exe右键点击选择以管理员身份运行 在里面输入net user admi ...
- JavaSE学习笔记01注释、标识符与基本类型
1. HelloWorld 编写代码 public class Hello{ public static void main(String[] args){ System.out.println(&q ...
- .net core autofac asyncinterceptor 异步拦截器开发
autofac使用拦截器实现AOP,是基于Castle.Core的.然而Castle.Core并未提供原生异步支持.所以需要使用帮助类实现,这在autofac官方文档的已知问题中有详细说明: http ...