<!doctype html>

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

</head>

<style type="text/css">

ul,li{list-style: none;}

*{padding: 0; margin: 0;}

.nav-con{display: none;}

.nav-box{display: none;}

.nav-con:checked ~ .nav-box{display: block;}

.nav-btn{padding: 10px 15px;background:red;}

</style>

<body>

<label for="control" class="nav-btn">菜单</label>

<div>

    <input type="checkbox" name="" id="control" class="nav-con">

    <ul class="nav-box">

        <li><a href="#">首页</a></li>

        <li><a href="#">联系我们</a></li>

        <li><a href="#">产品</a></li>

        <li><a href="#">新闻</a></li>

    </ul>

</div>

</body>

</html>

css---点击显示和隐藏的更多相关文章

  1. js如何实现点击显示和隐藏表格

    js如何实现点击显示和隐藏表格 一.总结 一句话总结: 1.给table或者table里面的元素添加点击事件, 2.然后判断当前表格的数据显示或者隐藏, 3.然后通过display属性显示(非none ...

  2. CSS元素的显示与隐藏

    CSS元素的显示与隐藏 我们访问某些网站的时候,经常可以看到一些广告弹出来,点击关闭就不见了,但是重新刷新页面后,广告又会重新弹出来.这就是元素的显示和隐藏的一个应用. 1. display属性 di ...

  3. css控制div显示／隐藏方法及２种方法比较原码 - czf164的专栏 - 博客频道 - CSDN.NET

    body{ font-family: "Microsoft YaHei UI","Microsoft YaHei",SimSun,"Segoe UI& ...

  4. [CSS]元素的显示与隐藏

    摘自:http://www.zhangxinxu.com/wordpress/?p=1528 元素隐藏与显示是我们在页面制作与交互效果实现中非常常见的,如果您只是使用display:none与disp ...

  5. CSS——元素的显示与隐藏

    元素的显示与隐藏 在CSS中有三个显示和隐藏的单词比较常见,我们要区分开,他们分别是 display visibility 和 overflow. 他们的主要目的是让一个元素在页面中消失,但是不在文档 ...

  6. css中实现显示和隐藏（转）

    CSS中的display和visibility      在平时的开发过程中,总是会遇到一些文字在特定的场景下显示或者隐藏来达到我们想要的效果,css中display和visibility语法,他们都 ...

  7. JQuery采纳CSS实现DOM显示和隐藏要素

    今天参加了Code Review活动.阅读编写代码的同事,感到满足当前功能的实现,但是从长远来看,,无论角度还是从代码重用是来看显然不佳维修点. 有什么需要看的权利.通过选择不同的选项下拉框需求,为了 ...

  8. vue点击切换样式，点击切换地址栏，点击显示或者隐藏

    1. vue点击显示切换 :class='{"span":index==0}' class原本是 类选择器 加上 :class就是绑定属性的意思 '{"span" ...

  9. vueJS简单的点击显示与隐藏的效果

    目前前端框架太多,接触过angular.ember,现在开始倒腾vue 此处用到v-if.v-else.v-show,v-if或让元素不在DOM上,v-show只是改变display:block属性, ...

  10. 一款js点击显示和隐藏的例子（pc，移动端通用）

    html部分: <div id="box"> <div id="box_title">标题</div> <div id ...

随机推荐

  1. Alpha通道

     Alpha通道是计算机图形学中的术语,指的是特别的通道,意思是“非彩色”通道,主要是用来保存选区和编辑选区.真正让图片变透明的不是Alpha 实际是Alpha所代表的数值和其他数值做了一次运算  为 ...

  2. 【Qt5】Windows下配置程序的产品、公司、版权、版本号等详细信息

    在工程的pro文件中加入下面的配置 # 配置图标(仅Windows有效)# 本程序使用两个图标,这样其快捷方式可以有更多选择,也可以给关联文件提供图标选择RC_ICONS += icon1.ico \ ...

  3. log4net.Layout.PatternLayout 用 conversion 模式格式化日志事件【翻译】

    原文地址 log4net.Layout.PatternLayout,是一个灵活的布局,配置模式字符串. 线程安全.该类型的 Public static 成员对多线程操作是安全的.实例成员不保证线程安全 ...

  4. 修改oracle为归档模式

    1.查看是否为归档模式 SQL> archive log list; Database log mode No Archive Mode Automatic archival Disabled ...

  5. SoapUI Pro Project Solution Collection-Test Step Object

    Package com.eviware.soapui.model.testsuite used for access the current testsuite object, like test c ...

  6. Linux编译步骤概述

    Linux,一切皆文件! linux环境下,编译源码文件步骤总结 01.下载解压 一遍在开源网站有download/下载页面 02.安装基本编译环境 yum install -y gcc gcc-c+ ...

  7. 如何免费的让网站启用https

    本文源自酷壳:如何免费的让网站启用HTTPS 今天,我把CoolShell变成https的安全访问了.我承认这件事有点晚了,因为之前的HTTP的问题也有网友告诉我,被国内的电信运营商在访问我的网站时加 ...

  8. C#中回滚TransactionScope的使用方法和原理

    TransactionScope只要一个操作失败,它会自动回滚,Complete表示事务完成   实事上,一个错误的理解就是Complete()方法是提交事务的,这是错误的,事实上,它的作用的表示本事 ...

  9. 多分类-- ROC曲线

    本文主要介绍一下多分类下的ROC曲线绘制和AUC计算,并以鸢尾花数据为例,简单用python进行一下说明.如果对ROC和AUC二分类下的概念不是很了解,可以先参考下这篇文章:http://blog.c ...

  10. R8500 MPv2 版本 刷 Kong编译的 ddwrt 后，使用Entware-ng 安装opkg安装第三方软件

    先说R8500吧. 由于Netgear网件的问题导致R8500在去年双11前夕出现了全球范围的Boot Loop的问题,现象为新设备开机一段时间后,路由器进入不停重启的状态,电源灯桔黄色.在和网件工程 ...