发表于： 2021-04-11 21:48:36
1 1027
今天完成的事情：任务十三进行中，运用sass，不使用bootstrap等辅助应用自己写页面的特殊样式。
明天计划的事情：任务十三的全部布局，并进行代码优化，知识学习。
收获：
任务页面首页侧面导航栏的制作。本身隐藏，点击滑出。
#sidemenu{
display: none; /隐藏checked复选框/
}
#sidemenu:checked + aside {
left: 0; /为被选中的sidemenu后的aside设置属性（紧邻），点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果/
}
#sidemenu:checked ~ #wrap {
padding-left: 220px;
}
aside {
position: absolute;
top: 48px;
z-index: 99;
left: -210px; /侧边栏,初始位置为-210px，即隐藏效果/
width: 200px;
height: 100%;
background: $white;
transition: 0.5s ease-out; /动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然出现/
@include box-shadow(0px 4px 5px #666, 2px 6px 10px #999);
}
#wrap {
padding-left：20px; /侧边栏进出按钮的样式/
transition: 0.5s ease-out;
}
label {
background: $blue; /控制侧边栏进出的按钮（内部文字样式,展现出三条杠）/
color: $white;
cursor: pointer;
font-size: 2em;
width: 1.5em;
height: 1.5em;
line-height: 1.5em;
text-align: center;
display: inline-block;
}
#sideul li {
list-style: none; /侧边栏点开时内部样式/
color: $blue;
width: 100%;
height: 1.8em;
font-size: 1em;
text-align: center;
}
效果展示：下面链接：
返回列表
评论