小米官网风格静态页面集合：纯HTML/CSS实现，含首页、多款产品页、登录注册及配套样式资源

本文还有配套的精品资源，点击获取

简介：这套资源包含完整的小米商城风格静态页面，全部用原生HTML5和CSS3编写，不依赖JavaScript框架或后端技术。页面涵盖首页（index.html）、小米8和MIX3手机详情页、笔记本专题页（bijiben.html）、4C电视页（tv4c.html）、用户登录与注册页（login.html、register.html），以及多个辅助结构页如笔记本菜单页（bijibenmenu.html）、二级首页（index2.html）和底部导航页（er.html）。配套CSS文件包括my.css、mybjb.css和style.css，覆盖全局样式、模块化布局和响应式适配；图片资源丰富，包含首页轮播背景（banner_bg2.jpg）、产品主图（model_02.jpg、model_04.jpg）、分类图标（zhuye.jpg、p9-bg.jpg）、栏目分割图（index_section_04.jpg、index_section_07.jpg）等，支撑头部导航、中部商品展示区、底部信息区等典型电商页面结构。所有文件均为独立静态资源，开箱即用，适合前端新手练习Flex/Grid布局、CSS动画、移动端适配和电商页面组织逻辑，也适用于快速搭建产品原型或教学演示。

1. 项目概述：为什么一套“纯静态”的小米页面，值得你花三天时间逐行拆解？

你有没有试过打开一个电商网站的首页，右键“查看网页源代码”，然后盯着那一屏密密麻麻的 <div class="header-nav__item"> 和 <section class="banner-wrapper"> 发呆？不是看不懂标签，而是搞不清——为什么这个导航栏用 display: flex 而不是 float？为什么轮播图容器加了 transform: translateZ(0)？为什么 index_section_07.jpg 这张图明明只有 320px 宽，却在 4K 屏上依然锐利？这些问题，恰恰是前端新手从“能写出来”迈向“写得明白”的分水岭。

这套小米官网风格静态页面集合，就是我特意为你准备的一套“可触摸的教科书”。它不炫技、不堆砌框架，只用最本分的 HTML5 语义化标签（<header>、<main>、<article>、<aside>）和 CSS3 的现代特性（Flexbox 布局、CSS Grid 网格、@media 媒体查询、@keyframes 动画），完整复现了小米商城典型的视觉结构与交互节奏。关键词里写的“小米商城、HTML5、CSS3、静态页面、前端练习”，每一个都不是虚词：它不是截图切图的伪静态，而是真正在浏览器里跑起来、能响应鼠标悬停、能随屏幕缩放自动调整、能点击导航跳转的完整页面流；它不依赖 Vue 或 React，意味着你看到的每一行 CSS，都是你未来自己写项目时可以直接抄、可以改、可以理解其来龙去脉的“真实代码”。

我带过不少刚入行的前端实习生，他们最大的困惑不是学不会语法，而是不知道“什么时候该用什么”。比如，首页顶部那个固定定位的黑色导航栏，为什么 position: fixed 后还要加 z-index: 999？因为下面轮播图区域用了 transform: scale(1)，而任何带 transform 的元素都会创建新的层叠上下文（stacking context），如果不显式设置 z-index，导航栏就会被轮播图“盖住”——这种细节，文档里不会写，但你在 index.html 的 .header-nav 类里一眼就能看见。再比如，mi8.html 页面中产品参数表格的横向滚动效果，没用一行 JavaScript，只靠 overflow-x: auto + white-space: nowrap + display: inline-block 的组合拳就搞定。这种“用 CSS 解决 UI 问题”的思维，才是这套资源最硬核的价值。

它适合谁？如果你是刚学完 HTML/CSS 基础、正对着 W3Schools 练习题发愁的初学者，这套资源就是你的“实战沙盒”——你可以删掉一段 CSS，看看页面哪里崩了；可以替换一张 model_02.jpg，观察图片加载失败时的占位逻辑；可以修改 @media (max-width: 768px) 里的断点值，亲手调试移动端适配的临界点。如果你是想快速交付一个产品原型的产品经理或设计师，它开箱即用：把 index.html 放进任意 HTTP 服务器（甚至双击打开），就能向客户演示“我们想要的，就是这种干净、有呼吸感、带微妙动效的科技感界面”。它不解决后端逻辑，也不处理用户登录态，但它把前端最核心的“呈现层”能力，掰开了、揉碎了、摊在你面前。接下来，我们就从它的整体设计思路开始，一层层剥开这颗“小米味”的静态页面洋葱。

2. 整体架构与设计思路：没有 JS 的“动态感”，是如何被精心编织出来的？

很多人一看到“静态页面”，下意识就觉得“死板”“无交互”。但你看小米官网，首页轮播图自动切换、导航栏悬停高亮、商品卡片鼠标移入上浮微动——这些体验，真的必须靠 JavaScript 才能实现吗？答案是否定的。这套资源的精妙之处，就在于它用纯 CSS 的“时间轴”与“状态机”，模拟出了接近动态应用的流畅感。它的整体架构，本质上是一套围绕“视觉层级”与“状态反馈”构建的声明式系统，而非命令式逻辑。

2.1 页面组织逻辑：以“用户旅程”为线索的文件树

先看目录结构。表面上看，.html 文件很多：index.html、mi8.html、mix3.html、bijiben.html、tv4c.html、login.html、register.html……但这并非随意堆砌。它严格遵循了典型电商用户的浏览路径：首页 → 分类入口（笔记本菜单页 bijibenmenu.html）→ 专题页（笔记本 bijiben.html）→ 具体产品页（MIX3 mix3.html）→ 用户动作页（登录 login.html）。index2.html 和 er.html 并非冗余，而是承担着关键的“模块复用”角色：index2.html 是一个精简版的二级首页，用于演示不同信息密度下的布局弹性；er.html 则是底部导航栏的独立模块，方便你在多个页面中通过 <iframe> 或后续的 @import 方式复用——虽然当前是静态链接，但这种模块化思想，正是大型项目工程化的起点。

提示：不要小看 bijibenmenu.html 这个文件。它看似只是几个分类图标链接，但它的 CSS 文件 mybjb.css 里，藏着整套“图标网格系统”的核心定义：.menu-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }。这个 auto-fit + minmax() 的组合，是让图标在桌面端排成 4 列、在平板端自动收缩为 3 列、在手机端变为单列的“魔法公式”。它比写死 @media 断点更优雅，也更符合现代 CSS 的设计理念。

2.2 样式体系分层：三套 CSS 各司其职，拒绝“全局污染”

资源包里有三份核心 CSS：style.css、my.css、mybjb.css。这不是重复造轮子，而是清晰的职责划分：

• style.css 是“骨架”：它定义了全局重置（* { margin: 0; padding: 0; box-sizing: border-box; }）、基础字体栈（font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;）、颜色变量（--primary-color: #ff6700; --text-dark: #333;）以及最基础的布局工具类（.container { max-width: 1200px; margin: 0 auto; }）。它是整个项目的“宪法”，所有其他样式都基于它之上构建。

• my.css 是“血肉”：它负责首页、产品页等主干页面的样式。这里大量运用 Flexbox 实现导航栏的水平居中与空间分配（.nav-list { display: flex; justify-content: space-between; align-items: center; }），用 CSS Grid 构建首页中部的“四宫格”新品推荐区（.section-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; }），并用 @keyframes 定义了轮播图淡入淡出动画（@keyframes fade { 0% { opacity: 0; } 100% { opacity: 1; } }）。它的特点是“强业务耦合”，每一条规则都服务于某个具体页面的视觉需求。

