设计思路：利用复选框的是否选中来控制侧边栏的显示与隐藏

主要知识点：label标签 、

.class:checked伪类 、

"+" 选择器

实现步骤：

1.完成网页的整体布局

html：

<div class="wrap">
 <header class="header">
 <span><img src="./bars.svg" alt="导航栏"></span>
 <span>小白开始学前端</span>
 </header>
 <aside class="navbar">
 <p>侧边栏</p>
 </aside>
 <article class="main">
 <<p>主要内容</p>
 </article>
 <footer class="footer">
 底部
 </footer>
</div>

css：

*{
 margin: 0;padding: 0;box-sizing: border-box;
}
.wrap{
 width: 100vw;width: 100%;height: 100vh;position: relative;padding: 60px 0;
}
.wrap .header{
 width: 100vw;width: 100%;height: 60px;position: fixed;top: 0;background-color: #000; padding:0 10px;color: #fff;
 /* 布局 */
 display: flex;flex-flow: row nowrap; justify-content: space-between;align-items: center;
}
.wrap .header *{
 display: inline-block;height: 40px;line-height: 40px;
}
.header img{
 max-height: 100%;display: block;cursor: pointer;
}
.wrap .navbar{
 width: 100vw;width: 100%;height: calc(100% - 60px);position: absolute;z-index: 999;background-color: rgba(213, 204, 204, 0.92);
}
.wrap .navbar::after{
 position: absolute;content: "";display: inline-block; z-index:-1;width: 90vw;height: 100%;background-color: #fff;top:0;
}
.wrap .footer{
 width: 100vw;width: 100%;height: 60px;position: fixed;bottom: 0;background-color: #000;
}

效果图：

2.将侧边栏隐藏

设置侧边栏 display:none或者是visibility:hidden;

.wrap .navbar{
 display: none; //将侧边栏隐藏
 width: 100vw;
 width: 100%;
 height: calc(100% - 60px);
 position: absolute;
 z-index: 999; //将侧边栏的层级设置为最顶层
 background-color: rgba(213, 204, 204, 0.92);}

或者是

.wrap .navbar{
 visibility: hidden;
 position: absolute;
 z-index: -999; //将侧边栏的层级设置为最底层
 width: 100vw;
 width: 100%;
 height: calc(100% - 60px);
 background-color: rgba(213, 204, 204, 0.92);
} 

效果图：

3.利用复选框实现侧边栏的显示

到这里我们已经完成了网页的整体布局

为了实现复选框操纵侧边栏的显示，我们要对第一步骤中的html代码进行小小的修改

在网页中添加复选框按钮

效果图

接下来我们对复选框进行设置,隐藏复选框

#controller{
 position: absolute;
 z-index: -999;
 opacity: 0;/*visibility: hidden; */
}

效果图：

下一步就是实现单击复选框操控侧边栏的显示与隐藏

我们在css中添加以下代码

#controller:checked + .navbar{
 display: block;
}

这样就可以实现侧边栏的显示与隐藏

接下来，为侧边栏添加过渡效果

到这里，利用复选框操控侧边栏就已经制作完成了。

第一次写，可能有写得不好地方。