精灵图与页面布局（Day9 3/3）

本页对应 Day09_页面布局，共 6 段视频，约 1 小时 4 分。

学习目标

• 能够使用 link 标签的 rel="icon" 与 href 属性为网页设置 .ico 标题图标，并刷新验证浏览器标签页正确显示该图标。
• 能够编写全局样式，包括字体族、基准字号、文字颜色、超链接默认与悬停颜色、去除下划线、浮动类、清除浮动类和版心类，并验证页面统一生效。
• 能够按 topbar 结构使用版心、左右浮动和清除浮动完成顶部导航布局，并通过分隔元素或边框实现分割线与间距，验证窄屏下背景不缺失。
• 能够完成 logo 与搜索框区域布局：logo 左浮动、表单右浮动、清除浮动，设置输入框和按钮的宽高、边框、内边距、背景图及垂直对齐，并验证两者整齐对齐。
• 能够完成页面导航与商品分类区域：实现“全部商品分类”标题、导航列表横向排列、商品菜单固定宽高与背景、行高与内边距，并验证左中右三栏结构和间距符合页面效果。

知识点

本节范围与标题图标

本节笔记标题是“精灵图”，但转写稿实际从标题图标和页面准备工作讲起，并未展开精灵图合并图片的用法；下面按转写内容整理，不额外补写转写稿没有讲到的精灵图技术。

为什么需要：浏览器标签页前默认可能是一个小球，而百度、京东等网站都有自己的小图标，用来增强品牌识别。这个图标叫 favicon。
怎么想：可以不放，正式发布后把 favicon.ico 放到 Web 根目录，浏览器会自动加载；但开发阶段还没部署，用 link 更直接。
怎么做：在 <head> 中写：

<link rel="shortcut icon" href="favicon.ico">

注意 rel 与引入样式表的 stylesheet 不同，这里是 shortcut icon，href 写图标地址。转写稿演示了把购物车图标做成 favicon，刷新后标签页图标生效。
易错点：favicon 标准兼容做法是 .ico，尺寸常见 32×32、64×64；现代浏览器也能识别其他图片格式，但为保证所有浏览器可用，仍建议用 ICO。转写稿还提到在线工具可上传图片、选择尺寸并生成 ICO。

全局样式设置

为什么需要：页面里很多元素有共同规范，比如默认字体、基准字号、超链接颜色、浮动类和清除浮动，提前统一能减少重复。
怎么想：把“全局”与“局部”分开：全局先给基准，局部再单独覆盖。转写稿在 body 中设置 font-family、font-size: 12px、颜色 #666，并统一 a 的颜色、去掉下划线，设置 a:hover 变色。
怎么做：准备浮动类、清除浮动类和版心类。版心宽度为 1190px，左右 margin: auto 居中。清除浮动为更好兼容性还写了单冒号写法。
易错点：12px 只是基准字号，不同区域要单独设置；a 的样式作用于所有超链接，不是某一个。转写稿中“清楚活动”应理解为“清除浮动”，“复元素”是“父元素”。

topbar 顶部导航条

为什么需要：顶部条要横向铺满，并让欢迎语和导航一左一右。
怎么想：外层 .topbar 不设固定宽，跟 body 一样宽；里面套 .container 版心，再分 .topbar-welcome 和 .topbar-nav，分别左、右浮动，父级加 clearfix。
怎么做：.topbar 给 height: 30px、background: #ECECEC。欢迎语、请登录、免费注册之间用 .sep 做分割线：宽 1px、高 12px、背景 #666、左右 margin: 10px；因为父级行高为 30、线高 12，上外边距给 9px 使其居中。欢迎文字右侧间距给 28px。
易错点：小屏时 body 可能比版心窄，topbar 背景会断，需给 .topbar 加 min-width: 1190px，让它不能比版心小。分割线也可用边框或手打字符，但用元素便于控制左右外边距。

logo 与搜索框

