黑马前端 2024 · 教程站

主题

小兔鲜儿（一） ​

本页对应 小兔鲜儿，共 8 段视频，约 58 分钟。

学习目标 ​

  • 能按“布局属性 → 盒模型属性 → 文字属性 → 点缀属性”的顺序书写 CSS，并说明各类声明应放置的位置。
  • 能判断底部模块何时采用“通栏大盒子套版心”、何时采用“版心 + 双类名”，并完成对应结构搭建。
  • 能使用 Flex 布局与 space-evenly、space-between 完成底部服务模块 li 横排及帮助模块左右分栏，并通过浏览器预览验证效果。
  • 能使用 H5 + 小P 结构、text-indent 与 overflow: hidden 隐藏文字，并用精灵图 background-position 为四个服务项配置不同图标。
  • 能使用 :hover 与 transition 为 H5 添加鼠标经过切换精灵图的效果。
  • 能按内容相关性拆分底部帮助模块，使用 dl/dt/dd 和左右盒子完成结构搭建，并设置高度、padding-top 与背景色。

知识点 ​

底部整体结构：通栏大盒子套版心 ​

为什么需要：底部背景是通栏的，但内容不能通栏，必须约束到版心里。转写稿里反复强调：只要“底色通栏、内容居中”，就是“大盒子套版心”。

怎么想：先写 .footer 作为通栏大盒子，只给高度和背景色，不给固定宽度；里面的 .wrapper 负责版心居中。底部再按相关性拆成服务、帮助、版权三块。

怎么做：保留笔记结构：

html
  <!-- 底部开始 -->
  <div class="footer">
    <div class="wrapper">
     
    </div>
  </div>
  <!-- 底部结束 -->
css
.footer {
  height: 582px;
  background-color: #F5F5F5;
}

易错点：不要给 .footer 写死宽度；服务、帮助、版权模块应放在 .wrapper 里。转写稿提到“双类名”场景：如果某个版心盒子还要单独加 display:flex，可写成 class="wrapper header"，避免影响其他版心。

底部服务模块：先搭大盒子，再排四个 li ​

为什么需要：服务模块有上下内边距和底部分隔线，内部四项要等距排列。

怎么想：先把 .service 看成整体，给上下 padding 和下边框；再写 ul 用 flex，用 space-evenly 让缝隙相同；每个 li 内部再放图标 h5 和文字 p。

怎么做：

html
<!-- 服务 service -->
<div class="service">
  <ul>
    <li>
      <h5>省</h5>
      <p>价格亲民</p>
    </li>
    <li>
      <h5>省</h5>
      <p>价格亲民</p>
    </li>
    <li>
      <h5>省</h5>
      <p>价格亲民</p>
    </li>
    <li>
      <h5>省</h5>
      <p>价格亲民</p>
    </li>
  </ul>
</div>
css
.service {
  padding: 60px 0;
  border-bottom: 1px solid #E8E8E8;
}

.service ul {
  display: flex;
  /* 缝隙相同 */
  justify-content: space-evenly;
}

.service li {
  display: flex;
  /* width: 190px; */
  height: 58px;
  /* background-color: pink; */

}

.service li h5 {
  overflow: hidden;
  width: 58px;
  height: 58px;
  margin-right: 20px;
  background: url(../images/sprite.png);
  text-indent: -999em;
  transition: all .3s;
}

.service li p {
  font-size: 28px;
  line-height: 58px;
}

.service li:nth-child(2) h5 {
  background-position: 0 -58px;
}

.service li:nth-child(2) h5:hover {
  background-position: 0 -116px;
}

.service li:nth-child(3) h5 {
  background-position: 0 -116px;
}

.service li:nth-child(4) h5 {
  background-position: 0 -174px;
}

易错点：li 可以先给 190×58 和粉色背景确认四个盒子排好，再删宽或保留；宽度不够时文字会掉下来。隐藏文字用 text-indent:-999em 加 overflow:hidden，不要用 display:none，否则背景图也没了。改精灵图时选“第几个 li 里的 h5”，不是“第几个 h5”：li:nth-child(2) h5。竖排精灵图 X 轴为 0，Y 轴按 58 递增，坐标是负值。

帮助模块：按相关性分左右 ​

为什么需要：左侧是购物指南等多组 dl，右侧是两个二维码，相关性不同，应分左右两大块。

