zj-Exercise/js/HTML+CSS3/day21/css/style.less

*{
    margin: 0;
    padding: 0;
}

@total-width:750;

.w{
    width: (693/40rem);
    margin: 0 auto;
}

// 设置根元素
html{
    // 设置rem的比值
    font-size: (100vw/@total-width) * 40;
    background-color: #eff0f4;
}

a{
    text-decoration: none;
}

// 设置头部header
.top-bar:extend(.w){
    // 设置弹性容器
    display: flex;
    // 设置高度
    height: (175/40rem);
    line-height: (175/40rem);
    // 设置对齐方式
    justify-content: space-between;
    // 设置辅轴的对齐方式
    align-items: center;


    a{
        color: #24253d;
        font-size: (50/40rem);

        i{
            color: #999;
            font-size: (40/40rem);
        }
    }
}


// 设置banner
.banner:extend(.w){
    img{
        width: 100%;
    }
}

// 设置中间菜单
.menu:extend(.w){
    // 确定元素的高度
    height: (329/40rem);
    // 设置弹性元素
    display: flex;
    // 设置换行
    flex-flow: row wrap;
    // 设置对齐方式
    justify-content: space-between;
    // 设置辅轴方向的对齐方式
    align-content: space-evenly;
    // 设置框的大小
    a{
        width: (327/40rem);
        height: (104/40rem);
        line-height: (104/40rem);
        color: white;
        border-radius: (10/40rem);

        i{
            margin: 0 (20/40rem) 0 (38/40rem);
        }
    }

    .course{
        background-color: #f97053;
    }
    .star{
        background-color: #cd6efe;
    }
    .sub{
        background-color: #fe4479;
    }
    .download{
        background-color: #1bc4fb;
    }
}

// 设置课程列表
.course-list:extend(.w){
    height: (394/40rem);
    display: flex;
    flex-flow: column;
    justify-content: space-between;
    margin-bottom: (46/40rem);
    .title{
        display: flex;
        // 主轴的空间
        justify-content: space-between;
        // 辅轴的对齐方式
        align-items: center;

        h2{
            font-size: (33/40rem);
            color: #24253d;
            border-left: 2px solid #3a84ff;
            padding: 4px;
        }

        a{
            font-size: (28/40rem);
            color: #656565;
        }
    }
}

// 设置课程列表的项
.item-list{
    width: (720/40rem);
    display: flex;
    overflow: auto;
}
.item{
    flex: none;
    box-sizing: border-box;
    width: (320/40rem);
    height: (324/40rem);
    padding: 0 (22/40rem);
    background-color: #fff;
    box-shadow: 0 0 10px rgba(0,0,0,.3);
    border-radius: 5px;
    display: flex;
    flex-flow: column;
    justify-content: space-evenly;
    margin-right: (24/40rem);

    // 设置图片的宽度
    img{
        width: 100%;
        vertical-align: top;
    }

    // 课程标题
    .course-title{
        font-size: (32/48rem);
        color: #24253d;
    }

    // 设置用户信息的容器
    .user-info{
        display: flex;
        align-items: center;
    }

    // 头像
    .avatar{
        width: (42/40rem);
        height: (42/40rem);
    }

    // 用户的昵称
    .nickname{
        margin-left: 6px;
        font-size: (24/40rem);
        color: #969393;
    }
}