黑马前端 2024 · 教程站

主题

小兔鲜儿（二） ​

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

学习目标 ​

  • 能够为生鲜列表项搭建 A > pic + info + price 的结构，并为图片容器设置固定宽高、居中显示，保证图片受容器约束。
  • 能够将文字信息拆分为标题、规格、类型三个独立盒子，并分别设置字号、行高、间距和颜色，避免用一个盒子堆叠多行内容。
  • 能够制作价格模块，使用外层容器与 span 区分人民币符号、整数和小数，并分别设置字号与颜色。
  • 能够使用“最近父级类名 + 最大盒子类名”的层级选择器编写样式，避免 left/right/A 等公共选择器造成样式污染。
  • 能够完成“找相似”悬浮模块的结构、文字、字体图标与微调，并通过浏览器检查布局和跳转链接是否正确。
  • 能够使用 position: relative/absolute、overflow: hidden 和 transition 实现鼠标经过列表项时底部绿色盒子平滑上滑的动画效果。

知识点 ​

先搭底部外壳 ​

为什么需要：底部是一整块浅灰背景区域，先把“背景层”和“内容层”分开，后面服务、帮助、版权都放进内容容器里，结构才稳定。
怎么想：.footer 负责高度和背景色，.wrapper 负责内容宽度与居中；不要把内容宽度写死在 .footer 上。
怎么做：

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

易错点：底部总高度写在 .footer，内部模块再分别撑开；若公共样式没有定义 --hui、--lv，要先在公共 CSS 中定义，否则后面颜色会失效。

底部服务模块制作 ​

为什么需要：四个服务项要横向等距排列，图标和文字左右组合。
怎么想：ul 用 display:flex + justify-content:space-evenly 做等距；li 再 flex 让图标和文字并排；图标用雪碧图，文字用 text-indent:-999em 隐藏。
怎么做：

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;
}

易错点：h5 里写“省”只是占位，真正显示的是背景图；text-indent 负值要配合 overflow:hidden。第二项 hover 换背景位置，transition 要写在 h5 上，不是写在 li 上。

底部帮助模块 ​

为什么需要：左侧是多列帮助导航，右侧是二维码，整体左右分布。
怎么想：.help 用 flex + space-between；.left 再 flex 排多个 dl；.right ul flex 排两个二维码。
怎么做：

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 .left dd a，不要图省事写成 .content a，否则会把其他区域的 a 一起命中。转写稿里反复调试的“找最近类名、left/right 前加父级”就是这个道理。img 的 alt 要写中文，别留空。

底部版权模块 ​

为什么需要：版权信息需要整体居中，链接和分隔符颜色统一。
怎么想：父级 text-align:center，用 line-height 控制行距；链接单独设颜色和 hover。
怎么做：

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 不会自动继承父级颜色时，要单独写 .copyright a；分隔符 span 用左右 margin 留间距，不要靠敲很多空格。

从转写稿提炼的通用调试点 ​

转写稿里的“子觉父相”应写作“子绝父相”：子元素绝对定位，父元素相对定位；底部以后做升上来动画时，父级要加 position:relative 和 overflow:hidden，过渡 transition 写给真正移动的元素。选择器方面，.right a 可能同时选中“儿子”和“孙子”，必要时用 .right > a 或更近的类名限定。改字体图标大小时要单独选中 i，因为图标常有默认字号，不会随父级 a 继承。

banner轮播图效果示意

先明确本节要做什么 ​

本节先搭 banner 轮播图的外层骨架。笔记里只有 HTML 结构和基础 CSS，没有展开轮播内容本身，所以这一步的目标不是马上写轮播逻辑，而是先把“舞台”搭出来：外层 .banner 负责占位和背景，内层 .wrapper 负责承载后续内容并做裁切。注意笔记开头特别提醒：此时开始要写到 index.css 里面，不要再把样式零散写在 HTML 里。

为什么需要先搭骨架？因为轮播图后面通常会有图片、定位元素、切换内容，如果外层没有固定高度和内容容器，页面会先塌陷，后续定位也没有参照。怎么想？先把结构分成“区域”和“内容容器”两层。怎么做？按笔记保留结构：

HTML结构 ​

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

这里 .banner 是区域，.wrapper 是真正放轮播内容的盒子。易错点是：不要只写 .banner 不写 .wrapper，否则后续内容没有统一容器，定位和裁切都不好控制。

CSS：外层给高度，内层给定位和裁切 ​

为什么 .banner 要给 height: 500px 和背景色？因为轮播区域要先占住 500px 高度，背景色 #F5F5F5 让没有图片时也能看见区域范围。怎么想？外层只负责“有多大、底色是什么”，不负责裁切。怎么做？按笔记写：

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

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