怎么想：.help 给高度、上内边距，并用 flex 和 space-between 分左右；左侧 .left 再 flex 排多个 dl；右侧 .right 的 ul 用 flex 排两个 li。

怎么做：保留笔记代码，图片 alt 改为中文：

html
<!-- 帮助模块 help -->
<div class="help">
  <div class="left">
    <dl>
      <dt>购物方式</dt>
      <dd><a href="#">购物流程</a></dd>
      <dd><a href="#">支付方式</a></dd>
      <dd><a href="#">售后规则</a></dd>
    </dl>
    <dl>
      <dt>购物方式</dt>
      <dd><a href="#">购物流程</a></dd>
      <dd><a href="#">支付方式</a></dd>
      <dd><a href="#">售后规则</a></dd>
    </dl>
    <dl>
      <dt>购物方式</dt>
      <dd><a href="#">购物流程</a></dd>
      <dd><a href="#">支付方式</a></dd>
      <dd><a href="#">售后规则</a></dd>
    </dl>
    <dl>
      <dt>购物方式</dt>
      <dd><a href="#">购物流程</a></dd>
      <dd><a href="#">支付方式</a></dd>
      <dd><a href="#">售后规则</a></dd>
    </dl>
    <dl>
      <dt>购物方式</dt>
      <dd>
        <a href="#">在线客服</a>
        <span class="iconfont icon-customer-service"></span>
      </dd>
      <dd><a href="#">客服电话 400-0000-000</a></dd>
      <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
    </dl>
  </div>
  <!-- 右侧 -->
  <div class="right">
    <ul>
      <li>
        <img src="./images/wechat.png" alt="微信公众号二维码">
        <p>微信公众号</p>
      </li>
      <li>
        <img src="./images/app.png" alt="APP下载二维码">
        <p>APP下载二维码</p>
      </li>
    </ul>
  </div>
</div>
css
/* 帮助 */
.help {
  display: flex;
  justify-content: space-between;
  height: 300px;
  padding-top: 60px;
  /* background-color: pink; */
}

.help .left {
  display: flex;
}

.help .left dl {
  margin-right: 80px;
}

.help .left dt {
  font-size: 18px;
  margin-bottom: 30px;
}

.help .left dd {
  margin-bottom: 10px;
}

.help .left dd a {
  font-size: 16px;
  color: var(--hui);
}

.help .left dd a:hover {
  text-decoration: underline;
}

.help .left dd span {
  color: var(--lv);
}

.help .right ul {
  display: flex;
}

.help .right li:last-child {
  margin-left: 55px;
}

.help .right li img {
  width: 120px;
  height: 120px;
}

.help .right p {
  margin-top: 10px;
  color: var(--hui);
  text-align: center;
}

易错点：先搭 .help 大盒子，量高度约 300、上内边距 60，再加粉色背景调试；不要一上来抠字。dl 里是 dt 和多个 dd，别写错层级。左右用 flex 后，左侧多个 dl 才会横排。

版权模块：居中与链接颜色 ​

为什么需要：版权信息要整体居中，链接默认灰色，悬停变主题绿。

怎么做：

html
<!-- 底部版权 -->
<div class="copyright">
  <p>
    <a href="#">关于我们</a> <span>|</span>
    <a href="#">帮助中心</a> <span>|</span>
    <a href="#">售后服务</a> <span>|</span>
    <a href="#">配送与验收</a> <span>|</span>
    <a href="#">商务合作</a> <span>|</span>
    <a href="#">搜索推荐</a> <span>|</span>
    <a href="#">友情链接</a>
  </p>
  <p>CopyRight © 小兔鲜</p>
</div>
css
.copyright {
  text-align: center;
  line-height: 30px;
  color: var(--hui);
}

.copyright a {
  color: var(--hui);
}

.copyright a:hover {
  color: var(--lv);
}

.copyright span {
  margin: 0 5px;
}

易错点：a 不会自动继承你要的悬停色，需单独写 :hover；分隔线 span 用左右 margin，别用多余空格硬撑。整体仍按 CSS 书写顺序：布局属性在前，盒模型其次，文字再次，点缀最后。

先看效果与本节目标 ​

轮播图区域效果示意图

这一节先搭轮播图的“舞台”，不急着写轮播内容。转写稿里提到，banner 这类模块典型要“大盒子套版心”：外层 banner 有底色、要通栏，所以不能给它固定宽度；里面的内容又不能通栏，要约束到版心里。于是结构上就是 .banner 包一个 .wrapper。注意此时开始要写到 index.css 里面，不要继续把样式散落在旧位置。

