发表于： 2019-07-17 23:48:12
1 899
今天完成的事：
完成侧边栏，通过让侧边栏初始位置为负达到隐藏效果
aside {
/*侧边栏,初始位置为-200px，即隐藏效果*/
position: absolute;
top: 0;
bottom: 0;
left: -200px;
width: 200px;
background: black;
transition: 0.2s ease-out;
/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
}
：checked选择器可以选中由用户勾选的单选按钮或者复选框，要使复选框的选中与不选中和导航栏的隐藏和显示两种状态关联起来，搭配上其他的选择器。
使用:checked选择器和~普通兄弟选择器，选择aside标签和#weapID，就可以达到复选框的 选中与不选中 和 导航栏的 隐藏与显示 联系起来的效果。
#sidemenu:checked+aside {
/*为被选中的sidemenu后的aside设置属性（紧邻）*/
left: 0;
/*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
}
#sidemenu:checked~#wrap {
/*为被选中的sidemenu后的wrap设置属性（非紧邻）*/
padding-left: 220px;
}
当点击按钮复选框选中状态页面主体向左生成侧边栏宽度的内边距把页面主体撑开显示出侧边栏，再
点击复选框不选中状态left为零侧边栏隐藏。
明天计划的事：
完成任务13，深度思考
遇到的问题：
侧边栏隐藏时有残影，隐藏时不够平滑。
收获：
学会了复选框的多种应用，侧边栏的制作。
返回列表
评论