1. CSS 基础

  2. 取值单位

  3. 外观样式

  4. 布局样式

  5. 动画样式

  6. 工具与规范

  7. 实例练习

$$demo <header class="navigator"> <img class="logo" src="https://3yya.com/logo-mini.png" alt="logo" /> <span class="name">三眼鸭的编程教室</span> <span class="route"> <a href="https://3yya.com/" target="_blank">首页</a> </span> <span class="route"> <a href="https://3yya.com/" target="_blank">教程</a> <div class="container"> <ul> <li> <a href="https://3yya.com/course/2" target="_blank" >Python</a > </li> <li> <a href="https://3yya.com/course/3" target="_blank" >设计模式</a > </li> <li> <a href="https://3yya.com/course/9" target="_blank">爬虫</a> </li> </ul> </div> </span> <span class="route"> <a href="https://3yya.com/courseware" target="_blank">课件</a> <div class="container"> <ul> <li> <a href="https://3yya.com/courseware/chapter/30" target="_blank" >前端课</a > </li> <li> <a href="https://3yya.com/courseware/chapter/32" target="_blank" >HTML</a > </li> <li> <a href="https://3yya.com/courseware/chapter/43" target="_blank" >CSS</a > </li> </ul> </div> </span> </header> <style> :root { box-sizing: border-box; /* 设置根元素的 box-sizing: border-box */ } *, *:before, :after { box-sizing: border-box; / box-sizing 继承自父元素 */ }

body {
    /* 默认的 body 元素有外边距 */
    /* 将它设置为 0 */
    margin: 0;
}

.logo {
    height: 40px;
}

.navigator {
    /* 元素水平居中 */
    text-align: center;
    height: 60px;
    box-shadow: 0 0 4px #999;
    background-color: white;

    /* 设置元素的行高与元素高度一致 */
    /* 此时内部行内子元素可以通过 vertical-align: middle 垂直居中 */
    line-height: 60px;
}

.logo,
.name,
.route {
    /* 在行内垂直居中 */
    vertical-align: middle;
}

.name {
    font-size: 20px;
    font-weight: bold;
    margin-right: 60px;
}
.navigator a {
    /* 让颜色继承自父辈 */
    color: inherit;
    /* 取消底部下划线 */
    text-decoration: none;
}
.navigator .route {
    position: relative;
    text-align: initial;
    line-height: initial;
}

.navigator .route > a {
    padding: 10px 25px;
    border-radius: 4px;
}

.navigator .route:hover > a {
    background-color: #eee;
}

/* 鼠标在 .route 元素上的时候 */
/* 设置里面 .container 元素的 display: block; */
.navigator .route:hover .container {
    display: block;
}

.navigator .route .container {
    padding-top: 25px;
    position: absolute;
    display: none;

    left: 0;
    top: 25px;
}

.navigator ul {
    width: 140px;
    list-style: none;
    margin: 0;
    padding: 0;
    font-size: 14px;
    border-radius: 4px;
    box-shadow: 0 0 4px #999;
    background-color: white;
}

.navigator ul a {
    display: inline-block;
    padding: 10px;
    width: 100%;
}
.navigator ul a:hover {
    background-color: #eee;
}

</style>

$$