发表于： 2020-06-18 22:24:38
1 1406
今天完成的事情：
任务13页面1优化完成
关于侧边栏的点击事件
使用input标签的复选框
<input type="checkbox" id="menu">
（使用复选框的选中和未选中特性与侧边栏弹出收起样式绑定）
<label for="menu">
（使用label标签与头部按钮绑定）
input[type="checkbox"] {display: none;}
（css将复选框样式隐藏）
input[type="checkbox"]:checked ~ aside{left: 0;}
（点击后使侧边栏从边缘处显示出来）
input[type="checkbox"]:checked ~ main{margin-left: 250px;margin-right: -250px;}
（同时把页面向右移动）
完成效果
需要注意input属性无法对父级外元素有用，必须同级或者父级。
返回列表
评论