今天完成的事情:
完成了任务13
今天基本没有遇到什么难度,基本上是检查优化和重写任务7的代码
1.练习使用sass,除了最常用的嵌套和经常配合伪元素使用的&,使用混合,设置变量完成部分重复代码的简化
@mixin flexed($content, $items) {
display: flex;
justify-content: $content;
align-items: $items;
}
.myArticle {
@include flexed(center, center); // 调用混入,并传递两个参数
}
.myNotes {
@include flexed(space-between, center); // 调用混入,并传递两个参数
}
2.弹性盒子的灵活使用,三个同一盒子同一行的元素“span,p,a",要使p和span在左边,a在右边。可以使用float,但float也具有一定缺点,如:脱离文档流,高度塌陷等,使用其他移动元素的属性难以达到效果,则给sapn,a嵌套在同一个div中,使用flex,justify-content:space-between则能轻松完成
<li>
<div class="pic-word">
<span class="sprite1"></span>
<p class="title">公告</p>
</div>
<a href="" class="triangle"></a>
</li>
3.解决了侧边栏右移动时,主要内容不右移动而是缩小的问题,
给主要内容全部装进一个大盒子,使用
input[type="checkbox"]:checked~.bg-box {
padding-left: 70%;
transition: 0.2s ease-out;
}
连接大盒子,给bg-box设置weight:100%就会在,侧边栏右移动时,主要内容也向右移动
评论