.wrapper 为什么要 position: relative？因为后续轮播内容、定位元素通常要以它为参照，也就是转写稿里反复强调的“子绝父相”：子元素绝对定位，父级要有相对定位。.wrapper 为什么加 overflow: hidden？因为超出容器的内容要裁掉，避免轮播切换或浮层移动时露出外面。转写稿里做“盒子从底下升上来”时也是同一思路：先把盒子定位到外面，父级加 overflow: hidden 裁掉，鼠标经过再让盒子升上来。本节 banner 先把裁切舞台准备好。

易错点：overflow: hidden 要加在真正承载内容的 .wrapper 上，不要随便加到 .banner；.wrapper 没给高度会导致裁切区域不对；position: relative 漏写，后面绝对定位元素会跑到页面其他位置。

从转写稿迁移的调试经验 ​

转写稿这一段实际在讲生鲜商品小 li 的排版，但里面有几条调试经验，后面给 banner 塞内容时同样会用到。

第一，盒子宽高要写死来约束图片。转写稿说商品图盒子“宽高必须写死”，否则图片会把盒子撑开。轮播图里的图片容器也一样，后续要给明确宽高，再让图片适配。

第二，选择器一定找“最近的父级”。转写稿里写 content 里面的 A，结果把里面所有 A 都选中了，距离不对齐。正确思路是写到最近类名下面，比如 .right li 里的 A，必要时再加最大盒子限定。易错点：不要图省事写一个大父级下的标签选择器，容易污染别的模块。

第三，left、right 这类高频词前面要带父级。转写稿反复提醒不要只写 .left，要写清“谁的 left”。这是为了避免和公共类冲突。

第四，过渡写给“正在动的元素”。转写稿做 find 上移动画时，鼠标经过的是 li，但动的是 find，所以 transition 写给 find，不是写给 li。这个口诀后面做轮播切换动画也适用：谁做过渡，给谁加。

第五，定位元素和 overflow: hidden 要配合。转写稿中绿色盒子先 bottom: -85px 藏到下面，父级 li 加 overflow: hidden，鼠标经过把 bottom 改成 0 才升上来。banner 后续做内容进出时也要先想清楚：谁定位、谁裁切、谁改状态。

易错点清单 ​

  1. 样式要写进 index.css，不要继续散写。
  2. .banner 和 .wrapper 都要有 500px 高度，否则区域塌陷。
  3. .wrapper 的 position: relative 不能漏，它是后续定位参照。
  4. overflow: hidden 是裁切关键，加错层级会看不到效果或裁错内容。
  5. 后续写选择器要带最近父级，避免“选到孙子辈”导致样式串味。
  6. 做动画时记住：鼠标经过谁不等于谁在动，过渡要加给真正动的元素。

先看结构：ul 是轨道，li 是一屏图片 ​

为什么需要：轮播图不是把三张图随便堆在一起，而是要把多张图片放在同一条“轨道”里，后面才能整体移动。每个 li 负责一屏，a 包住 img 让图片可点击。
怎么想：ul 当图片轨道，li 当单屏容器，a 当点击入口。
怎么做：保留本节代码，图片 alt 改成中文，避免空 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>
<!-- 小圆点 -->

易错点：不要把多张 img 直接并排写在 ul 下；a 里不要再套 a；alt 不要留空。

为什么 ul 要 flex 和 width:300% ​

为什么需要：display:flex 让多个 li 横向排列，width:300% 表示轨道总宽是父级的三倍，正好为三张轮播图留出三屏宽度。
怎么想：父容器只显示一屏，ul 做成三屏宽，后面移动 ul 才能切换图片。
怎么做：按笔记保留：

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

易错点：只写 flex 不写宽度，图片可能挤在一屏；300% 要和图片数量对应，图片变多时要改。本节笔记没有写 li 的宽度比例，实际轮播时还要让每个 li 占一屏，否则只靠内容撑开不一定严格三等分。

图片要由盒子约束，宽高先写死 ​

为什么需要：转写稿里反复强调“图必须拿盒子包起来”，因为图片原始尺寸不可控，盒子不约束就会把布局撑坏。
怎么想：先定图片盒子，再放图片；盒子宽高写死，图片适应盒子。转写稿以生鲜小 li 为例，说图片盒子约 200×180，并给 margin:0 auto 让盒子居中。
怎么做：给图片容器明确宽高，再用居中或内边距调整位置；banner 里则要让 img 适应 li 的屏宽。
易错点：只给图片写大小、不给父盒子约束；盒子宽高不固定，图片一换布局就乱。

点击区域：给 a 设 block 和内边距 ​

