发表于： 2018-12-30 21:01:48
1 682
0 0 1 12
发表于：2018-12-28 20:53:24 | 更新于：2018-12-29 10:23:10
辅导师兄 [成都分院|内门弟子] JS-李文龙 
今日完成的事：
今天完成了任务13，继续学习sass，并学习使用checkbox：
scss:
#sidemenu{
display: none;
&:checked + aside {
/*为被选中的sidemenu后的aside设置属性（紧邻）*/
left: 0;
/*点击按钮即选中checked后,侧边栏位置变为贴着左边,配合ease-out使用,有渐变滑出的效果*/
}
&:checked ~ #wrap {
/*为被选中的sidemenu后的wrap设置属性（非紧邻）*/
padding-left: 40%;
}
}
aside {
/*侧边栏,初始位置为-200px，即隐藏效果*/
position: absolute;
top: 0;
bottom: 0;
left: -40.8%;
width:40%;
background: #fff;
border-right: 0.2rem solid #5fc0cd;
transition: 0.2s ease-out;
/*动画效果的执行方式是ease-out，即侧边栏滑动效果为渐变式，而不是生硬的突然变化*/
}
/*控制侧边栏进出的按钮（外部包裹）*/
#wrap {
transition: 0.2s ease-out;
}
/*控制侧边栏进出的按钮（内部文字样式）*/
label {
/*控制侧边栏进出的按钮*/
width: 2rem;
height: 0.25rem;
border-top: 0.25rem solid #fff;
border-bottom: 0.25rem solid #fff;
background-clip: content-box;
background-color: #fff;
padding: 0.5rem 0 0.5rem 0;
margin-left: 1.1rem;
}
li {
@include display;
justify-content: flex-start;
list-style: none;
width: 100%;
height: 2.8em;
font-size: 1.5em;
text-align: center;
border-bottom: 0.1rem solid #c0c0c0;
}
.box {
display: inline-block;
width: 1rem;
height: 1rem;
border-right: 0.2rem solid #5fc0cd;
border-top: 0.2rem solid #5fc0cd;
transform:rotate(45deg);
position: absolute;
right: 2.5rem;
}
html:
<ul id="sideul">
<li>
<img class="name" src="css13-4.png"></img>
<a class="name font-blue" href="https://xyz0703.github.io/learngit/css13/css13-2.html">公告</a>
<div class="box"></div>
</li>
<li>
<img class="name" src="css13-3.png"></img>
<a class="name font-blue" href="https://xyz0703.github.io/learngit/css13/css13-2.html">设置</a>
<div class="box"></div>
</li>
<li>
<img class="name" src="css13-6.png"></img>
<a class="name font-blue" href="https://xyz0703.github.io/learngit/css13/css13-2.html">帮助</a>
<div class="box"></div>
</li>
<li>
<img class="name" src="css13-5.png"></img>
<a class="name font-blue" href="https://xyz0703.github.io/learngit/css13/css13-2.html">关于</a>
<div class="box"></div>
</li>
</ul>
</aside>
<div id='wrap'>
<!--for 属性规定 label 与哪个表单元素绑定，即将这个控制侧边栏进出的按钮与checkbox绑定-->
<div class="padding">
<header class="name">
<label id='sideMenuControl' for='sidemenu'></label>
</header>
试验了几次，对checkbox的理解也加深了。还有学习了ps的油漆桶的使用
成功的把侧边栏的几个图标颜色改了。
明日目标：
任务14
遇到的问题：
加快进度
收获：
对sass理解加深了
返回列表
评论