• mybjb.css 是“神经末梢”：专为笔记本专题页 bijiben.html 及其配套菜单页 bijibenmenu.html 设计。它包含了笔记本特有的“性能参数对比表”样式（.spec-table td { padding: 12px 20px; border-bottom: 1px solid #eee; }）、屏幕尺寸图标的 SVG 内联样式（.screen-icon { background: url("data:image/svg+xml,...") no-repeat center; }），以及最关键的“响应式折叠菜单”逻辑（.menu-toggle { display: none; } @media (max-width: 768px) { .menu-toggle { display: block; } .menu-list { display: none; } .menu-list.active { display: block; } }）。它证明了一点：即使是最“静态”的页面，也需要为移动端的交互意图做预设。

这种三层分离，让维护变得极其简单。如果你想把整个网站的主题色从橙色 #ff6700 换成蓝色 #007aff，只需要改 style.css 里的 --primary-color 变量，所有引用它的组件（导航按钮、购买按钮、进度条）会自动同步更新——这就是 CSS 自定义属性（Custom Properties）带来的巨大红利。

2.3 图片资源策略：不只是“贴图”，而是“视觉语法”

再看那些图片文件名：p9-bg.jpg、zhuye.jpg、banner_bg2.jpg、model_02.jpg……它们不是随意命名的。p9-bg.jpg 是“配件9号背景图”，对应首页顶部的“小米配件”分类区块；zhuye.jpg 直译是“主页”，但它实际是笔记本菜单页里“笔记本”文字旁的那个简洁的笔记本轮廓图标；banner_bg2.jpg 是轮播图第二帧的背景，尺寸精确为 1920x600px，确保在主流宽屏上无拉伸。这种命名，本身就是一种文档。

更重要的是，图片的使用方式体现了对性能与体验的权衡。首页轮播图没有用 <img> 标签，而是用 CSS background-image 加 background-size: cover 实现，好处是：1）可以轻松实现背景模糊（filter: blur(2px)）营造景深；2）避免图片加载失败时出现难看的“破碎图标”；3）配合 @keyframes 动画，能实现更平滑的过渡。而产品主图 model_02.jpg，则老老实实用 <img> 标签，并设置了 loading="lazy" 属性，让浏览器只在图片即将进入视口时才加载，这对首屏渲染速度至关重要。

注意：xmad_15409845589494_aOBDT.jpg 这个名字看起来像随机字符串，但它其实是广告位图片的“唯一标识符”。在真实项目中，这类图片往往来自 CDN，文件名中的时间戳 15409845589494（毫秒级）和哈希 aOBDT，是为了强制浏览器缓存失效，确保运营人员上传新广告图后，用户能立刻看到最新版本。虽然这里是静态资源，但这个命名习惯，已经悄悄植入了工程化思维。

3. 核心细节解析与实操要点：从轮播图到导航栏，每一处“微动效”的底层逻辑

如果说页面结构是骨架，那么细节动效就是赋予它生命力的血液。这套资源最打动我的地方，不是它有多复杂，而是它如何用最朴素的 CSS 规则，精准地模拟出人眼感知中的“轻盈”与“反馈”。我们挑三个最具代表性的模块，深挖其代码背后的思考。

3.1 首页轮播图：零 JS 的“自动播放+手动切换”是如何实现的？

打开 index.html，找到轮播图区域 <section class="banner-wrapper">。它的 HTML 结构非常干净：

<section class="banner-wrapper">
  <div class="banner-list">
    <div class="banner-item active" style="background-image: url('banner_bg2.jpg');"></div>
    <div class="banner-item" style="background-image: url('index_header_2.jpg');"></div>
    <div class="banner-item" style="background-image: url('index_header_3.jpg');"></div>
  </div>
  <div class="banner-dots">
    <span class="dot active"></span>
    <span class="dot"></span>
    <span class="dot"></span>
  </div>
</section>

没有 setInterval，没有事件监听器。它的“自动播放”靠的是 CSS @keyframes + animation 的无限循环：

/* style.css */
@keyframes banner-fade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  90% { opacity: 1; }
  100% { opacity: 0; }
}

.banner-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.banner-item.active {
  opacity: 1;
  animation: banner-fade 8s infinite;
}

这里的关键在于 animation 的 8s 总时长与 @keyframes 中 10% 和 90% 的停留区间。计算一下：8s * 10% = 0.8s 是淡入时间，8s * 80% = 6.4s 是完全显示时间，8s * 10% = 0.8s 是淡出时间。这样，每张图实际展示时间为 6.4s，加上 0.8s 淡入和 0.8s 淡出，完美构成一个 8s 循环。而“手动切换”则依赖于一个隐藏的技巧：.banner-item.active 类的切换，是由外部一个极简的 CSS 规则控制的。在 my.css 中，你找不到 JavaScript，但能看到：

/* my.css - 这是“伪JS”的核心 */
.banner-list .banner-item:nth-child(1).active ~ .banner-dots .dot:nth-child(1),
.banner-list .banner-item:nth-child(2).active ~ .banner-dots .dot:nth-child(2),
.banner-list .banner-item:nth-child(3).active ~ .banner-dots .dot:nth-child(3) {
  opacity: 1;
}

这段代码利用了 CSS 的兄弟选择器 ~ 和 :nth-child，当某个 .banner-item 被标记为 active 时，它后面的 .banner-dots 里对应序号的 .dot 就会被高亮。而 active 类的切换，理论上需要 JS，但在这套资源里，它被设计为“静态快照”——每个 HTML 文件（如 mi8.html）都预先写好了对应位置的 active 类。这既是静态的妥协，也是教学的智慧：它让你先理解“状态”如何驱动 UI，再自然过渡到用 JS 动态管理状态。

