参考发布的前端框架手册, 依照着写出一个类似的小框架—2019年9月11日

/*导航区*/

.nav {

    height: 170px;

    background-color: white;

    box-sizing: border-box;

}

.nav ul {

    margin: 0;

    padding: 6px;

}

.nav ul li {

    list-style-type: none;

    text-align: center;

    height: 75px;

}

.nav ul li img {

    width: 45px;

    height: 45px;

}

.nav ul li a {

    text-align: center;

    color: gray;

    text-decoration: none;

}

.nav ul {

    display: flex;

}

.nav ul li {

    flex: 1;

}

/*推荐课程区*/

h3 {

    color:gray;

}

.courses {

    height: 326px;

    color: gray;

}

.courses ul {

    margin: 0;

    padding: 0;

    list-style: none;

    /*flex布局*/

    display: flex;

}

.courses ul li {

    padding: 5px;

}

.courses ul img {

    width: 100%;

    height: 90px;

}

.courses div {

    background-color: white;

    padding: 10px;

    margin-top: 10px;

    height: 90px;

    /*flex布局*/

    display: flex;

    justify-content: flex-start;

}

.courses div img {

    width: 100%;

    height: 90px;

}

.courses div a {

    text-decoration: none;

    color: gray;

    flex: 0.45;

}

.courses div p {

    flex: .55;

    margin-left: 15px;

}

.courses div p span: