黑马前端 2024 · 教程站

主题

小兔鲜儿（四） ​

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

学习目标 ​

  • 能够独立完成“新鲜好物”头部样式，并通过浏览器验证标题字号、字重、颜色、间距、图标、垂直居中及 hover 变色效果符合要求。
  • 能够使用 Flex 布局搭建“新鲜好物”bd 模块，实现 ul 两端对齐、li 固定宽高，并按 a > .pic > img + h4 + p 结构组织商品内容。
  • 能够完成 bd 模块单个 li 的图片、标题和价格样式，验证文字水平居中、标题上下间距、价格字号差异及颜色显示正确。
  • 能够对商品链接 a 进行块级化与高度撑满处理，并添加 title 提示，使整个卡片区域可点击且悬停体验完整。
  • 能够使用“禁止换行、溢出隐藏、省略号替代”三步法处理单行文字溢出，并将其封装为可复用类名后应用到商品标题。
  • 能够复制并改造“人气推荐”模块，通过新增 recomment 类名和层叠选择器单独修改该模块卡片底色与文字样式，且不影响“新鲜好物”模块。

知识点 ​

先定盒子尺寸，再往里装内容 ​

新鲜好物的下半部分（bd）是一个四列商品列表。先想布局：一行四个、间距均匀，还是用 flex——父级 .bd ul 加 display:flex 和 justify-content:space-between。

但比布局更重要的是先确定每个 li 多大。转写里反复强调：先把 li 的宽高写死，再一个个往里装内容，不要一上来就把四个 li 的结构全写完。因为 li 没有尺寸时，里面的 a、h4、p 摆出来位置全不准，后面还得返工。可以先给临时背景色方便看清盒子。

完整结构如下（alt 换成中文商品名）：

html
<!-- 下部分 bd  -->
<div class="bd">
  <ul>
    <li>
      <a href="#" title="KN95级莫兰迪色防护口罩">
        <div class="pic">
          <img src="./uploads/goods1.png" alt="KN95级莫兰迪色防护口罩">
        </div>
        <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
        <p>¥ <span>99.00</span></p>
      </a>
    </li>
    <li>
      <a href="#" title="KN95级莫兰迪色防护口罩">
        <div class="pic">
          <img src="./uploads/goods1.png" alt="KN95级莫兰迪色防护口罩">
        </div>
        <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
        <p>¥ <span>99.00</span></p>
      </a>
    </li>
    <li>
      <a href="#" title="KN95级莫兰迪色防护口罩">
        <div class="pic">
          <img src="./uploads/goods1.png" alt="KN95级莫兰迪色防护口罩">
        </div>
        <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
        <p>¥ <span>99.00</span></p>
      </a>
    </li>
    <li>
      <a href="#" title="KN95级莫兰迪色防护口罩">
        <div class="pic">
          <img src="./uploads/goods1.png" alt="KN95级莫兰迪色防护口罩">
        </div>
        <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
        <p>¥ <span>99.00</span></p>
      </a>
    </li>
  </ul>
</div>

易错点：304 和 404 很容易写混，转写里就口误过一次，写完回头核对一遍；另外 li 的高度 404 = 图片区 304 + 文字区 100，这笔账要先算清楚。

图片为什么必须包一层 .pic ​

这是本节最值得记住的设计。

为什么需要：商品图是后台上传的，尺寸不可能永远精确。直接给 img 写死宽高，图会被拉伸变形；只写宽度，高度不够又会被裁掉。

怎么想：那就准备一个尺寸写死的"相框"，图片按 100% 宽高塞进去，不管原图多大，都在框里完整显示。

还有第二个理由：以后学 JS 要换图时，只要拿到 .pic 这个父盒子，往里塞一张 img 就行；没有这层，就得从 ul → li → a 一路找下来，非常麻烦。

css
/* 好物内容 -- 公共样式 */
.bd ul {
  display: flex;
  justify-content: space-between;
}

.bd ul li {
  width: 304px;
  height: 404px;
  background-color: #EEF9F4;
  text-align: center;
  transition: all .3s;
}

.bd ul li .pic {
  width: 304px;
  height: 304px;
  background-color: skyblue; /* 占位色，图放进来就盖住了 */
}

易错点：.pic 的宽高必须写死，不能写百分比——它是给图片当基准的。

a 要撑满整个 li ​

为什么需要：默认 a 是行内元素，范围只包住文字和图片，鼠标移到 li 的边角不会变成小手，点击区域不完整。

