1. <!doctype html>
  2. <html lang="en">
  3. <head>
  4. <meta charset="UTF-8">
  5. <title>Document</title>
  6. </head>
  7. <style type="text/css">
  8. ul,li{list-style: none;}
  9. *{padding: 0; margin: 0;}
  10. .nav-con{display: none;}
  11. .nav-box{display: none;}
  12. .nav-con:checked ~ .nav-box{display: block;}
  13. .nav-btn{padding: 10px 15px;background:red;}
  14. </style>
  15. <body>
  16. <label for="control" class="nav-btn">菜单</label>
  17. <div>
  18.     <input type="checkbox" name="" id="control" class="nav-con">
  19.     <ul class="nav-box">
  20.         <li><a href="#">首页</a></li>
  21.         <li><a href="#">联系我们</a></li>
  22.         <li><a href="#">产品</a></li>
  23.         <li><a href="#">新闻</a></li>
  24.     </ul>
  25. </div>
  26. </body>
  27. </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. Opencv中Mat矩阵相乘——点乘、dot、mul运算详解

    Opencv中Mat矩阵相乘——点乘.dot.mul运算详解 2016年09月02日 00:00:36 -牧野- 阅读数:59593 标签: Opencv矩阵相乘点乘dotmul 更多 个人分类: O ...

  2. yolov3源码darknet在vscode下调试

    1. 安装配置: https://pjreddie.com/darknet/yolo/ darknet文件夹下make命令搞定: 2. 配置vscode 打开安装好的vscode并安装扩展C/C++( ...

  3. Can't get Kerberos realm

    1. Can't get Kerberos realm 原因分析: 原始代码为: org.apache.hadoop.security.UserGroupInformation.setConfigur ...

  4. Spring MVC报异常：org.springframework.web.util.NestedServletException: Request processing failed

    在使用SpringMVC绑定基本类型(如String,Integer等)参数时,应通过@RequestParam注解指定具体的参数名称,否则,当源代码在非debug模式下编译后,运行时会引发Handl ...

  5. SoapUI Pro Project Solution Collection-change the JDBC Request behavior

    change the jdbc request : 1.change the driver name,connection string,query string or assert. the obj ...

  6. APP安全测评checklist---Android

    首先,你的app得先混淆:AndroidStudio 混淆打包 先来个checklist: 编号 检查项目 测评结果 1 明文传输用户名.密码和验证码等敏感信息. 2 不安全的本地存储. 3 泄漏后台 ...

  7. Java socket保存示例（不使用base64）解决中文乱码问题

    MultiThreadServer.java package com.my.nubase64; import java.io.BufferedReader; import java.io.Buffer ...

  8. latex学习（四）tlmgr

    官网说明文档:https://tug.org/texlive/doc/tlmgr.html,2018版已经被冻结了,所以tlmgr也不会更新了,要等到下一个大的版本才能更新. 1.用tlmgr查看已经 ...

  9. vs get set快捷键

    vs get set快捷键 光标放在空白处输入prop,然后tab两次,修改类型和名称即可

  10. ambari安装 QA

    1.在安装时 出现Public key for ambari-server-2.4.2.0-136.x86_64.rpm is not installed 安装ambari报错 在安装HST服务时也报 ...