本站承诺永不接任何虚假欺骗、联盟广告、弹窗广告、病毒广告、诱导充值等影响用户体验的广告,广告屏蔽插件会影响本站部分功能,还请不要屏蔽本站广告,感谢支持!

当前位置:首页 / 正文

2021-03-02 | 编程技术 | 2004 次阅读 | 等你评论 | 1 次点赞 | 繁体

利用 label 的 for 属性绑定 checkbox,此方法对按钮与盒子的层级关系没有限制(需用到 CSS3 选择器)

<style>
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:;
        }
</style>
<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>

标签: htmlcss

猜你喜欢
Typecho纯代码生成sitemap站点地图
想要实现 Typecho 纯代码生成 sitemap 站点地图只需要 2 步就够了。1、在博客主题目录新建 sitemap.php 页面,放入以下代码:<?php /** *HTML版网站...
github 的黑夜模式小猫咪动画源码
github 上的小猫咪黑夜模式切换很可爱,想要~ 。于是花了点时间扒了下来放在了自己的博客上。秉着开源精神,将源码分享给大家。废话少说,上代码html:<!-- 暗黑模式 --> ...
仿网易评论盖楼 JS 实现 | html
看了些评论引用盖楼的网站,觉得网易的效果比较好,简单明了,让人看了就知道是引用评论,迟点准备自己也写个玩玩,应该能从中学到不少东西. 前端部分实现如下:https://www.phpvar.co...
Web 加载速度优化清单,让你的网站快上加快
网页加载速度是衡量一个网页好坏的重要标准,网页遗弃率随网页加载时间的增加而增加。据说近一半的用户希望网页加载时间不超过 2s,超过 3s 一般就放弃该网页。时间就是生命,干等着,谁愿意平白无故地...
[前端] CSS 实现新拟态(Neumorphism) UI 风格
什么是新拟态(Neumorphism) UI 风格?网上似乎还没有一个准确统一的定义。按照我个人的通俗理解,就是将界面的一部分凸起来,另一部分凹下去,形成的一种错落有致的拟物风格。代表作是乌克兰...
什么是防抖和节流?vue 中如何使用防抖和节流
什么是防抖和节流?vue 中如何使用防抖和节流介绍在 JavaScript 中,防抖和节流其实是一个很重要的概念。主要应用场景就是会频繁触发的事件,比如监听滚动、点赞功能,总不能点一次赞就向后台...
自动在网页中英文之间加空格
汉学家称这个空白字元为「盘古之白」,因为它劈开了全形字和半角字之间的混沌。另有研究显示,打字的时候不喜欢在中文和英文之间加空格的人,感情路都走得很辛苦,有七成的比例会在34岁的时候跟自己不爱的人...
python:Pandas里千万不能做的5件事
作为一个在进入数据分析领域之前干过开发的攻城狮,我看到我的同行以及新手在使用 Pandas 时会犯很多低级错误。 今天我说出这五个坑,让大家别一而再,再而三的掉坑里。 修复这些错误能让你的
Mysql 窗口函数学习
窗口函数是数据库查询中的一个经典场景,在解决某些特定问题时甚至是必须的。个人认为,在单纯的数据库查询语句层面【即不考虑 DML、SQL 调优、索引等进阶】,窗口函数可看作是考察求职者 SQL 功底的一
去除某些博客阅读全文需要关注公众号的限制
最近好像突然流行起来了在博客里面设置阅读全文需要关注公众号获取验证码的垃圾操作,甚至一些托管在 github pages 上的静态博客也搞了,实在是一种脱裤子放屁的行为。 需要获取验证码的案例如
(首次提交评论需审核通过才会显示,请勿重复提交)