css
.bd ul li a {
  display: block;
  height: 100%;
}

转成块元素后高度给 100%，a 就撑满了整个 404px 的 li。顺手给 a 加 title，鼠标悬停浮出完整商品名，弥补标题被截断的问题。

易错点：只写 display:block 不写 height:100%，a 还是只有内容那么高，等于白改。

h4 单行溢出显示省略号 ​

为什么需要：商品名长短不一，字一多就换行，把下面的价格顶下去，整张卡片高度错乱。

怎么做：三句话，缺一不可，一般做成公共类放进 base.css：

css
.text-overflow {
  white-space: nowrap;      /* 1. 强制一行，不许换行 */
  overflow: hidden;         /* 2. 超出的部分切掉 */
  text-overflow: ellipsis;  /* 3. 切掉的地方用省略号代替 */
}

易错点：只写 overflow:hidden 会得到一个被"咬掉一半"的字，很难看；text-overflow 必须配合前两句才生效，而且它只管单行，多行文本要另想办法。

价格与 hover 细节 ​

css
.bd ul li h4 {
  font-size: 20px;
  margin: 18px 15px 9px;
}

.bd ul li p {
  color: #AA2113;
  font-size: 17px;
}

.bd ul li p span {
  font-size: 22px;
}

.bd ul li:hover {
  margin-top: -5px;
  box-shadow: 0 15px 30px rgba(0, 0, 0, .42);
}

"¥"小、数字大，视觉上分出主次；h4 左右各 15px 是让文字不贴边。hover 时上移 5px 加投影，配合 transition: all .3s 就有浮起的手感。

复用：人气推荐怎么改而不影响上面 ​

