纯css加伪类实现关闭提示创窗口
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="utf-8" />
<title>单选按钮实现窗口关闭布局</title>
<meta name="author" content="" />
<style>
*{margin:0;padding:0;}
ul li{list-style:none;}
.first{
position:relative;
background:#0f0;
width:500px;
}
.chk_1 {
display: none;
} .chk_1 + label {
width:30px;
height:30px;
text-align:center;
line-height:30px;
background-color: #FFF;
background: rgba(255, 0, 107, 0.83);
padding: 5px;
display: inline-block;
position: absolute;
right: 0;
top: 0;
z-index:2;
} .chk_1:checked + label {
display:none;
} .chk_1:checked + label:after {
display:none;
}
.second{
position:absolute;
z-index:1;
width:500px;
height:300px;
background:#FF00DF;
}
.chk_1:checked ~ div{
display:none;
}
</style>
</head>
<body>
<div>
<ul>
<li class='first'>
<input type="checkbox" id="checkbox_a1" class="chk_1" />
<label for="checkbox_a1">X</label>
<div class='second'></div>
</li>
</ul>
</div>
</form>
</body>
</html>
纯css加伪类实现关闭提示创窗口的更多相关文章
- 二.CSS的伪类
CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用" : "进行标示,如果是“ :: ” 表示CS ...
- CSS中伪类及伪元素用法详解
CSS中伪类及伪元素用法详解 伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...
- CSS :first-child 伪类
CSS :first-child 伪类 向元素的第一个子元素添加样式,示例如下: 例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...
- CSS :focus 伪类
:focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...
- 关于css中伪类及伪元素的总结
css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...
- 关于css的伪类和伪元素
现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...
- CSS锚伪类顺序需注意的几点
CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...
- css hover伪类选择器与JQuery hover()方法
css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...
- PHP 进阶篇：面向对象的设计原则，自动加载类，类型提示，traits，命名空间，spl的使用，反射的使用，php常用设计模式 （麦子学员 第三阶段）
以下是进阶篇的内容:面向对象的设计原则,自动加载类,类型提示,traits,命名空间,spl的使用,反射的使用,php常用设计模式 ================================== ...
随机推荐
- 添加EF上下文对象，添加接口、实现类以及无处不在的依赖注入（DI）
添加EF上下文对象,添加接口.实现类以及无处不在的依赖注入(DI) 目录索引 [无私分享:ASP.NET CORE 项目实战]目录索引 简介 上一章,我们介绍了安装和新建控制器.视图,这一章我们来创建 ...
- 1.org.hibernate.MappingException: No Dialect mapping for JDBC type: -9
org.hibernate.MappingException: No Dialect mapping for JDBC type: -9 原因:Hibernate框架的方言(Dialect )没有数据 ...
- Linux bug 14258279: scheduling clock overflows in 208 days
早上同事反映数据库不能用.无法正常登录主机.多次尝试后终于登上主机,检查系统日志发现下述错误: BUG: soft lockup - CPU#5 stuck for 17163091988s! 貌似是 ...
- Linux下diff使用简介
diff用来比较两个文件的差异.首先构建两个相似的文件. Hello文件 world文件 使用diff -u hello world > diff.txt,将两个文件的比对结果输入到diff. ...
- Mirror–使用证书配置镜像模板
–==================================================================–该文档主要用于内部配置模板–场景:–主服务器:192.168.3 ...
- Windows Azure 社区新闻综述（#71 版）
欢迎查看最新版本的每周综述,其中包含有关云计算和 Windows Azure的社区推动新闻.内容和对话. 以下是过去一周基于您的反馈汇集在一起的内容: 文章.视频和博客文章 · 使用 Azure ...
- poj2538---字符匹配（映射）
#include <stdio.h> #include <stdlib.h> #include<string.h> int main() { int i,j; ], ...
- 在.NET中快速创建一个5GB、10GB或更大的空文件
对于通过UDP进行打文件传输的朋友应该首先会考虑到一个问题,那就是由于UDP并不会根据先来先到原则进行发送,也许你发送端发送的时候是以包1和包2的顺序传输的,但接收端可能以包2和包1 的顺序来进行接收 ...
- nodejs教程：安装express及配置app.js文件
express.js是nodejs的一个MVC开发框架,并且支持jade等多种模板.下面简单来说说express的安装和app.js文件的配置,然后在今后的教程中一步一步使用express.js搭建个 ...
- JavaSE思维导图(七)