码迷,mamicode.com
首页 > Web开发 > 详细

css---点击显示和隐藏

时间:2019-03-05 23:03:34      阅读:654      评论:0      收藏:0      [点我收藏+]

标签:document   css   ack   name   char   set   checkbox   class   for   

<!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---点击显示和隐藏

标签:document   css   ack   name   char   set   checkbox   class   for   

原文地址:https://www.cnblogs.com/e0yu/p/10480216.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!