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

本身考察的知识点并不复杂，margin负值的遮挡，以及流布局中relative的超越。

代码固定部分是这样的，

有四个场景，

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制作带边框的小三角

标签(空格分隔):css 在项目中会使用到的小实例,目前知道的有两种方法来实现 设置元素的宽和高,利用rotate实现,比较简单的一种 div{ width: 10px; height: 10px; ...

css实现带边框的冒泡提示框

需求是实现这种效果, 因为内容是动态的,使用图片不是很好: 原因: 如果内容确定只是一行,可以效果图裁剪3部分,分别是两侧和中间部分,然后用backgroud插入三张图片,但是要是内容是2行就不好处理 ...

css写带边框的三角形

纯css写带小三角对话框

在实际样式中经常会遇到要写类似对话框的样式,而这种样式往往会有一个小三角,如下所示: 那么如何用css写出来呢,其实很简单,先让父元素相对定位,然后运用css的伪类before或after.就可以写个 ...

使用纯CSS实现带箭头的提示框

爱编程爱分享,原创文章,转载请注明出处,谢谢!http://www.cnblogs.com/fozero/p/6187323.html 1.全部代码 &lt ...

CSS导航菜单水平居中的多种方法

CSS导航菜单水平居中的多种方法 在网页设计中,水平导航菜单使用是十分广泛的,在CSS样式中,我们一般会用Float元素或是「display:inline-block」来解决.而今天主要讲解如何让未知 ...

随机推荐

C# 遍历DLL导出函数

C#如何去遍历一个由C++或E语言编写的本地DLL导出函数呢 不过在这里我建议对PE一无所知的人 你或许应先补补这方面的知识,我不知道为什么PE方面的 应用在C#中怎么这么少,我查阅过相关 C#的知识 ...

Java: arr==null vs arr.length==0

当 arr 是一个array时,写Java开始的corner case常常会写类似下面的语句: if(arr == null || arr.length == 0){ return 0; } 其实这是 ...

SecureCRT的背景和文字颜色的修改

options->;session options->;emulation->;terminal选择linux(相应的服务器系统)ansi color 打上钩options-> ...

oracle 11gR2默认密码修改

很久以前装了Oracle,今天终于下决心要学一学了,结果一上午的时间就贡献给如何连接数据库上了 忘记了安装时设置的用户名和密码怎么办?查了下网上的资料,终于解决了! 方法一: 首先进入sqlplus: ...

HTML+CSS Day06 超链接的样式与搭配

1.格式 a:link    {} 普通的.未被访问的链接 a:visited {}  用户已访问的链接 a:hover  {} 鼠标指针位于链接的上方 a:active{} 链接被点击的时刻 2.常 ...

Leetcode题解(十三)

36.Valid Sudoku 题目 代码如下: class Solution { public: bool isValidSudoku(vector &g ...

[Swift]LeetCode836. 矩形重叠 | Rectangle Overlap

A rectangle is represented as a list [x1, y1, x2, y2], where (x1, y1) are the coordinates of its bot ...

华为手机nova2s使用第三方字体库

准备好一个字体文件,例如mynew.tff 设置>显示>字体样式>最热,搜索免费,安装一款"兰亭黑体"字体(当然也可以购买) 可以在找到 文件管理>本地&g ...

nodejs 项目，请求返回Invalid Host header问题

今天在linux上安装node,使用node做一个web服务器,在linux上安装各种依赖以后开始运行但是,出现了:Invalid Host header 的样式,在浏览器调试中发现是node返回的错 ...

Spring Cloud Config配置中心的使用

一.概述 1. 为什么使用? 1> 配置文件太多,不方便维护 2> 配置文件一般都保存这各种明文显示的密码,无法保证配置内容的安全性,也无法做到按权限分配给个人 3> 更新配置项目需 ...