响应式开发 纯CSS实现隐藏菜单栏

标签：htm   一个   class   lin   width   ogg   点击   block   css   

首先，需要在页头引入相应的CSS文件

<link media="(min-width: 800px)" rel="stylesheet" href="css/main.css">
<link media="(max-width: 768px)" rel="stylesheet" href="css/mobile.css">

在 main.css中将要隐藏的菜单设置 display: block;

在 mobile.css中将其设置为 display: none;

然后在菜单上面设置一个点击选项，如“菜单”

<label for="toggle-checkbox" id="toggle-label">菜单</label>
<input type="checkbox" id="toggle-checkbox">

在mobile.css中设置：

#toggle-checkbox:checked ~ div {
display: block;
}

#toggle-checkbox {display: none;}

响应式开发 纯CSS实现隐藏菜单栏

标签：htm   一个   class   lin   width   ogg   点击   block   css   

原文地址：https://www.cnblogs.com/zhougm/p/11219597.html