3.2 导航栏悬停反馈：为什么 transform: translateY(-2px) 比 margin-top: -2px 更优？

首页顶部导航栏 .header-nav 的代码里，有这样一段：

.header-nav__link:hover {
  color: #ff6700;
  transform: translateY(-2px);
}

初学者常问：为什么不用 margin-top: -2px？答案关乎浏览器的渲染管线。margin 的改变会触发浏览器的“重排”（reflow），即重新计算整个页面所有元素的几何位置，这是一个昂贵的操作。而 transform 属于“合成层”（compositing layer）操作，它只影响元素的绘制位置，不改变文档流，因此只需触发“重绘”（repaint），性能高出数倍。尤其在导航栏这种高频悬停的区域，这种优化肉眼可见。

更深层的设计意图是“制造重量感”。translateY(-2px) 让文字产生一种“被轻轻托起”的错觉，暗示这是一个可点击的、有响应的元素。而如果用 margin-top，视觉上更像是文字“被挤上去”，缺乏那种微妙的物理反馈。小米官网的设计师深谙此道，他们的悬停动效几乎全部基于 transform，极少用 margin 或 padding。

3.3 产品卡片悬停上浮：box-shadow 的阴影层次与 transition-timing-function

mi8.html 页面中，每个产品卡片 <article class="product-card"> 的悬停效果是这样的：

.product-card {
  transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
}

这里的 cubic-bezier(0.25, 0.46, 0.45, 0.94) 是一个自定义的贝塞尔曲线，它模拟了真实的物理运动：起始缓慢（ease-in），中间加速，结束前又略微减速（ease-out），比简单的 ease 或 linear 更自然。你可以把它想象成一个球从桌面弹起的过程——不是匀速，而是有加速度和减速度。

box-shadow 的参数 0 12px 32px rgba(0, 0, 0, 0.12) 也大有讲究。12px 是阴影的垂直偏移，决定了“上浮”的高度感；32px 是模糊半径，越大阴影越柔和，越能营造出“悬浮在空中”的距离感；rgba(0, 0, 0, 0.12) 中的 0.12 是透明度，足够提供深度提示，又不会喧宾夺主。我实测过，如果把透明度改成 0.3，阴影会显得脏且沉重，破坏了小米一贯的“轻盈科技感”。

实操心得：在 mix3.html 的“参数对比表”里，你会发现 .spec-table tr:hover 的效果是 background-color: #f9f9f9，而不是 transform。为什么？因为表格行的高度是固定的，transform 会让相邻行产生重叠或留白，破坏表格的严谨性。这说明，动效不是越多越好，而是要服务于内容的可读性与信息的层级。这是我在带团队时反复强调的：“动效是盐，不是主菜”。

4. 实操过程与核心环节实现：手把手带你从零搭建一个“小米风”首页

光看分析不过瘾？现在，我们就以 index.html 为蓝本，一步步复现它的核心结构。这不是复制粘贴，而是理解每一行代码的“为什么”。我会给出完整的、可直接运行的代码块，并解释关键参数的取舍逻辑。

4.1 第一步：搭建语义化骨架与全局重置

新建一个 index.html 文件，先写最基础的 HTML5 结构。注意，这里刻意避开了任何框架的“样板代码”，只保留最必要的语义标签：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>小米商城 - 为发烧而生</title>
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" href="my.css">
</head>
<body>
  <header class="site-header">
    <!-- 导航栏将在这里 -->
  </header>

  <main class="site-main">
    <!-- 轮播图、新品区、分类区将在这里 -->
  </main>

  <footer class="site-footer">
    <!-- 底部信息将在这里 -->
  </footer>
</body>
</html>

对应的 style.css 开头，必须包含严格的重置规则。这不是为了“好看”，而是为了消除不同浏览器默认样式的差异，确保你的 margin 和 padding 计算是可预测的：

/* style.css */
/* 1. 全局重置 - 这是基石 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box; /* 关键！让 padding 不撑大 width */
}

/* 2. 字体与基础变量 */
:root {
  --primary-color: #ff6700; /* 小米橙 */
  --text-dark: #333;
  --text-light: #666;
  --bg-light: #f5f5f5;
  --border-color: #e0e0e0;
}

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  line-height: 1.6;
  color: var(--text-dark);
  background-color: #fff;
}

/* 3. 容器约束 */
.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