为什么需要：转写稿调试时发现，给 li 加 padding 后，鼠标放到左侧空白处没有“小手”，因为 a 的实际范围变小了。
怎么想：要让整块区域可点，应让 a 变成块级元素并占满父级，再把内容往里挤。
怎么做：转写稿的做法是给 a 设 display:block、height:100%，再用 padding-left:20px 等内边距调整内容位置。
易错点：把内边距加在 li 上而不是 a 上；a 仍是行内元素，点击范围只有文字或图片本身。

选择器要写到最近父级，防止误伤 ​

为什么需要：转写稿里写 .content a 时，左侧其他 a 也被加上样式，导致距离不对齐。
怎么想：先找“离当前元素最近的类名父级”，再必要时加最大盒子限定。
怎么做：不要只写 .content a，应写成 .right li > a 这类更精确的选择器；修改 p 时也写成“最大盒子 + 最近父级 + 标签”。转写稿还提到：right 里的 a 有“亲儿子”和“孙子”，直接写 right a 会把两层都选中，用 li > a 只选亲儿子。
易错点：left、right 前面不加父级；a 的 padding 被孙子 a 继承；选择器范围过大，改一处坏一片。

定位动画与过渡：谁动给谁加 transition ​

为什么需要：转写稿后面做“绿色盒子从底部升上来”的效果，靠的是定位加 overflow:hidden。
怎么想：子绝父相——find 用 position:absolute; left:0; bottom:-85px 先藏到父级下方，父级 li 加 position:relative，并加 overflow:hidden 切掉外面部分；鼠标经过 li 时把 find 的 bottom 改成 0。
怎么做：transition 要加在真正移动的 find 上，不是加在 li 上。
易错点：bottom 正负方向搞反；父级忘了 relative；忘了 overflow:hidden；过渡加错对象。转写稿还提醒，字体图标 i 默认约 16px，给父级 a 改 font-size 不一定生效，要单独选中 i 改大小。

课件图示（PPTX） ​

day12 课件图

day12 课件图

代码示例 ​

示例一：底部模块（服务 + 帮助 + 版权） ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>底部模块 footer</title>
  <style>
    /* ===== 基础重置 + 主题变量（保证示例可运行） ===== */
    * { margin: 0; padding: 0; }
    li { list-style: none; }
    a { text-decoration: none; }
    :root {
      --hui: #999;      /* 灰色文字 */
      --lv: #27BA9B;    /* 主题绿 */
    }
    .wrapper { width: 1240px; margin: 0 auto; }

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

    /* ===== 服务 service ===== */
    .service {
      padding: 60px 0;
      border-bottom: 1px solid #E8E8E8;
    }
    .service ul {
      display: flex;
      /* 缝隙相同 */
      justify-content: space-evenly;
    }
    .service li {
      display: flex;
      height: 58px;
    }
    .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;
    }

    /* ===== 帮助 help ===== */
    .help {
      display: flex;
      justify-content: space-between;
      height: 300px;
      padding-top: 60px;
    }
    .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;
    }

    /* ===== 版权 copyright ===== */
    .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">

      <!-- 服务 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>

      <!-- 帮助模块 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 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>

关键行与易错点

  • .service ul { display: flex; justify-content: space-evenly; }：space-evenly 让四个 li 之间缝隙相同，比手写 margin 更稳。
  • .service li { display: flex; }：让 h5（精灵图图标）和 p（文字）横排，h5 用 margin-right: 20px 留缝。
  • h5 三件套：overflow: hidden + text-indent: -999em 把「省」字推出可视区，只露出精灵图；transition: all .3s 是给 hover 换图做过渡。
  • 精灵图定位靠 .service li:nth-child(n) h5 { background-position: ... } 逐个给，每张图相差 58px（正好是 h5 的高度）。
  • 易错点：.help .left dd span { color: var(--lv); } 这里的 span 是客服图标，必须从最近的父级 dd 往下选。若图省事写成 .help span 或裸 span，会把下面版权区的 | 分隔符也染绿。
  • 易错点：left / right 这类通用单词一定要带父级（.help .left、.help .right）。单独写 .left 会和页面其它区块撞名，出问题时很难查。
  • .footer 写死 582px，而 service（60+58+60）+ help（60+300）+ copyright 合计会略超，实际项目里以内容撑开为准，别死磕这个数字。

示例二：banner 轮播图结构 ​

html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="