为什么需要：轮播图外层负责整屏底色，内层负责内容范围，两者职责不同。
怎么想：先判断“谁通栏、谁不通栏”，再决定谁给宽、谁只给高。
怎么做：先写 banner 大盒子，再写 wrapper 版心盒子。
易错点：不要给 .banner 直接加固定宽度，否则通栏底色会被截断；也不要把内容直接塞在 .banner 里。

HTML结构：先搭两层容器 ​

html
  <!-- banner开始 -->
  <div class="banner">
    <div class="wrapper">
     
    </div>
  </div>
  <!-- banner结束 -->

为什么需要：.banner 是通栏背景层，.wrapper 是内容约束层。
怎么想：按转写稿的调试思路，先看大盒子，再看里面有没有版心；结构清晰后再写样式。
怎么做：保留笔记里的两层结构，wrapper 内暂时为空，后续再放轮播内容。
易错点：类名不要随意换；本节笔记明确使用 banner 和 wrapper。wrapper 里现在为空是正常的，不要为了“看起来有内容”提前编造轮播结构。

CSS样式：通栏底色与版心内容分离 ​

css
/* banner 开始 */
.banner {
  height: 500px;
  background-color: #F5F5F5;
}

.banner .wrapper {
  position: relative;
  /* 溢出隐藏 */
  overflow: hidden;
  height: 500px;
}

为什么需要：banner 需要 500px 高的浅灰底色；wrapper 需要为后续轮播内容提供定位参照，并把超出部分隐藏。
怎么想：转写稿强调 banner 有底色、是通栏的，所以 .banner 只给高和背景，不给宽度约束；内容要进版心，所以 .wrapper 补 position: relative、overflow: hidden 和高度。
怎么做：先写 .banner 的高和背景，再写 .banner .wrapper。position: relative 是布局属性，overflow: hidden 也是显示/溢出控制，按书写顺序应靠前；高度属于盒子模型。
易错点：overflow: hidden 不要漏，否则后面轮播内容超出时容易露出或出现滚动条；position: relative 不要漏，否则内部绝对定位元素可能找错参照。本节代码没有在 .wrapper 里重复写宽度，先按笔记只补这些属性；如果项目里已有版心样式，就复用，不要在这里随意加宽度。

书写顺序与调试检查 ​

为什么需要：转写稿专门讲了 CSS 书写顺序：先布局相关（display、position、浮动、visibility、overflow 等），再盒子模型（宽高、内外边距、背景、边框），再文字内容，最后点缀属性。顺序规范，代码更好读，也减少渲染和排查成本。
怎么想：写 .banner .wrapper 时，先写 position 和 overflow，再写 height，正好符合这个顺序。
怎么做：保存后看页面是否出现 500px 高的浅灰 banner 区域；再用调试工具选中 .banner 和 .wrapper，确认外层通栏、内层有高度且溢出隐藏。转写稿里“先搭大盒子、给宽高背景色、调好位置，再往里装内容”的思路，在这里就是先确认 banner 和 wrapper 没问题。
易错点：不要把 overflow: hidden 写到文字样式后面；不要给 .banner 加宽度；不要急着写轮播内部内容，先把容器搭稳。转写稿里说的“版心”不要写成“板心/百信/担心”，统一写“版心”；“通栏”不要写成“通懒”。

结构：先搭 banner 图片轨道 ​

为什么需要：banner 轮播图通常有多张图片，结构要能表达“一个可视区域里放多条图片项”，后面才好做切换。笔记用 ul > li > a > img，是为了让图片可点击跳转，同时列表结构清晰。
怎么想：先把 banner 看成外层通栏大盒子，里面放版心 wrapper；版心里再放图片轨道 ul，每个 li 是一张图。不要一上来就写复杂样式，先把结构搭出来。
怎么做：保留笔记代码，把 alt 改成中文，便于图片加载失败时说明内容；小圆点先留注释，后续再补。

html
<!-- 轮播图图片 -->
<ul>
  <li><a href="#"><img src="./uploads/banner1.png" alt="轮播图图片1"></a></li>
  <li><a href="#"><img src="./uploads/banner1.png" alt="轮播图图片2"></a></li>
  <li><a href="#"><img src="./uploads/banner1.png" alt="轮播图图片3"></a></li>