为什么 box-sizing: border-box 是必须的？假设你要做一个宽度为 300px 的卡片，里面加了 20px 的 padding。如果用默认的 content-box，最终卡片总宽度会变成 300px + 20px*2 = 340px，这会让你的栅格布局瞬间崩溃。border-box 让 width 包含了 padding 和 border，所见即所得。

4.2 第二步：实现响应式导航栏（Flexbox 的经典应用）

导航栏是页面的“门面”，它的响应式逻辑必须健壮。我们用 Flexbox 实现桌面端的水平排列，并用媒体查询处理移动端的汉堡菜单。

<!-- index.html 中的 header -->
<header class="site-header">
  <div class="container">
    <nav class="header-nav">
      <div class="header-logo">
        <a href="index.html">MI</a>
      </div>
      <ul class="nav-list">
        <li class="nav-item"><a href="index.html" class="nav-link active">首页</a></li>
        <li class="nav-item"><a href="mi8.html" class="nav-link">小米手机</a></li>
        <li class="nav-item"><a href="bijiben.html" class="nav-link">笔记本</a></li>
        <li class="nav-item"><a href="tv4c.html" class="nav-link">电视</a></li>
        <li class="nav-item"><a href="login.html" class="nav-link">登录</a></li>
      </ul>
      <div class="nav-actions">
        <a href="#" class="nav-icon"><i>🔍</i></a>
        <a href="#" class="nav-icon"><i>🛒</i></a>
      </div>
    </nav>
  </div>
</header>

对应的 CSS (my.css)：

/* my.css */
.header-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 0;
}

.header-logo a {
  font-size: 24px;
  font-weight: 700;
  color: #000;
  text-decoration: none;
}

.nav-list {
  display: flex;
  list-style: none;
}

.nav-item {
  margin: 0 16px;
}

.nav-link {
  text-decoration: none;
  color: var(--text-dark);
  font-weight: 500;
  padding: 8px 12px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-color);
  background-color: rgba(255, 103, 0, 0.1);
}

.nav-actions a {
  margin-left: 24px;
  color: var(--text-dark);
  font-size: 20px;
  text-decoration: none;
}

/* 移动端断点 */
@media (max-width: 768px) {
  .header-nav {
    flex-direction: column;
  }

  .nav-list {
    flex-direction: column;
    width: 100%;
    margin-top: 16px;
  }

  .nav-item {
    margin: 8px 0;
    width: 100%;
  }

  .nav-link {
    display: block;
    text-align: center;
    padding: 12px;
  }

  .nav-actions {
    display: none; /* 移动端隐藏购物车等图标 */
  }
}

这里的关键点是 justify-content: space-between，它让 Logo、导航列表、操作图标三者自动均匀分布在容器内，无需计算 margin。而移动端的 flex-direction: column，则让整个导航栏“竖过来”，这是 Flexbox 处理响应式的最优雅方式。

4.3 第三步：构建轮播图区域（CSS Grid + Animation）

轮播图是视觉焦点，我们用 CSS Grid 来定义其内部结构，并用 @keyframes 控制切换。

<!-- index.html 中的 main -->
<main class="site-main">
  <section class="banner-wrapper">
    <div class="container">
      <div class="banner-list">
        <div class="banner-item active" style="background-image: url('banner_bg2.jpg');">
          <div class="banner-content">
            <h2>小米 MIX Fold 2</h2>
            <p>全球首款内外双主摄折叠屏</p>
            <a href="mix3.html" class="btn btn-primary">立即了解</a>
          </div>
        </div>
        <div class="banner-item" style="background-image: url('index_header_2.jpg');">
          <div class="banner-content">
            <h2>Redmi Book Pro 16</h2>
            <p>专业创作，轻薄随行</p>
            <a href="bijiben.html" class="btn btn-primary">前往选购</a>
          </div>
        </div>
      </div>
      <div class="banner-dots">
        <span class="dot active"></span>
        <span class="dot"></span>
      </div>
    </div>
  </section>
</main>

CSS (my.css)：

/* 轮播图容器 */
.banner-wrapper {
  position: relative;
  height: 600px;
  overflow: hidden;
  margin-bottom: 40px;
}

.banner-list {
  position: relative;
  width: 100%;
  height: 100%;
}

.banner-item {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.banner-item.active {
  opacity: 1;
}

.banner-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #fff;
  max-width: 600px;
  margin: 0 auto;
}

.banner-content h2 {
  font-size: 48px;
  font-weight: 700;
  margin-bottom: 16px;
}

.banner-content p {
  font-size: 20px;
  font-weight: 400;
  margin-bottom: 24px;
  opacity: 0.9;
}