常见错误 ​

  1. 现象：底部 help 左侧 dl 里的链接被撑出左内边距，与设计稿整体右移错位。 原因：图省事写了 .content a { padding-left: 20px } 这类大范围后代选择器，把同一容器里所有 a（包括左侧帮助链接）一起选中了。 修法：从"离目标最近的父类名"开始写，.help .right li > a；跨模块的通用标签样式，前面必须带上最外层大盒子类名做限定。

  2. 现象：.find 里的"发现更多宝贝"链接继承了商品主链接的上/左内边距，位置明显偏移。 原因：.right li a 是后代选择器，儿子 a 和孙子 a 被一起选中。 修法：改成子代选择器 .right li > a，只作用于直接子级；或者给弹出的 a 单独加类名提高权重覆盖。

  3. 现象：.left、.right、.info、.price 这类通用类名在别的模块上莫名其妙多了样式。 原因：类名本身太泛，页面里重复出现，裸写 .left { ... } 就会互相污染。 修法：通用语义类名一律带父级前缀（.help .left、.goods .info）；或者起名时加模块前缀（help-left）。

  4. 现象：鼠标悬停在生鲜 li 的空白区域时，链接不出现小手，点击无反应。 原因：把 padding-left 给了 li，a 只有文字那么宽，可点击区域没有覆盖整块卡片。 修法：a 设 display: block; height: 100%，把内边距/定位给 a 而不是 li，让 a 撑满父盒。

  5. 现象：.find 从底部升起时"唰"地瞬移，没有过渡效果；或者反过来，写在 li 上的 transition 让 li 的其它属性也跟着动。 原因：过渡加错了对象。 修法：谁在动就给谁加 —— .find 位移，transition 写在 .find 上；.li:hover .find 只负责改 bottom 值。

  6. 现象：想让绿色盒子藏到卡片下方，结果它跑到卡片上方去了，或者页面底部多出一截滚动条。 原因：bottom 的正负方向理解反了（数值越大越靠上，负数才是往下推），且 li 没做溢出裁剪。 修法：隐藏态写 bottom: -84px（约等于盒子自身高度），同时给 li 加 position: relative 和 overflow: hidden。

  7. 现象：给 .find a 设了 font-size: 13px，但箭头图标大小纹丝不动。 原因：字体图标是独立的 <i>，自带默认 16px，父级字号不会覆盖它。 修法：单独选中 .find .iconfont { font-size: 13px } 再改。

  8. 现象：.service li h5 加了 text-indent: -999em 后，页面底部出现横向滚动条。 原因：负缩进把内容推到可视区左侧之外，父级没裁剪。 修法：h5 上同时保留 overflow: hidden（已有 width/height 也要确认生效），确保负缩进内容不外溢。

练习 ​

  1. 结构改造：把笔记中生鲜 li 的 .info 从"一个盒子塞三行"改造成"标题 + 规格 + 类型"三个独立盒子，并解释为什么后续接数据时必须这样拆。
  2. 选择器纠错：给出 .content a、.right a、.right li a、.right li > a 四种写法，分别画出它们在"商品主链接 + 弹出层链接"结构下会命中的元素范围，并选出正确的一种。
  3. 点击热区：让生鲜 li 中主链接的点击热区覆盖整张卡片（不含 .find 弹出层），写出所需的三条属性，并说明为什么不给 li 加 padding-left。
  4. 动画实现：用 position: relative + absolute + overflow: hidden + transition 实现"悬停从底部升起 84px 高的绿色条"，并标注每条属性写在哪个选择器上。
  5. 样式隔离：页面里同时存在 footer 的 .left/.right 和 help 的 .left/.right，写出 3 条规则保证两套样式互不干扰。

原视频对照 ​

#视频时长
1生鲜模块li添加图片04:21
2生鲜模块info文字信息模块11:10
3注意事项05:39
4生鲜模块小li价格制作04:37
5生鲜找相似模块开始10:00
6生鲜模块-find结束05:13
7生鲜模块-find微调04:42
8生鲜模块小动画效果07:33

小结 ​

  1. 布局先想"数据怎么接"，再想"视觉怎么排"；一个盒子能装下的前提是它们共用同一份数据，否则必须拆盒。
  2. 选择器的第一原则是就近限定：最近父类名 + 最外层大盒子类名双保险，能挡掉九成的样式串味。
  3. 通用语义类名（left/right/info/list）天然高危，裸写必出事，前缀是成本最低的保险。
  4. 后代选择器 vs 子代选择器，是"儿子"和"儿子加孙子"的区别，涉及弹出层、嵌套链接时尤其要分清。
  5. 可点击范围由元素自身的盒模型决定，不是由父盒子决定 —— 想让整块可点，就把宽高和定位交给 a。
  6. 定位动画三件套的分工：父级 relative + overflow:hidden 负责"藏"，子级 absolute 负责"位"，子级 transition 负责"顺"。
  7. 字体图标的字号永远要单独选中改，它不认父级 font-size。
  8. 凡是出现"多行同款文字"，先想到 line-height；凡是出现"标题比正文大得不对"，先想到标题标签不继承字号。