18910140161

Css

首页 >> 前端开发 >> Css

css---点击显示和隐藏

2021-10-21 13:45:58

164

<!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框架及工具收集 下一篇：html/css/javascrip
相关文章
推荐阅读
随机推荐
我们已经准备好了，你呢？
获取网站建设报价
2024我们与您携手共赢，为您的企业形象保驾护航！