为什么需要：页头需要 logo 与搜索表单左右分布。
怎么想：外层 .page-header 套版心，logo 左浮动，搜索表单右浮动，父级清除浮动。logo 是页面内容，用 img；搜索按钮图标是修饰，可用背景图。
怎么做：logo 图约 190×120，左浮动；表单右浮动，margin-top: 42px。输入框总尺寸 510×36，边框 1px #DD302D，所以内容宽高设为 508×34，再给左右 padding: 5px 时宽度要继续减到 498px。按钮 80×36，背景色 #DD302D，背景图 search-icon.png，no-repeat center，去掉默认边框。
易错点：CSS 中写图片路径要按 CSS 文件位置回退，如 ../images/search-icon.png；一个元素不能写两个 class 属性，应写成 class="logo left-fix"。输入框和按钮默认按基线对齐，可给二者设置非 baseline 的 vertical-align。父级 font-size: 0 可去空格，input 有默认字号，通常不受影响。

页面导航与商品分类

为什么需要：页面导航要展示“全部商品分类”和横向导航；商品分类要形成左侧菜单。
怎么想：.page-nav 外层加版心，内部“全部商品分类”与 ul.nav-list 都左浮动，父级清除浮动。分类菜单整体是 ul > li > a 结构。
怎么做：.page-nav 高 48px、下边框 2px #DD302D，并设 min-width: 1190px。分类标题宽 190、高 48、背景 #DD302D、白字、居中、16px。导航 li 左浮动，左右 padding: 10px，字号 16px。商品菜单 .menu 设 190×458、背景 #F4F4F4；.menu-item 字号 14px、左内边距 16px、行高约 28px。
易错点：父元素本身浮动时，子元素浮动通常不用再清除，转写稿称为“以浮制浮”；但“清除浮动”只管子元素，不管孙子。行高要结合行距计算，转写稿估算 20 区域加 8 行距分上下各 4，得到约 28；量不准可再调。占位用的 height: 1000px 调试块完成后必须删除。

标题图标：用 link 设置 favicon

为什么需要：浏览器默认在标题前显示一个“球”，而百度、京东等网站都有自己的小图标，用于增强识别。这个图标叫标题图标（favicon）。

怎么想：项目正式部署后，把 favicon 放到网站根目录，浏览器会自动加载；但开发阶段还没部署，所以用 link 手动指定。rel 不再是引入 CSS 的 stylesheet，而是 shortcut icon，href 写图标地址。转写里说“烧的卡了”，实际是 shortcut icon。ICO 格式兼容性最好，尺寸小；现代浏览器也支持 png、jpg 等，但规范做法仍推荐 ICO。

怎么做：

<link rel="shortcut icon" href="favicon.ico">

位置放在 head 中，写在引入 CSS 的前面也可以。转写中刷新页面后，标题前变成购物车图标，说明生效。

易错点：rel 不要误写成 stylesheet；不要以为只能用 ICO，但 ICO 最稳；根目录自动加载方式要等部署后才方便验证。在线工具可把图片生成 32×32、64×64 等尺寸的 ICO。

全局样式与版心：先把公共规则搭好

为什么需要：页面有很多超链接、浮动元素和统一字体颜色，如果每个都单独写，重复且难维护。先写全局样式，相当于提前定规范。

怎么想：设置 font-family、基准字号 12px、文字颜色 #666；超链接默认 #666 并去掉下划线，鼠标移上去变色；准备浮动类和清除浮动类；版心固定宽 1190px 并左右 auto 居中。基准字号只是起点，局部文字再单独覆盖。

怎么做：