人气推荐结构和新鲜好物一模一样，直接复制 bd 整块，只改标题、图片和底色。但改底色有坑：直接写 .bd ul li { background:#fff }，上面新鲜好物也会跟着变白。

怎么想：利用层叠性，只在这个盒子范围内覆盖。给 wrapper 追加类名 recommend，再用后代选择器：

css
.recommend .bd ul li {
  background-color: #fff;
}

.recommend .bd ul li p {
  font-size: 16px;
  color: #999;
}

权重从 0,2,1 升到 0,3,1，比原规则高，所以只在人气推荐里生效。

易错点：不要为了加类名再套一层 div，直接在 wrapper 上追加即可；也不要直接去改 .bd ul li 本身，否则牵一发动全身。

先看问题：盒子宽度有限，文字却想一行显示 ​

文字溢出显示省略号效果示意

为什么需要：列表、卡片标题、商品名称等位置，盒子宽度通常是固定的，但文字内容长度不可控。如果文字一多就自动换行，会把卡片撑高、打乱布局；如果直接裁掉，又可能像“被咬了一半”，很难看。
怎么想：先准备一个固定宽高的盒子，往里面放一段较长文字，观察它默认会换行、溢出。转写稿里也是先写 .box：宽 200px、高 40px、粉色边框，再写入“里面多的文字123要显示省略号哦”，确认文字确实超出盒子。
怎么做：先搭出下面的完整结构，后续三句话都加在 .box 上。
易错点：不要一上来就写省略号，要先确认盒子有明确宽度；没有宽度限制，文字不会产生“溢出”的前提。

第一步：white-space: nowrap 强制文字不换行 ​

为什么需要：文字默认像水一样，碰到盒子边缘就另起一行。只要换行发生，单行省略号就无从谈起。
怎么想：转写稿解释 normal 是正常换行，nowrap 就是“不要换行”，让文字强制在一行里显示。
怎么做：在 .box 中写 white-space: nowrap;。保存后可以看到文字不再往下掉，而是一直往右排，超出盒子的部分仍然存在。
易错点：拼写容易写成 no wrap 或 right-space，正确是 white-space: nowrap;。这一步只是不换行，还没有隐藏溢出。

第二步：overflow: hidden 把溢出部分隐藏 ​

为什么需要：不换行后，超出盒子的文字还会露出来，需要先把它裁掉。
怎么想：转写稿说“多一个字一刀切掉”，也就是让盒子把超出自身范围的内容隐藏。
怎么做：继续加 overflow: hidden;。此时超出部分看不见了，但可能正好切在半个字上，视觉上比较生硬。
易错点：只写 overflow: hidden; 只能隐藏，不会自动出现省略号；而且如果前面没有 nowrap，文字换行后隐藏效果就不是单行截断。

第三步：text-overflow: ellipsis 用省略号代替 ​

为什么需要：隐藏溢出后，用户不知道后面还有没有内容，省略号能提示“这里被截断了”。
怎么想：text-overflow 管的是文字溢出后的表现，ellipsis 就是省略号。转写稿反复强调这三句话“缺一不可”。
怎么做：再加 text-overflow: ellipsis;。保存后，超出部分会以“…”收尾，而不是硬切半个字。
易错点：ellipsis 容易拼错；它必须配合 overflow: hidden; 和 white-space: nowrap; 才能生效。它处理的是单行文字，多行省略不是这三句话直接解决的。

完整代码与调试过程 ​

下面代码就是本节笔记中的完整示例，三句话按顺序写在 .box 里：

html
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    .box {
      width: 200px;
      height: 40px;
      border: 1px solid pink;
      /* 1. 不允许文字换行  强制文字一行显示*/
      white-space: nowrap;
      /* 2. 溢出隐藏 */
      overflow: hidden;
      /* 3. 文字溢出用省略号代替 */
      text-overflow: ellipsis;
    }
  </style>
</head>

<body>
  <div class="box">里面多的文字123要显示省略号哦</div>
</body>

</html>

调试时可以按转写稿的顺序观察：先只写盒子和文字，看到换行或溢出；加 nowrap 后文字强制一行；加 overflow: hidden 后超出部分消失；最后加 text-overflow: ellipsis，才出现省略号。这样能清楚知道每一句负责什么。

封装复用与易错点 ​

为什么需要：页面中可能多个地方都要单行省略，例如商品标题、推荐标题。每次都写三句话容易漏。
怎么想：转写稿中把三句话封装成一个类，例如 .txt-overflow，放到公共样式里，需要的地方调用类名即可；如果只在一个标题上用，也可以直接写到对应选择器里。
怎么做：公共类里保留 white-space: nowrap; overflow: hidden; text-overflow: ellipsis;，给标题加上类名即可。
易错点：三句话顺序和配合不能少；盒子要有宽度；文字过长时不要让它自动换行；类名拼写要一致。还要注意，本节讲的是单行溢出省略号，多行文本的处理方式转写稿明确说后面再讲，不能把这三句话直接当成多行方案。

先看效果与结构：人气推荐是复用出来的模块 ​

人气推荐模块效果图

人气推荐和上面的“新鲜好物”结构非常接近：外层都是 .wrapper，里面分 .hd 和 .bd，.bd 里放 ul > li，每个 li 里用 a 包住图片、标题和说明文字。所以这里不需要从零重写，而是先复制新鲜好物模块，再改标题、图片和局部样式。

为什么需要：复用结构能减少重复劳动，也保证两个模块的间距、对齐方式一致。
怎么想：先确认哪些是公共结构，哪些是人气推荐自己的内容。公共结构保留，局部差异用新的类名和复合选择器覆盖。
怎么做：给外层加 recommend 类名，标题改成“人气推荐”，说明文字改成“人气爆款 不容错过”，图片换成 recommend1.png、recommend2.png、recommend3.png。
易错点：不要直接改公共的 .bd li 或 .bd li p，否则会影响上面的新鲜好物模块。

html
<!-- 人气推荐 -->
 <!-- 人气推荐 -->
  <div class="wrapper recommend">
    <!-- 上侧 hd  -->
    <div class="hd">
      <h2>人气推荐
        <span>人气爆款 不容错过</span>
      </h2>

    </div>
    <!-- 下部分 bd  -->
    <div class="bd">
      <ul>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend1.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend1.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend2.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend3.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
      </ul>
    </div>
  </div>

给外层加 recommend：用类名圈定修改范围 ​

为什么需要：人气推荐要改白底和文字颜色，但新鲜好物不能跟着变。必须先把人气推荐这个盒子“圈”出来。
怎么想：笔记里的外层是 class="wrapper recommend"，其中 recommend 就是本模块的独立标识。后面写样式时，用 .recommend .bd li 这种复合选择器，只命中人气推荐内部。
怎么做：保留 wrapper 的公共布局，同时追加 recommend。
易错点：只写 .bd li 会改到所有模块；把 recommend 加到错误层级也会导致选择器失效。

覆盖 li 白底：利用层叠性做局部覆盖 ​

为什么需要：公共的小 li 可能有灰色底，而人气推荐需要白色底。
怎么想：不要改公共规则，而是在 .recommend 范围内重新声明背景色。复合选择器权重更高，会覆盖前面的公共样式。
怎么做：写 .recommend .bd li { background-color: #fff; }。
易错点：如果只写 .recommend li，可能因为权重或层级不够覆盖失败；调试时可在浏览器检查面板看最终生效的是哪条规则。

css
.recommend .bd li {
  background-color: #fff;
}

调整 p 的字号和颜色：只改人气推荐内部 ​

为什么需要：人气推荐下方说明文字需要 16px、灰色，而其他模块的文字样式不能受影响。
怎么想：继续用 .recommend 限定范围，选中 .bd li p，只改字号和颜色。颜色使用项目里已有的 var(--hui)，不要随手写一个近似灰。
怎么做：写 .recommend .bd li p { font-size: 16px; color: var(--hui); }。
易错点：不要写成全局 p；不要漏掉 .recommend；如果颜色没生效，先确认 --hui 变量是否已在公共样式中定义。

css
.recommend .bd li p {
  font-size: 16px;
  color: var(--hui);
}

调试与收尾：先结构、再局部样式、最后检查影响范围 ​

从调试过程看，合理的顺序是：先复制模块并改类名，再换标题和图片，最后补局部 CSS。改完后重点检查两件事：人气推荐是否变成白底、说明文字是否为 16px 灰色；同时回看上方新鲜好物有没有被误改。若白底没生效，优先检查 recommend 是否加在外层、选择器是否写成 .recommend .bd li；若文字颜色没变，检查是否被更高权重规则覆盖。这样既复用了结构，又把修改范围控制在本模块内。

课件图示（PPTX） ​

day11 课件图

代码示例 ​

示例 1：新鲜好物 bd 模块（结构 + 公共样式） ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>新鲜好物 - bd</title>
  <style>
    * { margin: 0; padding: 0; }
    ul { list-style: none; }
    a { text-decoration: none; color: #333; }

    /* 好物内容 -- 公共样式 */
    .bd ul {
      display: flex;
      justify-content: space-between;
    }

    .bd ul li {
      width: 304px;
      height: 404px;
      background-color: #EEF9F4;
      text-align: center;
      transition: all .3s;
    }

    .bd ul li:hover {
      margin-top: -5px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, .42);
    }

    /* A 转块 + 高度 100%，整个盒子都是点击区 */
    .bd ul li a {
      display: block;
      height: 100%;
    }

    .bd ul li .pic {
      width: 304px;
      height: 304px;
      background-color: skyblue;
    }

    /* 图片撑满 .pic 盒子，保证完整显示 */
    .bd ul li .pic img {
      width: 100%;
      height: 100%;
    }

    .bd ul li h4 {
      font-size: 20px;
      margin: 18px 15px 9px;
    }

    .bd ul li p {
      color: #AA2113;
      font-size: 17px;
    }

    .bd ul li p span {
      font-size: 22px;
    }

    /* 文字溢出显示省略号 —— 公共类 */
    .text-overflow {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <!-- 下部分 bd -->
  <div class="bd">
    <ul>
      <li>
        <a href="#" title="KN95级莫兰迪色防护口罩">
          <div class="pic">
            <img src="./uploads/goods1.png" alt="">
          </div>
          <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
          <p>¥ <span>99.00</span></p>
        </a>
      </li>
      <li>
        <a href="#" title="KN95级莫兰迪色防护口罩">
          <div class="pic">
            <img src="./uploads/goods1.png" alt="">
          </div>
          <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
          <p>¥ <span>99.00</span></p>
        </a>
      </li>
      <li>
        <a href="#" title="KN95级莫兰迪色防护口罩">
          <div class="pic">
            <img src="./uploads/goods1.png" alt="">
          </div>
          <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
          <p>¥ <span>99.00</span></p>
        </a>
      </li>
      <li>
        <a href="#" title="KN95级莫兰迪色防护口罩">
          <div class="pic">
            <img src="./uploads/goods1.png" alt="">
          </div>
          <h4 class="text-overflow">KN95级莫兰迪色防护口罩你值得拥有</h4>
          <p>¥ <span>99.00</span></p>
        </a>
      </li>
    </ul>
  </div>
</body>
</html>

关键行与易错点

  • display: flex 加在 ul（“亲爸爸”）上，不是加在 li 上；justify-content: space-between 实现两端对齐。
  • li 的 304px × 404px 必须写死，text-align: center 让图片和文字一起水平居中。
  • .bd ul li a { display: block; height: 100%; } 是重点：a 默认是行内元素，不写这两句，鼠标只有落在文字上才出现小手，盒子边缘点不到。
  • .pic 用固定 304×304 的 div 包住图片，图片给 width:100%; height:100%，这样不管上传的图多大都能完整显示；后面 JS 换图只需找到 .pic 往里塞图，不用在一堆标签里找。
  • transition: all .3s 写在 li 上，不要写在 :hover 里，否则移出时没有过渡。
  • h4 的 margin: 18px 15px 9px 中左右 15px 不能省，否则文字贴边，且配合 .text-overflow 才有可用的溢出宽度。
  • p 是 17px、p span 是 22px，大小分开写；不写 span 就只能整行一个字号。

示例 2：溢出文字显示省略号（三步法） ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>溢出文字显示省略号</title>
  <style>
    .box {
      width: 200px;
      height: 40px;
      border: 1px solid pink;

      /* 1. 不允许文字换行，强制文字一行显示 */
      white-space: nowrap;

      /* 2. 溢出隐藏 */
      overflow: hidden;

      /* 3. 文字溢出用省略号代替 */
      text-overflow: ellipsis;
    }
  </style>
</head>
<body>
  <div class="box">里面多的文字123要显示省略号哦</div>
</body>
</html>

关键行与易错点

  • 三句话缺一不可，顺序就是：white-space: nowrap → overflow: hidden → text-overflow: ellipsis。
  • white-space 默认是 normal，文字像水一样碰到边就换行，一换行就永远出不来省略号，所以第一步必须先 nowrap。
  • 只写 text-overflow: ellipsis 没有任何效果，它必须建立在“不换行 + 溢出隐藏”之上。
  • 只写 overflow: hidden 会把文字“一刀切”切一半，很难看，所以第三句用省略号替代。
  • 这套写法只能处理单行，多行文本不适用。
  • 页面中多处要用时，把它抽成公共类放进 base.css，例如 .text-overflow { … }，HTML 里直接 class="text-overflow" 调用，不要每处都复制三行。

示例 3：人气推荐（复用 bd 结构 + recommend 层叠覆盖） ​

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>人气推荐</title>
  <style>
    /* --hui 在 base.css 中定义，这里给出灰色取值以便直接运行 */
    :root { --hui: #999; }

    * { margin: 0; padding: 0; }
    ul { list-style: none; }
    a { text-decoration: none; color: #333; }

    /* ===== 公共样式（与新鲜好物共用） ===== */
    .bd ul {
      display: flex;
      justify-content: space-between;
    }

    .bd ul li {
      width: 304px;
      height: 404px;
      background-color: #EEF9F4;
      text-align: center;
      transition: all .3s;
    }

    .bd ul li:hover {
      margin-top: -5px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, .42);
    }

    .bd ul li a {
      display: block;
      height: 100%;
    }

    .bd ul li .pic {
      width: 304px;
      height: 304px;
      background-color: skyblue;
    }

    .bd ul li .pic img {
      width: 100%;
      height: 100%;
    }

    .bd ul li h4 {
      font-size: 20px;
      margin: 18px 15px 9px;
    }

    .bd ul li p {
      color: #AA2113;
      font-size: 17px;
    }

    .text-overflow {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* ===== 人气推荐：只改自己，不影响上面的模块 ===== */
    .recommend .bd li {
      background-color: #fff;
    }

    .recommend .bd li p {
      font-size: 16px;
      color: var(--hui);
    }
  </style>
</head>
<body>
  <!-- 人气推荐 -->
  <div class="wrapper recommend">
    <!-- 上侧 hd -->
    <div class="hd">
      <h2>人气推荐
        <span>人气爆款 不容错过</span>
      </h2>
    </div>
    <!-- 下部分 bd -->
    <div class="bd">
      <ul>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend1.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend1.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend2.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
        <li>
          <a href="#" title="KN95级莫兰迪色防护口罩">
            <div class="pic">
              <img src="./uploads/recommend3.png" alt="">
            </div>
            <h4 class="text-overflow">特惠推荐</h4>
            <p>我猜得到 你的需要</p>
          </a>
        </li>
      </ul>
    </div>
  </div>
</body>
</html>

关键行与易错点

  • class="wrapper recommend"：recommend 不是在 wrapper 里再套一层盒子，而是直接在 wrapper 后面加类名，作用只是“标识这个盒子”，方便用后代选择器提高权重。
  • .recommend .bd li 权重是 0,2,1（2 个类 + 1 个标签），高于公共的 .bd ul li 的 0,1,2，所以只有人气推荐变成白底，上面的新鲜好物不受影响。
  • 易错点：图省事直接写 .bd ul li { background-color: #fff; } 会把新鲜好物那一块也改成白底——必须通过 .recommend 圈定作用范围。
  • 同理 .recommend .bd li p 把描述文字改成 16px、灰色 var(--hui)，h4 的大标题样式完全继承公共样式，不用重写。
  • 结构上完全复用新鲜好物：ul > li > a > .pic + h4 + p，复制后只换图片名（recommend1/2/3.png）和文字内容，不重写样式。
  • 复制 li 时先折叠再复制，避免多一个少一个。

常见错误 ​

  • 现象：图片直接塞进 li，换图后尺寸失控。→ 原因：缺少固定图片容器。→ 修法：先写 .pic 定宽高，再放 img，并让图片宽高 100%。
  • 现象：鼠标只在文字上变小手，盒子空白处点不了。→ 原因：li 内 a 仍是行内元素且未撑满。→ 修法：给 li a 加 display:block; height:100%。
  • 现象：改人气推荐白底后，新鲜好物也变白。→ 原因：直接覆盖 .bd ul li 公共样式。→ 修法：给外层加 recommend，写 .recommend .bd ul li 局部覆盖。
  • 现象：标题过长自动换行，把价格挤下去。→ 原因：未做单行溢出处理。→ 修法：给标题加 white-space:nowrap; overflow:hidden; text-overflow:ellipsis;，并保留左右 margin。
  • 现象：文字被切一半，没有省略号。→ 原因：省略号三件套缺项，常见是漏了 text-overflow 或 white-space。→ 修法：三句补齐，封装成 .text-overflow 类复用。
  • 现象：价格中 ¥ 和数字一样大，或 p span 不生效。→ 原因：未把数字单独包 span，或选择器写错层级。→ 修法：p 设常规字号，p span 单独设更大字号。
  • 现象：hover 上浮/阴影无过渡或效果不对。→ 原因：transition 没加在 li 上或 hover 选择器不匹配。→ 修法：li 加 transition: all .3s，:hover 写 margin-top:-5px 和 box-shadow。

练习 ​

  1. 为“新鲜好物”的每个 li 补全 a 的点击范围，要求鼠标经过卡片任意位置都出现小手；写出需要修改的选择器和两条关键声明。
  2. 给商品标题实现单行省略号，并说明你会把三行 CSS 写在 base.css 的公共类里，还是直接写在 h4 上；写出对应类名或选择器。
  3. 复制“新鲜好物”生成“人气推荐”，只修改白底和描述文字样式；写出局部覆盖选择器，并说明为什么不能直接改 .bd ul li、.bd ul li p。
  4. 给商品卡片加 hover 上浮 5px、阴影 0 15px 30px rgba(0,0,0,.42) 和 0.3s 过渡；写出加在哪个元素上及关键 CSS。
  5. 调整价格结构，使 ¥ 为常规字号、99.00 更大；写出 p 内部 HTML 和对应 CSS 选择器。

原视频对照 ​

#视频时长
1新鲜好物头部完成06:00
2新鲜好物bd模块盒子搭建08:42
3bd模块小li制作05:45
4bd模块a链接特殊处理04:51
5文字溢出显示省略号07:10
6人气推荐模块制作05:26
7人气推荐模块结束05:44

小结 ​

  • 结构搭建先大后小：先 ul/li，再 a，再 .pic/h4/p，不要一口气把所有内容铺完。
  • 商品图必须优先考虑 .pic 容器，图片宽高交给容器约束。
  • li 内 a 要撑满整卡，点击区域和 title 提示才完整。
  • 公共模块复用后，局部差异用“外层类名 + 后代选择器”覆盖，避免污染其他模块。
  • 单行文字溢出统一用省略号三件套，适合封装成公共类复用。
  • 复制 li 时先折叠结构再整段复制，减少多一个、少一个和结构错位。
  • hover 动画、阴影、过渡属于增强项，应在基础布局稳定后再加。
  • 价格、标题等细节要用最小范围选择器处理，先保证结构正确，再调字号、颜色和间距。