程序员转行大专老师之盒子模型～

四年的前端开发工程师入职大专院校，很幸运教的第一门课是自己的老本行，web前端开发之《H5+CSS3》。备课授课压力一直不大，就是崽子们上课积极性不高。但只要还有一双渴望知识的眼睛，就要认真备课！！！😎
教材用的黑马程序员写的《HTML5+CSS3网站设计基础教程》第三版，有配套的课件，修修改改就能用，讲起来也比较顺。学期过半，讲到盒子模型的背景和CSS渐变属性了，由于之前一直写中台系统，属实碰到知识盲区。写了个小案例，记录一下😇

<div class="bg">
    <ul>
        <li class="top">Take a Break</li>
        <li>生椰拿铁</li>
        <li>小黄油拿铁</li>
        <li>小黄油美式</li>
        <li>橙C美式</li>
        <li>标准美式</li>
    </ul>
</div>

@font-face {
    font-family: AlimamaDaoLiTi;
    src: url("../font/AlimamaDaoLiTi.ttf");
}

@font-face {
    font-family: OFFWHITE;
    src: url("../font/Later.ttf");
}

body {
    background-image: url("../imgs/Destination.png");
    background-repeat: no-repeat;
    background-size: 450px;
    background-position: right bottom;
    background-color: #fad0c473;
}

div,
ul,
li {
    margin: 0;
    padding: 0;
    outline: none;
    list-style: none;
}

.bg {
    width: 600px;
    margin: 50px auto;
    padding: 40px;
    border-radius: 60%;
    border: 10px solid #f9f4f4;
    background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);
}

ul {
    margin: 0 auto;
}

ul li {
    height: 55px;
    margin-bottom: 2px;
    font-size: 28px;
    color: #f9e3c5;
    line-height: 55px;
    text-align: center;
    font-family: AlimamaDaoLiTi;
}

ul .top {
    padding-top: 200px;
    background-image: url("../imgs/coffee.png");
    background-repeat: no-repeat;
    background-position: center top;
    font-family: OFFWHITE;
    font-size: 40px;
    letter-spacing: 4px;
    word-spacing: 8px;
}

好看的插画
CSS 渐变
免费字体