发表于: 2021-04-11 21:48:36

1 1026


今天完成的事情:任务十三进行中,运用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 #6662px 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;
}

效果展示:下面链接:


返回列表 返回列表
评论

    分享到