<!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. CSS自学笔记（1）:CSS简介

    一.什么是CSS CSS(Cascading Style Sheet(级联样式表))是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言. ...

  2. 新手笔记-tftp与yum

    lspci 查看pci插槽设备 lsusb  查看USB设备 tftp 配置文件 /etc/xinetd.d/tftp tftp 根目录 /var/lib/tftpboot service xinet ...

  3. 数据仓库（七）：Oracle Warehouse Builder（OWB）创建数据仓库

    本文简述使用OWB创建数据仓库的一般过程.Oracle的OWB是目前最好的三大ETL产品之一.OWB不但可以可以完成数据的抽取.转换和加 载,还能帮助用户在Oracle数据库中创建ROLAP(Rela ...

  4. Android 获取屏幕分辨率

    原文:Android 获取屏幕分辨率 得到一个屏幕尺寸的三种方法如下:        // 通过WindowManager获取        DisplayMetrics dm = new Displ ...

  5. 字符编码和python使用encode,decode转换utf-8, gbk, gb2312

    ASCII码 标准ASCII码使用7位二进制数表示大写或小写字母,数字0到9标点符号以及在美式英语中使用的特殊控制字符. 在标准ASCII码中,最高位(b7)用作奇偶校验位,所谓奇偶校验,是指在代码传 ...

  6. android加载更多的图片

    这是昨天改进后的,我测试了下,可以加载图片到5万张,估计5万以上也是没问题的,我只试到5万,其实也没必要这么高,现实中1000左右就差不多了,不过我的应用到100就差不多了, package com. ...

  7. 关于虚拟机装kali-linux的联网问题

    我用的是VMware Workstation11,近期装了一个kali-linux,想玩一下password破解.没想到装上之后网络连接显示的是活跃的却无法上网,我试过桥接等其他方式去联网,却依然无法 ...

  8. 关于matlab鼠标响应

    今天看了一下Matlab中响应鼠标的事件,整理如下, (1)函数WindowButtonMotionFcn,当鼠标在窗口上运动的时候就会相应此函数,于是在此函数中可以设置运动时想要的代码,如:改变鼠标 ...

  9. ORA-03113: 通信通道的文件结尾 进程 ID: 764 会话 ID: 125 序列号: 5

    昨天因为导入很久数据,最后一看是因为数据文件不够,后来就关机了.现在,开启数据库,总是报“ORA-03113: 通信通道的文件结尾” SQL> conn /as sysdba; 已连接到空闲例程 ...

  10. Java中的变量与变量的作用域

    关于Java中的变量及变量的作用域 关于Java中的变量及变量的作用域 0. 变量的概念 在程序运行期间,系统可以为程序分配一块内存单元,用来存储各种类型的数据.系统分配的内存单元要使用一个标记符来标 ...