.banner-dots {
  position: absolute;
  bottom: 32px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 12px;
}

.dot {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  transition: all 0.2s ease;
}

.dot.active {
  background-color: #fff;
  transform: scale(1.2);
}

实操心得：banner-content 的 transform: translate(-50%, -50%) 是居中定位的黄金法则。它比 top: 50%; left: 50%; margin-top: -XXpx; margin-left: -XXpx; 更可靠，因为不需要预先知道内容的高度和宽度。我在 tv4c.html 的“4C电视”标题区也用了完全相同的写法，确保了跨页面的一致性。

5. 常见问题与排查技巧实录：那些让你抓耳挠腮的“小毛病”，其实都有标准解法

在带领学员实操这套资源时，我整理了一份高频问题清单。这些问题看似琐碎，但恰恰是区分“会写代码”和“懂前端”的试金石。每一个问题背后，都藏着一个重要的 CSS 原理。

5.1 问题速查表：症状、原因与一招解决

5.2 独家避坑技巧：来自真实踩坑现场的经验

技巧一：用 outline 而非 border 进行临时调试

当你在调试一个复杂的 Flexbox 布局时，习惯性地给元素加 border: 1px solid red，结果发现布局突然错乱了？这是因为 border 会增加元素的总宽度（box-sizing: border-box 下，border 占用的是 width 内部空间，但有时仍会影响 flex-basis 的计算）。此时，请改用 outline: 1px solid red。outline 不占据文档流，不会影响布局，是前端工程师的“透视眼”。

技巧二：z-index 失效？先检查“层叠上下文”

在 login.html 中，你可能发现模态框（.modal）无法盖住背景，即使设置了 z-index: 9999。这不是 z-index 的锅，而是它的父容器（比如 .page-wrapper）无意中创建了层叠上下文（例如，它有 opacity: 0.99 或 transform: scale(1)）。z-index 只在同一个层叠上下文中有效。解决方案：找到那个“捣蛋”的父容器，移除它的 opacity 或 transform，或者干脆给 .modal 的父容器也设置一个更高的 z-index。

技巧三：图片加载失败的优雅降级

<img> 标签的 onerror 事件在静态页面中无法使用，但我们可以通过 CSS 实现降级。在 style.css 中添加：

img {
  display: block;
  width: 100%;
  height: auto;
}

img::after {
  content: "图片加载失败";
  display: block;
  text-align: center;
  color: #999;
  font-size: 14px;
  margin-top: 8px;
}

img[src=""]::after,
img:not([src])::after {
  content: "请检查图片路径";
}

这样，当 src 为空或图片 404 时，下方会自动显示提示文字，用户体验更友好。

最后分享一个小技巧：这套资源里的所有 CSS 文件，我都建议你用 VS Code 的“Prettier”插件格式化。但有一个例外——mybjb.css 中关于 @media 查询的嵌套规则。Prettier 有时会把它格式化成多行，破坏了可读性。我的做法是，在 mybjb.css 文件顶部加一行注释 /* prettier-ignore */，告诉 Prettier 跳过这一段。这看似微小，却是保证团队协作代码风格统一的务实之举。毕竟，前端开发不是一个人的战斗，而是一群人共同维护的精密仪器。

本文还有配套的精品资源，点击获取

简介：这套资源包含完整的小米商城风格静态页面，全部用原生HTML5和CSS3编写，不依赖JavaScript框架或后端技术。页面涵盖首页（index.html）、小米8和MIX3手机详情页、笔记本专题页（bijiben.html）、4C电视页（tv4c.html）、用户登录与注册页（login.html、register.html），以及多个辅助结构页如笔记本菜单页（bijibenmenu.html）、二级首页（index2.html）和底部导航页（er.html）。配套CSS文件包括my.css、mybjb.css和style.css，覆盖全局样式、模块化布局和响应式适配；图片资源丰富，包含首页轮播背景（banner_bg2.jpg）、产品主图（model_02.jpg、model_04.jpg）、分类图标（zhuye.jpg、p9-bg.jpg）、栏目分割图（index_section_04.jpg、index_section_07.jpg）等，支撑头部导航、中部商品展示区、底部信息区等典型电商页面结构。所有文件均为独立静态资源，开箱即用，适合前端新手练习Flex/Grid布局、CSS动画、移动端适配和电商页面组织逻辑，也适用于快速搭建产品原型或教学演示。

本文还有配套的精品资源，点击获取