今天完成的事件

设计这这左边的导航栏：

了解到<input type="checkbox" class="input-box">这个打勾按钮， 它的默认样式 这个样式可以更改是用webkit-appearance：none然原本样式消失 自己添加样式用图片替换等：代码如下

利用背景图片来改变它的样式；

这里需要实现左边的导航栏隐藏起来在需要的时候把原本的页面推过去 我这里要用checked选择器。

checked：属于伪类选择符，checked 选择器匹配每个选中的输入元素（仅适用于单选按钮或复选框）。

如果要实现上面的效果就需要用到这个伪类选择符，注意它是适用于单选按钮或者复选框。

首先要实现我的代码是这样写的 先用body里面属性写上flex布局让2个块状元素并列，让最左边的先消失代码如下：

这里可以看到，  我这基本上就2个块状元素 主要让这2个DIV并列，而input按钮给他绝对定位，效果如第一张图那样而最左边的代码属性如下：

.left-nav {

      display: none;

      min-width: 40%;

      color: #69D1E9;

      background-color: white;

  这里要注意 给他最小的宽度 如果不给那么他们2个人相当于在同一个宽度会显得非常挤如图

左边的最小宽度是40%右边的最小宽度正常给100%就行这样多出来的40%就会把右边的页面推过去。

而display: none;这个很重要 直接让它消失包括元素不会影响我的右边页面效果。

参考：https://www.runoob.com/cssref/pr-dim-min-width.html

最后就是然input按钮在点击的时候能让左边页面显示出来就跟HOVER效果一样，写法差不多代码如下

  这样就实现了左导航栏的效果。

总结：了解了checked选择伪类的用法 感觉以后会经常用到。