<!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. J2SE知识点摘记(十)

    1.        多线程的同步 2.        同步代码块 即程序中不能有多个线程同时在这两句代码之间执行.(必须两句代码执行完,其他线程才可以公用执行) 同步代码块定义语法如下 ... syn ...

  2. 无线功率 mW 和 dBm 的换算

    无线电发射机输出的射频信号,通过馈线(电缆)输送到天线,由天线以电磁波形式辐射出去.电磁波到达接收地点后,由天线接收下来(仅仅接收很小很小一部分功率),并通过馈线送到无线电接收机.因此在无线网络的工程 ...

  3. libvirt python binding 变成了一个新项目

    http://libvirt.org/git/ $ git clone git://libvirt.org/libvirt-python.git 2013年的事情了. $ git show a7a12 ...

  4. JAVA 中的RMI是什么

    RMI的概念 RMI(Remote Method Invocation)远程方法调用是一种计算机之间利用远程对象互相调用实现双方通讯的一种通讯机制.使用这种机制,某一台计算机上的对象可以调用另外 一台 ...

  5. swig模板下拉框应用

    <div class="form-group"> <label><span class="fa fa-asterisk red"& ...

  6. cocos2d-x创建场景

    今天开始学习Cocos2d-x,使用的版本是2.1.4,这个版本比较老,对应的参考资料也比较齐全. 在mac/xcode环境下,代码是写在Classes文件夹下的,和iOS应用类似,程序从AppDel ...

  7. iOS 退出应用程序

    退出应用程序,方法很简单,只是动画效果没有那么好. - (void)exitApplication { AppDelegate *app = [UIApplication sharedApplicat ...

  8. android 回调

    调函数(callback Function),顾名思义,用于回调的函数.  回调函数只是一个功能片段,由用户按照回调函数调用约定来实现的一个函数.回调函数是一个工作流的一部分,由工作流来决定函数的调用 ...

  9. java中关于线程间协作所用关键字synchronized，wait,notify的用法

    wait/notify()关键字适用于一个线程通知另一个线程所需的条件状态已就绪,最常用于线程在循环中休眠直到获取特定条件的场景. 例如,一个线程一直等待直到队列中有一个组件能够处理:当组件添加到队列 ...

  10. android入门——UI(5)

    最近时间实在匆忙,博客的代码基本没有解释. 介绍ExpandableListView <?xml version="1.0" encoding="utf-8&quo ...