</ul>
<!-- 小圆点 -->

易错点：alt 不要空着；a 要包住 img；三张图对应三个 li，数量要一致；类名直译即可，不用死背，但同一模块命名要统一。

图片横排：flex 与 300% 轨道 ​

为什么需要：li 默认是块级排列，会上下堆。轮播图需要多张图横向排成一条“轨道”，所以要让 ul 变成 flex 容器。
怎么想：ul 是 li 的父级，给 ul 写 display: flex，li 就会在一行。笔记里 width: 300% 表示轨道宽度是版心的三倍，对应三张图；注释里的 3720px 是固定宽度写法，作为对照保留。
怎么做：

css
.banner .wrapper>ul {
  display: flex;
  width: 300%;
  /* width: 3720px; */
}

写的时候按 CSS 书写顺序，display 属于布局属性，要往前写。
易错点：不要把 display:flex 写给所有 ul，要用 .banner .wrapper>ul 限定范围；百分比是相对父级版心宽度，不是相对整个屏幕；只写 ul 宽度还不够，图片是否铺满还要在调试工具里看 li、img 的尺寸和图片路径。转写稿里也强调“写 1 到 2 句就预览一下”，不要一口气写完再猜。

为什么需要：banner 往往有通栏底色，但里面的图片内容要约束在版心里，不能跟着屏幕无限拉宽。
怎么想：转写稿明确说：“banner 盒子典型又要套版心了，因为它有一个底色是通栏的，但是里面的内容不能通栏，要在版心里，所以是大盒子套版心。”
怎么做：外层 .banner 负责通栏，不把内容宽度卡死；里面的 .wrapper 负责版心宽度和居中；图片轨道 ul 放在 .wrapper 内。
易错点：把宽度约束直接加在 .banner 上，会导致底色不通栏；选择器推荐“类加后代”，但类选择器个数不要超过 3 个，不要一层一层写太长；不要把“版心”写成“板心/版新”，术语要统一。

调试与书写规范 ​

为什么需要：banner 图片不横排、不显示、宽度不对时，要靠调试工具定位，而不是反复猜。
怎么想：先看结构，再看样式。转写稿建议打开调试工具选中盒子看结构，也建议写一点就预览。CSS 顺序按：布局属性（display、position、float、overflow 等）→ 盒子模型（宽高、padding、margin、背景、边框）→ 文字内容 → 点缀属性（圆角、阴影、鼠标样式等）。
怎么做：选中 ul 看是否生效 display:flex 和 width:300%；选中 li 看尺寸是否被内容撑开；选中 img 看路径是否正确。
易错点：同音字术语要纠正：padding 不是“拍丁”，margin 不是“马诊”，space-evenly 不是“疑问里”；选择器冒号左右不要乱加空格；先搭大盒子再装内容，不要一开始就抠小细节。

课件图示（PPTX） ​

day11 课件图

day11 课件图

代码示例 ​

