<!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加伪类实现关闭提示创窗口的更多相关文章

  1. 二.CSS的伪类

    CSS的伪类(Pseudo-classes)分为两种:UI伪类和结构化伪类,伪类一般用于向某些选择器添加特殊的效果,伪类选择符用"  : "进行标示,如果是“ ::  ” 表示CS ...

  2. CSS中伪类及伪元素用法详解

    CSS中伪类及伪元素用法详解   伪类的分类及作用: 注:该表引自W3School教程 伪元素的分类及作用: 接下来让博主通过一些生动的实例(之前的作业或小作品)来说明几种常用伪类的用法和效果,其他的 ...

  3. CSS :first-child 伪类

    CSS :first-child 伪类  向元素的第一个子元素添加样式,示例如下:   例 1 - 匹配第一个 <p> 元素(第一个段落显示为红色) <style type=&quo ...

  4. CSS :focus 伪类

    :focus -- CSS :focus 伪类,适用于已获取焦点的元素的样式 语法: :focus CSS版本:CSS2 说明: 适用于已获取焦点的元素的样式,例如:表单的input输入框可以输入文字 ...

  5. 关于css中伪类及伪元素的总结

    css中的伪类和伪元素总是混淆,今天参考了很多资料,也查看了部分文档,现将伪类及伪元素总结如下: 一.由来: 伪类和伪元素的引入都是因为在文档树里有些信息无法被充分描述,比如CSS没有"段落 ...

  6. 关于css的伪类和伪元素

    现在才发现自己一直没有分清楚css的伪类和伪元素啊,so,总结一下. CSS 伪类用于向某些选择器添加特殊的效果. CSS 伪元素用于将特殊的效果添加到某些选择器. 可以明确两点,第一两者都与选择器相 ...

  7. CSS锚伪类顺序需注意的几点

    CSS锚伪类有以下几种: a:link{color:pink} /*未访问的链接*/ a:visited{color:red} /*已访问的链接*/ a:hover{color:blue} /*鼠标移 ...

  8. css hover伪类选择器与JQuery hover()方法

    css hover伪类选择器 它属于anchor伪类 在支持 CSS 的浏览器中,<a>标签链接的不同状态都可以以不同的方式显示,常常用来改链接的颜色效果 实例 a:link {color ...

  9. PHP 进阶篇：面向对象的设计原则，自动加载类，类型提示，traits，命名空间，spl的使用，反射的使用，php常用设计模式 （麦子学员 第三阶段）

    以下是进阶篇的内容:面向对象的设计原则,自动加载类,类型提示,traits,命名空间,spl的使用,反射的使用,php常用设计模式 ================================== ...

随机推荐

  1. 致命错误C0000034正在应用更新操作37解决方法

    当碰到这个问题的时候关闭电脑,启动,不断按F8键,进入命令行,输入Notepad.exe弹出记事本,文件,打开,所有文件,然后将C:\Windows\WinSxS目录下的pending.xml文件中的 ...

  2. header.htm

    <!--{ad/subnavbanner/a_mu}--> 的意思是   全局 页头二级导航栏广告 位 <!--{subtemplate common/pubsearchform}- ...

  3. WIX 学习笔记 - 2 第一个WIX 项目 HelloWIX

    程序员们都非常熟悉 Hello World!,基本上所有的语言书都以打印一个 Hello World! 作为第一个代码示例. 我们也要发扬代码界的优良传统,使用 Hello WIX! 作为我们的入门示 ...

  4. HDU 4664 Triangulation【博弈论】

    一个平面上有n个点(一个凸多边形的顶点),每次可以连接一个平面上的两个点(不能和已经连接的边相交),如果平面上已经出现了一个三角形,则不能在这个平面上继续连接边了. 现在总共有N个平面,每个平面上都有 ...

  5. IOS开发之xcode 快捷键

    IOS开发也有一年多了,发现Xcode快捷键,还不熟,恶补一下.要不然真影响工作效率,呵呵! 1. 文件 CMD + N: 新文件 CMD + SHIFT + N: 新项目 CMD + O: 打开 C ...

  6. Swift初体验(三)

    /*******************************************************************************/ // 协议 protocol Des ...

  7. HDU Exponentiation 1063 Java大数题解

    Exponentiation Time Limit: 1000/500 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others) To ...

  8. Android的MVC框架

    http://www.cnblogs.com/wanghafan/archive/2012/07/20/2600786.html MVC是当前比较流行的框架,随便Google下,就可以发现几乎所有的应 ...

  9. paip.c++ qt messagebox用法

    paip.c++ qt messagebox用法 作者Attilax ,  EMAIL:1466519819@qq.com  来源:attilax的专栏 地址:http://blog.csdn.net ...

  10. MySQL 5.6.19 二进制安装

    1.        操作系统 CentOS release 6.2 (Final) 2.        创建用户和组 [root@mymaster1 ~]# groupadd mysql [root@ ...