.container {
  width: 1190px;
  margin: 0 auto;
}
a { color: #666; text-decoration: none; }
.left-fix { float: left; }
.right-fix { float: right; }
.clearfix::after {
  content: "";
  display: block;
  clear: both;
}

易错点：12px 不是所有文字最终大小；清除浮动只清当前子元素的浮动，“孙子”不算；版心是内容区宽度，不是 body 宽度。

topbar：左右浮动、分隔线与最小宽度

为什么需要：顶部导航条背景要通栏，内容要居中，并分成欢迎语和右侧导航。

怎么想：外层 .topbar 不设固定宽，负责背景；内层 .container 负责版心。左右两块分别左、右浮动，父级 .container 加 clearfix。分隔线用单独元素 .sep 做，比给文字加边框更方便设置左右外边距。

怎么做：

.topbar {
  height: 30px;
  background: #ECECEC;
  min-width: 1190px;
}
.topbar .sep {
  float: left;
  width: 1px;
  height: 12px;
  background: #666;
  margin: 9px 10px;
}

欢迎区和导航项可设 line-height:30px，让文字在 30px 高内纵向居中。导航列表 li 浮动；导航分隔线左右外边距可用 15px。

易错点：屏幕小于版心时，.topbar 背景会断，因此加 min-width:1190px；分隔线浮动后虽是行内元素也能设宽高；分隔线高 12px 放在 30px 内，上边距给 9px 才居中；一个元素只能有一个 class 属性，多个类名写在同一属性里。

logo 与搜索框：浮动、尺寸与基线

为什么需要：页头由左侧 logo 和右侧搜索框组成，需要一左一右。

怎么想：.page-header 里套版心，logo 用 a > img，左浮动；搜索表单右浮动；父级清除浮动。logo 是页面内容，用 img；搜索按钮图标是修饰，用背景图。

怎么做：

.logo img { width: 190px; height: 120px; }
.search-books { float: right; margin-top: 42px; }
.search-books input {
  width: 508px; height: 34px;
  border: 1px solid #DD302D;
  padding: 0 5px;
}
.search-books button {
  width: 80px; height: 36px;
  border: 0;
  background: #DD302D url(../images/search-icon.png) no-repeat center;
}

易错点：CSS 中写背景图路径要从 CSS 文件位置出发，转写中需要 ../images/...；输入框总宽高含边框，测 510×36 时内容宽高要减 2；input 与 button 默认基线对齐，给二者设 vertical-align: middle 等非 baseline 值；父级 font-size:0 只消空格，不解决基线，且 input 有默认字号，不受继承影响。

page-nav：分类块与导航列表

为什么需要：第二行是“全部商品分类”加右侧导航，结构不能一左一右，而要都靠左。

怎么想：.page-nav 通栏，下边框可加在版心上；分类块固定宽高、红底白字居中；导航列表 li 浮动。父级 ul 也浮动时，属于“以浮制浮”，不必再给 ul 清浮动。

怎么做：

.page-nav { min-width: 1190px; }
.page-nav .container {
  height: 48px; line-height: 48px;
  border-bottom: 2px solid #DD302D;
}
.cats { width: 190px; height: 48px; background: #DD302D; color: #fff; text-align: center; }
.nav-list li { float: left; padding: 0 10px; font-size: 16px; }

易错点：.page-nav 也要 min-width，否则屏幕变小时下边框会断；li 浮动而父 ul 也浮动时无需 clearfix；间距用内边距或外边距都可以。

商品分类菜单：列表尺寸与行高调试

为什么需要：页面主体左侧是商品分类菜单，需要固定宽高和舒适行距。

怎么想：.page-section 套版心，内部左中右三块；菜单和 banner 左浮动，右侧块右浮动，父级清除浮动。菜单先做无子菜单的 ul > li > a 结构。

怎么做：

.page-section { margin-top: 10px; }
.menus { width: 190px; height: 458px; background: #F4F4F4; }
.menu-item {
  font-size: 14px;
  padding-left: 16px;
  line-height: 28px;
}

易错点：行高不能只照测量值写，要分配上下行距；转写中试 36px 会溢出，改 30px 仍偏大，精确算约 28px 更合适；可给 ul 加上内边距微调顶部；临时占位 div 高 1000px 用来撑滚动条，页面完成后必须删除；复制 li 后要认识 menu-item 是谁，不能复制完两眼一抹黑。

课堂画面

代码示例

示例1：标题图标 + 全局样式设置

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>标题图标与全局样式</title>

  <!-- 标题图标：rel 不是 stylesheet，而是 shortcut icon -->
  <link rel="shortcut icon" href="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='32'%20height='32'%3E%3Crect%20width='32'%20height='32'%20rx='6'%20fill='%23DD302D'/%3E%3Ctext%20x='16'%20y='22'%20font-size='16'%20text-anchor='middle'%20fill='white'%3E购%3C/text%3E%3C/svg%3E">

  <style>
    /* 全局样式设置 */
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      font-size: 12px;
      color: #666;
    }

    a {
      color: #666;
      text-decoration: none;
    }

    a:hover {
      color: #DD302D;
    }

    li {
      list-style: none;
    }

    .container {
      width: 1190px;
      margin: 0 auto;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }
  </style>
</head>
<body>
  <div class="container">
    <a href="#">尚品汇，欢迎您</a>
  </div>
</body>
</html>

要点解释与易错点：

• link rel="shortcut icon" 用来设置标题图标，和引入 CSS 的 rel="stylesheet" 不同。
• href 写图标地址；实际项目中常用 .ico 格式，兼容性更好。
• 浏览器也会自动加载网站根目录下的 favicon.ico，但开发阶段用 link 更直接。
• 全局样式提前统一 font-size、文字颜色、超链接颜色、下划线、浮动类和清除浮动，后面布局更省事。

---

示例2：topbar 顶部导航条布局

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>topbar 顶部导航条</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      font-size: 12px;
      color: #666;
    }

    a {
      color: #666;
      text-decoration: none;
    }

    a:hover {
      color: #DD302D;
    }

    li {
      list-style: none;
    }

    .container {
      width: 1190px;
      margin: 0 auto;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    /* topbar 整体 */
    .topbar {
      height: 30px;
      line-height: 30px;
      background: #ECECEC;
      min-width: 1190px;
    }

    /* 左侧欢迎区 */
    .topbar-welcome {
      float: left;
    }

    .topbar-welcome > span,
    .topbar-welcome > a {
      float: left;
    }

    .welcome-text {
      margin-right: 28px;
    }

    /* 分割线：用元素做 */
    .topbar-welcome .sep {
      float: left;
      width: 1px;
      height: 12px;
      background: #666;
      margin: 9px 10px;
    }

    /* 右侧导航列表 */
    .topbar-nav {
      float: right;
    }

    .topbar-nav li {
      float: left;
    }

    .topbar-nav li.sep {
      width: 1px;
      height: 12px;
      background: #666;
      margin: 9px 15px;
    }
  </style>
</head>
<body>
  <div class="topbar">
    <div class="container clearfix">
      <div class="topbar-welcome left">
        <span class="welcome-text">尚品汇，欢迎您</span>
        <a href="#">请登录</a>
        <span class="sep"></span>
        <a href="#">免费注册</a>
      </div>

      <ul class="topbar-nav right clearfix">
        <li><a href="#">我的订单</a></li>
        <li class="sep"></li>
        <li><a href="#">我的尚品汇</a></li>
        <li class="sep"></li>
        <li><a href="#">尚品汇会员</a></li>
        <li class="sep"></li>
        <li><a href="#">企业采购</a></li>
        <li class="sep"></li>
        <li><a href="#">客户服务</a></li>
        <li class="sep"></li>
        <li><a href="#">网站导航</a></li>
        <li class="sep"></li>
        <li><a href="#">商家后台</a></li>
      </ul>
    </div>
  </div>
</body>
</html>

要点解释与易错点：

• .topbar 设置 height: 30px、line-height: 30px、background: #ECECEC，文字自然垂直居中。
• 左右两部分分别用 float: left 和 float: right，父级 .container 加 clearfix 清除浮动。
• 分割线可以用元素做：宽 1px、高 12px、背景 #666，再用上下外边距调整到中间位置。
• .topbar 加 min-width: 1190px，防止屏幕比版心窄时背景色断掉。
• 易错点：多个浮动元素之间容易产生换行空白，用浮动和明确外边距控制间距。

---

示例3：logo、搜索框、页面导航、商品分类菜单

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>页面布局：logo、搜索框、页面导航、商品分类</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: "Microsoft YaHei", Arial, sans-serif;
      font-size: 12px;
      color: #666;
    }

    a {
      color: #666;
      text-decoration: none;
    }

    a:hover {
      color: #DD302D;
    }

    li {
      list-style: none;
    }

    .container {
      width: 1190px;
      margin: 0 auto;
    }

    .left {
      float: left;
    }

    .right {
      float: right;
    }

    .clearfix::after {
      content: "";
      display: block;
      clear: both;
    }

    .clearfix {
      *zoom: 1;
    }

    /* logo 与搜索框区域 */
    .page-header {
      min-width: 1190px;
    }

    .page-header .logo {
      display: block;
      width: 190px;
      height: 120px;
    }

    .page-header .logo img {
      display: block;
      width: 190px;
      height: 120px;
    }

    .search-box {
      margin-top: 42px;
      font-size: 0;
    }

    .search-box input {
      width: 498px;
      height: 34px;
      padding: 0 5px;
      border: 1px solid #DD302D;
      font-size: 12px;
      vertical-align: middle;
      outline: none;
    }

    .search-box button {
      width: 80px;
      height: 36px;
      border: 0;
      background: #DD302D url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Ccircle%20cx='8'%20cy='8'%20r='5'%20fill='none'%20stroke='white'%20stroke-width='2'/%3E%3Cline%20x1='12'%20y1='12'%20x2='18'%20y2='18'%20stroke='white'%20stroke-width='2'/%3E%3C/svg%3E") no-repeat center;
      cursor: pointer;
      vertical-align: middle;
    }

    /* 页面导航 */
    .page-nav {
      height: 48px;
      line-height: 48px;
      border-bottom: 2px solid #DD302D;
      min-width: 1190px;
    }

    .cats {
      float: left;
      width: 190px;
      height: 48px;
      background: #DD302D;
      color: #fff;
      text-align: center;
    }

    .cats h3 {
      font-size: 16px;
      font-weight: normal;
    }

    .nav-list {
      float: left;
    }

    .nav-list li {
      float: left;
      padding: 0 10px;
      font-size: 16px;
    }

    .nav-list a {
      color: #333;
    }

    /* 商品分类区域 */
    .product-section {
      margin-top: 10px;
      min-width: 1190px;
    }

    .menus {
      float: left;
      width: 190px;
      height: 458px;
      background: #F4F4F4;
    }

    .menus ul {
      padding-top: 10px;
    }

    .menu-item {
      font-size: 14px;
      line-height: 28px;
      padding-left: 16px;
    }

    .menu-item a {
      color: #666;
    }
  </style>
</head>
<body>
  <!-- logo 与搜索框 -->
  <div class="page-header clearfix">
    <div class="container clearfix">
      <a href="#" class="logo left">
        <img src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='190'%20height='120'%3E%3Crect%20width='190'%20height='120'%20fill='%23DD302D'/%3E%3Ctext%20x='95'%20y='68'%20font-size='28'%20text-anchor='middle'%20fill='white'%3ELOGO%3C/text%3E%3C/svg%3E" alt="logo">
      </a>

      <form class="search-box right" action="#">
        <input type="text" placeholder="搜索商品">
        <button type="submit"></button>
      </form>
    </div>
  </div>

  <!-- 页面导航 -->
  <div class="page-nav">
    <div class="container clearfix">
      <div class="cats">
        <h3>全部商品分类</h3>
      </div>

      <ul class="nav-list">
        <li><a href="#">服装城</a></li>
        <li><a href="#">美妆馆</a></li>
        <li><a href="#">尚品超市</a></li>
        <li><a href="#">全球购</a></li>
        <li><a href="#">闪购</a></li>
        <li><a href="#">团购</a></li>
        <li><a href="#">有趣</a></li>
      </ul>
    </div>
  </div>

  <!-- 商品分类菜单 -->
  <div class="product-section">
    <div class="container clearfix">
      <div class="menus">
        <ul>
          <li class="menu-item"><a href="#">手机 / 运营商 / 数码</a></li>
          <li class="menu-item"><a href="#">家用电器</a></li>
          <li class="menu-item"><a href="#">电脑 / 办公</a></li>
          <li class="menu-item"><a href="#">家居 / 家具 / 家装</a></li>
          <li class="menu-item"><a href="#">男装 / 女装 / 童装</a></li>
          <li class="menu-item"><a href="#">美妆 / 个护清洁</a></li>
          <li class="menu-item"><a href="#">鞋靴 / 箱包 / 钟表</a></li>
          <li class="menu-item"><a href="#">食品 / 生鲜 / 酒水</a></li>
        </ul>
      </div>
    </div>
  </div>
</body>
</html>

要点解释与易错点：

• logo 用 img 引入，因为它是页面内容；搜索按钮图标适合用背景图，因为偏装饰性。
• 搜索框总宽 510px、总高 36px 时，input 设置 width: 498px; height: 34px; padding: 0 5px; border: 1px solid #DD302D;，注意默认是内容盒，宽高要把边框和内边距算进去。
• .search-box 加 font-size: 0 可以去掉 input 和 button 之间的空白；input 有默认字号，不会被完全继承为 0。
• input 和 button 默认按基线对齐，容易错位，给二者加 vertical-align: middle 解决。
• 页面导航中 .cats 和 .nav-list 都左浮动，父级 .container 清除浮动；整体加 min-width: 1190px，避免屏幕变窄时下边框断裂。
• 商品分类菜单用 ul > li > a 结构，line-height 控制每项高度和行距；左边距用 padding-left 让文字往里缩。

常见错误

1. 标题图标不显示：刷新后仍是浏览器默认图标 → link 的 rel 写成 stylesheet，或 href 路径错误 → 改为 rel="icon"，路径指向真实图片；正式项目优先用 .ico 保证兼容。
2. 窄屏出现横向滚动条时，顶部条背景断掉 → 背景加在版心或内容容器上，容器只跟随视口宽度 → 背景给外层全宽容器，并给该容器设置 min-width 等于版心宽度。
3. 左右浮动后下方内容上移、父容器高度塌陷 → 子元素浮动后未清除浮动 → 给父容器加清除浮动类；若父元素自身已浮动，先判断是否还需要额外清除。
4. 搜索框总宽超出设计，按钮被挤换行 → width 按总宽写，又额外加了 border、padding → 用 box-sizing: border-box，或从内容宽高里扣除边框和内边距。
5. input 与 button 底部不齐 → 二者都是行内块，按基线对齐，且 input 内有文字、按钮内无文字 → 给二者统一 vertical-align: middle/top，必要时父容器处理空格。
6. CSS 中背景图 404 → 路径按 HTML 文件位置写，但样式写在 CSS 文件里 → 按 CSS 文件位置回退目录，如 ../images/xxx.png，并检查大小写。
7. 分隔线用边框做后间距难控、垂直位置偏 → 边框占盒模型且受行高/基线影响 → 改用独立元素做分隔线，设宽高、背景色和左右外边距，再调上外边距或行高。

练习

1. 给页面添加标题图标：分别用 .ico 和 .png 测试，刷新验证；说明为什么正式项目更推荐 .ico。
2. 完成 topbar：外层全宽背景、内层 1190 版心、左右两部分浮动、中间分隔线；缩窄浏览器视口，检查背景是否断裂并修正。
3. 完成 logo 与搜索表单：logo 尺寸 190×120；输入框总尺寸 510×36，含 1px 边框和左右 5px 内边距；按钮 80×36，背景图居中；要求输入框与按钮垂直对齐。
4. 完成页面导航与商品分类：导航整体高 48、下边框 2px，分类块 190×48；商品菜单 190×458、背景 #f4f4f4，列表字号 14，调出合适行高与上间距；最后删除调试用占位高度并检查页面。

原视频对照

#	视频	时长
1	标题图标	05:04
2	全局样式设置	03:20
3	页面布局-topbar	20:01
4	页面布局-logo和搜索框	16:48
5	页面布局-页面导航	08:10
6	页面布局-商品分类	11:08

小结

1. 先分清“全宽容器”和“版心容器”，再写背景、边框和居中，能避免大量窄屏问题。
2. 浮动布局要条件反射检查清除浮动，但也要判断父元素自身是否已浮动。
3. 所有带边框、内边距的宽高都要按盒模型核算，不能只写设计图上的总尺寸。
4. 图片作内容用 img，作修饰用背景图；背景图路径要相对 CSS 文件检查。
5. 分隔线优先用独立元素，宽高、颜色、左右间距和垂直位置都更可控。
6. 行高和间距不要一次量死，按总高度分配上下空间，再通过刷新微调。
7. 调试用占位元素和临时样式必须在上线前删除，避免留下隐性滚动条或空白。
8. 结构层数不必过度纠结，但类名要能对应结构，方便定位样式和后期调整。