示例一：底部盒子 + 服务模块（精灵图 + space-evenly） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部服务模块</title>
  <style>
    /* 通用重置：按项目已有基础样式 */
    * { margin: 0; padding: 0; box-sizing: border-box; }
    li { list-style: none; }
    a { text-decoration: none; }

    /* 笔记中直接使用 var(--hui)/var(--lv)，此处补上变量定义 */
    :root { --hui: #666; --lv: #27ba9b; }

    /* 版心：通栏大盒子里的内容约束到版心 */
    .wrapper { width: 1240px; margin: 0 auto; }

    /* 底部大盒子 */
    .footer {
      height: 582px;
      background-color: #F5F5F5;
    }

    /* 服务模块 */
    .service {
      padding: 60px 0;
      border-bottom: 1px solid #E8E8E8;
    }

    .service ul {
      display: flex;
      /* 缝隙相同 */
      justify-content: space-evenly;
    }

    .service li {
      display: flex;
      /* width: 190px; */
      height: 58px;
      /* background-color: pink; */
    }

    .service li h5 {
      overflow: hidden;
      width: 58px;
      height: 58px;
      margin-right: 20px;
      background: url(../images/sprite.png);
      text-indent: -999em;
      transition: all .3s;
    }

    .service li p {
      font-size: 28px;
      line-height: 58px;
    }

    .service li:nth-child(2) h5 {
      background-position: 0 -58px;
    }

    .service li:nth-child(2) h5:hover {
      background-position: 0 -116px;
    }

    .service li:nth-child(3) h5 {
      background-position: 0 -116px;
    }

    .service li:nth-child(4) h5 {
      background-position: 0 -174px;
    }
  </style>
</head>
<body>
  <!-- 底部开始 -->
  <div class="footer">
    <div class="wrapper">
      <!-- 服务 service -->
      <div class="service">
        <ul>
          <li>
            <h5>省</h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5>省</h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5>省</h5>
            <p>价格亲民</p>
          </li>
          <li>
            <h5>省</h5>
            <p>价格亲民</p>
          </li>
        </ul>
      </div>
    </div>
  </div>
  <!-- 底部结束 -->
</body>
</html>

要点解释

  • 通栏大盒子套版心：.footer 是通栏的浅灰底，不能给宽度，只给高度和背景色；内容再用 .wrapper 约束到版心居中。转写稿原话：“一个通栏的大盒子套版心，这样内容就居中一起了。”
  • padding: 60px 0 而不是 margin：.service 自己有 border-bottom，用 margin 的话盒子高度不变、线会被“推不下去”，用 padding 才是内容下来、下边框也下来。转写稿：“marin 的话这个线就死活下不来，给 padding 值合适。”
  • justify-content: space-evenly：四个 li 之间的缝隙完全相等。转写稿：“两侧对齐是 space-between，两倍缝隙是 space-around，缝隙一样大叫 space-evenly，这里 finally 用上了。”
  • 精灵图竖排的坐标：每个 h5 是 58×58，所以 Y 轴依次是 0 / -58 / -116 / -174，X 轴不用动。转写稿：“竖着排最大的优点是 X 轴不用动，58 乘 2 是 116，乘 3 是 174。”
  • 易错点 1：选“第几个 li 里的 h5”，不是“第几个 h5”。每个 li 里只有一个 h5，写 nth-child 选 h5 是选不中的，必须 .service li:nth-child(2) h5，注意 li 与 h5 之间有空格（后代选择器），冒号左右不能加空格。
  • 易错点 2：隐藏文字三件套——text-indent: -999em 把字移走，overflow: hidden 把溢出的部分藏掉，而 overflow 属于布局属性，按 CSS 书写顺序要写在最前面。
  • 易错点 3：transition 写在 h5 本体上，不是写在 :hover 里，否则鼠标移出没有过渡。
  • li 的 width: 190px 可以不给：左右两个子盒子会自然把 li 撑开，写死宽度反而容易让“价格亲民”掉下来（转写稿里专门演示过删掉宽度后更抗挤）。

示例二：底部帮助模块（dl/dt/dd + 左右分栏） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部帮助模块</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    li { list-style: none; }
    a { text-decoration: none; }

    :root { --hui: #666; --lv: #27ba9b; }

    .wrapper { width: 1240px; margin: 0 auto; }

    .footer {
      height: 582px;
      background-color: #F5F5F5;
    }

    /* 帮助 */
    .help {
      display: flex;
      justify-content: space-between;
      height: 300px;
      padding-top: 60px;
      /* background-color: pink; */
    }

    .help .left {
      display: flex;
    }

    .help .left dl {
      margin-right: 80px;
    }

    .help .left dt {
      font-size: 18px;
      margin-bottom: 30px;
    }

    .help .left dd {
      margin-bottom: 10px;
    }

    .help .left dd a {
      font-size: 16px;
      color: var(--hui);
    }

    .help .left dd a:hover {
      text-decoration: underline;
    }

    .help .left dd span {
      color: var(--lv);
    }

    .help .right ul {
      display: flex;
    }

    .help .right li:last-child {
      margin-left: 55px;
    }

    .help .right li img {
      width: 120px;
      height: 120px;
    }

    .help .right p {
      margin-top: 10px;
      color: var(--hui);
      text-align: center;
    }
  </style>
</head>
<body>
  <div class="footer">
    <div class="wrapper">
      <!-- 帮助模块 help -->
      <div class="help">
        <div class="left">
          <dl>
            <dt>购物方式</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>购物方式</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>购物方式</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>购物方式</dt>
            <dd><a href="#">购物流程</a></dd>
            <dd><a href="#">支付方式</a></dd>
            <dd><a href="#">售后规则</a></dd>
          </dl>
          <dl>
            <dt>购物方式</dt>
            <dd>
              <a href="#">在线客服</a>
              <span class="iconfont icon-customer-service"></span>
            </dd>
            <dd><a href="#">客服电话 400-0000-000</a></dd>
            <dd><a href="#">工作时间 周一至周日 8:00-18:00</a></dd>
          </dl>
        </div>
        <!-- 右侧 -->
        <div class="right">
          <ul>
            <li>
              <img src="./images/wechat.png" alt="">
              <p>微信公众号</p>
            </li>
            <li>
              <img src="./images/app.png" alt="">
              <p>APP下载二维码</p>
            </li>
          </ul>
        </div>
      </div>
    </div>
  </div>
</body>
</html>

要点解释

  • 先分左右，再填内容：.help 用 display: flex + justify-content: space-between，左边 .left 自己再 display: flex 排五个 dl，右边 .right 靠 space-between 自动顶到右侧。转写稿：“根据相关性分左右，左边一堆 dl，右边 ul + li。”
  • height: 300px + padding-top: 60px 是“高度剩余法”：给死盒子高度后，上面留 60 的间距，剩下的空间由内容自然占，下一个盒子（版权）会贴着 300 的底边走，不用再调 margin。
  • 结构关系不能写错：dl > dt + dd，dt 是标题、dd 是每一行，a 要包在 dd 里面；写反了 margin-bottom: 30px 就会作用到错误的元素上。
  • 易错点：第五个 dl 里的 span 用的是字体图标 iconfont icon-customer-service，需要页面已引入 iconfont 字体文件，否则只是一个空 span 不显示；它的颜色由 .help .left dd span { color: var(--lv); } 控制。
  • li:last-child { margin-left: 55px } 只给第二个二维码加左间距，不要写成给每个 li 加 margin-right，最后一个会多出一段把右侧撑宽。
  • 选择器层级控制：.help .left dd a 是“类 + 后代”的典型写法，类选择器个数不超过 3 个（转写稿明确要求），不要一层层点到 5 层。

示例三：底部版权模块 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部版权模块</title>
  <style>
    * { margin: 0; padding: 0; box-sizing: border-box; }
    a { text-decoration: none; }

    :root { --hui: #666; --lv: #27ba9b; }

    .wrapper { width: 1240px; margin: 0 auto; }

    .footer {
      height: 582px;
      background-color: #F5F5F5;
    }

    .copyright {
      text-align: center;
      line-height: 30px;
      color: var(--hui);
    }

    .copyright a {
      color: var(--hui);
    }

    .copyright a:hover {
      color: var(--lv);
    }

    .copyright span {
      margin: 0 5px;
    }
  </style>
</head>
<body>
  <div class="footer">
    <div class="wrapper">
      <!-- 底部版权 -->
      <div class="copyright">
        <p>
          <a href="#">关于我们</a> <span>|</span>
          <a href="#">帮助中心</a> <span>|</span>
          <a href="#">售后服务</a> <span>|</span>
          <a href="#">配送与验收</a> <span>|</span>
          <a href="#">商务合作</a> <span>|</span>
          <a href="#">搜索推荐</a> <span>|</span>
          <a href="#">友情链接</a>
        </p>
        <p>CopyRight © 小兔鲜</p>
      </div>
    </div>
  </div>
</body>
</html>

要点解释

  • 整块居中只用 text-align: center：两行 p 都是行内内容，父盒子给文字居中即可，不用给 p 单独设宽度或 margin。
  • line-height: 30px 同时解决行高和上下间距：行高一致，两行文字的基线间距就整齐，比给 p 写 margin 更稳。
  • 竖线用 span 而不是直接打字：span { margin: 0 5px } 统一控制竖线与左右链接的距离；如果直接写“|”，间距就得靠空格控制，不可控。
  • 易错点：a 的颜色要单独写。color 是继承属性，但 a 有浏览器默认色（蓝色），只给 .copyright 设颜色管不到链接，必须再写 .copyright a { color: var(--hui); }，hover 时再改成 var(--lv)。
  • 注意 --hui / --lv 两个 CSS 变量要在 :root 里定义（本段代码已补上），否则 var(--hui) 无效，颜色会回退成默认值——这是笔记里没写、但直接抄会踩的坑。
  • .footer 的 height: 582px 是写死的：三块内容（service 60+58+60、help 300、copyright）叠加后接近这个高度，如果后续加内容超出会被裁掉/溢出，实际项目里可以考虑删掉固定高度让内容撑开。

常见错误 ​

  1. 现象：service 第2个起图标不切换。原因：写成 .service li h5:nth-child(2)，把 nth-child 挂到了 h5 上。修法：先选 li 再选后代 h5，如 .service li:nth-child(2) h5{background-position:0 -58px}，第3/4个同理。
  2. 现象：价格亲民被挤到下一行，换图后 li 变形。原因：li 写死 width:190px，内部 h5+p 总宽接近或超过，flex 子项被压缩。修法：优先删 li 宽度只留 height:58px，或保证 flex-shrink:0 并留足宽度；先搭4个 li 再填内容。
  3. 现象：logo/隐藏文字点击区域不对，文字隐藏后布局异常。原因：h1 与 a 的覆盖关系没处理，text-indent 给错元素。修法：用 h1>a，a 铺满 h1，text-indent:-999em;overflow:hidden 给 a；service 中文字在 h5 内则隐藏给 h5。
  4. 现象：banner 切换时露出旁边图或出现横向滚动。原因：wrapper 未裁切，或 ul 未加宽、li/img 未定宽。修法：.banner .wrapper{position:relative;overflow:hidden}，.wrapper>ul{display:flex;width:300%}，li{width:33.333%}，img{width:100%;display:block}。
  5. 现象：footer/banner 背景只到1200px，或 header 的 flex 污染其他 wrapper。原因：通栏盒与版心盒混用，双类名作用域没隔离。修法：通栏父盒不给宽，内部再套 .wrapper；局部布局用双类名如 .header.wrapper{display:flex}，不要给全局 .wrapper 加 flex。
  6. 现象：help 左右变上下，或右侧掉下去。原因：.help 未设 flex/space-between，子项宽度溢出。修法：.help{display:flex;justify-content:space-between}，left/right 作为两个子项，内部再各自 flex；高度用 height:300px;padding-top:60px 控制。
  7. 现象：CSS 越写越乱，后写 margin 覆盖前面布局。原因：未按布局→盒模型→文字→点缀顺序，选择器层级过深。修法：display/position/overflow 前置，宽高 padding margin 次之，文字再次，圆角阴影最后；类选择器层级控制在3层内。

练习 ​

  1. 完成 service：4个 li 不写死宽度，h5+p 同行，h5 为 58×58 精灵图，文字隐藏，第2个 hover 换到 0 -116px，第3/4个按58步长定位；写出关键选择器。
  2. 用调试工具还原 help：父级左右分栏，left 内5个 dl，right 内2个 li；说明为什么用 height:300px;padding-top:60px 而不是只给 margin-top。
  3. 补全 banner 轮播静态结构：wrapper 裁切、ul 三屏轨道、li/img 自适应；指出 overflow:hidden 应加在哪个元素，并给出一个反例。
  4. 场景判断：footer、banner、header 三处分别用“通栏套版心”还是“版心+双类名”，各写一段最小 CSS；再改出一个错误写法并说明后果。
  5. 修复题：给出错误 .service li h5:nth-child(2){...}，以及 .help .left{display:flex} 但 .help 未 flex 的代码；改到图标正确切换且左右分栏成立。

原视频对照 ​

#视频时长
1复习和反馈15:17
2css书写顺序04:47
3底部服务模块开始08:20
4底部服务模块小li制作08:40
5底部服务模块小li布局完成04:24
6底部服务模块结束06:58
7鼠标经过h502:10
8底部帮助模块开始08:16

小结 ​

  1. 底部按 service/help/copyright 三段拆分，先定大盒高度、内边距、边框，再填内容。
  2. 通栏与版心分离是 footer、banner 的第一决策；局部布局用双类名隔离。
  3. service 的稳定结构是 ul flex + li flex + h5/p；li 宽度不是必需，高度和同行关系才是关键。
  4. 精灵图竖排时 X 轴固定为0，Y 轴按58的倍数取负值；选图先选 li 再选 h5，hover 坐标成对。
  5. help 用“高度剩余法”控制上下距离，左右分栏用 flex + space-between，内部 dl/li 再分组。
  6. banner 轮播静态三件套：容器裁切、轨道加宽、图片自适应，缺一会露图或滚动。
  7. CSS 书写顺序固定为布局→盒模型→文字→点缀，选择器层级≤3，便于覆盖和排查。
  8. 还原页面优先用调试工具看结构和盒子，不要逐行抄旧代码。