发表于: 2020-06-24 21:22:39

1 1070


今天完成的事情:

完成了任务13


今天基本没有遇到什么难度,基本上是检查优化和重写任务7的代码

1.练习使用sass,除了最常用的嵌套和经常配合伪元素使用的&,使用混合,设置变量完成部分重复代码的简化

@mixin flexed($content$items) {
    displayflex;
    justify-content$content;
    align-items$items;
}
 
  .myArticle {
    @include flexed(centercenter);  // 调用混入,并传递两个参数
 }
 
  .myNotes {
    @include flexed(space-betweencenter); // 调用混入,并传递两个参数
}


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-left70%;
    transition0.2s ease-out;
}

连接大盒子,给bg-box设置weight:100%就会在,侧边栏右移动时,主要内容也向右移动


返回列表 返回列表
评论

    分享到