简介：这份静态页面项目以小米官网首页为蓝本，面向初学HTML与CSS的前端爱好者，帮助练习页面结构搭建、样式设计与常见布局实现。压缩包共38个文件，包含2个HTML入口页面、8个CSS样式文件、多张JPG/PNG/SVG图片以及字体文件等，整体2.64MB，适合作为前端入门阶段的上手素材。通过还原首页，可系统训练盒模型、CSS选择器、Flexbox与Grid布局、媒体查询、伪类与伪元素等知识点，同时练习超链接与导航的悬停效果、图片引入与优化方式，以及字体与文本样式设置。资源还提供了完整的目录结构和可直接运行的页面文件，便于对照源码理解模块化写法、注释习惯与浏览器兼容处理思路。已有663人学习下载，适合希望在真实项目中巩固CSS基础并理解静态页面制作流程的初学者，也可作为前端培训或课堂作业的参考案例。 前阵子想找点练手项目巩固前端基础，翻来翻去还是把目光落在了小米官网首页上。原因很简单：它不像电商巨头首页那样堆满运营位和跳转逻辑，也不会简单到只有几个文本框和按钮。小米首页的结构足够复杂，能拆出导航、轮播、商品楼层、活动专区、页脚一整套商业站点的常见模块，但整体视觉又走简洁路线，不会一上来就把人劝退。我最后用纯 HTML + CSS + 少量原生 JavaScript 做了一版完整的静态页面，今天就把整个拆解过程、关键实现和踩坑记录写出来，顺便聊聊静态页面打包部署的问题。
这篇内容适合两类人：一类是正在找前端练手项目的初学者，想知道一个商业首页应该怎么拆、怎么写；另一类是已经能写点页面，但想知道静态资源怎么组织、怎么和 Java 后端搭在一起部署的开发者。下文会按模块拆解，也会给具体代码和操作步骤，照着做能省不少时间。
1. 为什么拿小米官网首页练手：这个“静态页面”的含金量
先聊一个反直觉的结论：把小米首页做成静态页面，难度并不在于“写页面”，而在于“理解页面”。很多人一上来就照着截图硬撸 HTML，结果写到三分之一就乱了——因为商业站点页面的视觉层次和 DOM 结构不完全是一回事，你得先学会反过来拆。
1.1 小米首页的模块密度刚好卡在练习舒适区
我自己盘点过各电商和品牌官网：京东、淘宝首页的运营位、推荐流、实时交互太多，动态逻辑占比高，新手很容易陷进“为什么我的页面和真实站点不一样”的泥潭；小米首页则刚好卡在一个舒服的位置——它有 6 到 8 个核心视觉模块，每个模块单独拆出来都能讲清楚。
从顶部往下大致是：
- 顶部工具条：登录/注册、购物车、客服入口
- 主导航区：Logo、商品分类导航、搜索框
- 主视觉轮播区：全宽 Banner 图和左右切换箭头
- 快捷入口区：手机、家电、智能硬件等分类小图标
- 秒杀/活动专区：倒计时样式和横向商品卡片
- 手机、家电等商品楼层：每个楼层有标题栏和商品网格
- 服务保障区：售后、物流等图标说明
- 页脚区：全站链接和备案信息样式
也就是说，一个练手页面可以覆盖布局、伪类交互、响应式、图片切片、轮播动画等层面的知识，而且每个模块的知识点都不重复。
1.2 复刻了一次之后，你真正练到的东西
如果只从“学会了 HTML 标签和 CSS 样式”这个角度看，这项目的价值其实被低估了。真正值钱的是下面几件事：
- 学会了把一个视觉稿翻译成嵌套结构合理的 DOM，而不是从头到尾全用 div 堆。
- 学会了抽公共样式，导航、商品卡片、楼层标题这些复用的组件只写一次。
- 学会了控制页面加载性能，比如大量商品图怎么用占位图、懒加载策略怎么处理。
- 学会了看网络面板和响应式断点，而不是只在一种屏幕尺寸下“看起来像”。
这些能力在纯文档、纯教程里很难一次集齐，但一个真实首页的静态复刻能全给你覆盖到。
2. 动手前先把页面拆开：头部导航、Hero 区和商品楼层的结构逻辑
我踩过的第一个坑就是没拆页面直接动手。写到一半发现导航下拉菜单的层级关系和视觉位置匹配不上，最后整块返工。所以第一个建议是：不管做哪个网站的静态复刻，先把结构拆完再动手。
2.1 头部导航：绝对定位的下拉菜单是第一个硬骨头
小米首页的导航有一个特征：主导航是一级菜单，但鼠标悬浮到某些项时会展开二级分类面板，这个面板并不是简单的“子列表弹出”，而是整块内容从左侧起点对齐展开的。比如鼠标移到“手机”类别，弹出的面板里会有左侧分类列表和右侧精选商品图，宽度横跨整个导航区域。
这部分如果用“默认隐藏、hover 显示”的简单思路做，会出现的一个问题是子菜单背景错位。核心逻辑是：
<div class="nav-item"> <a href="#" class="nav-link">手机</a> <div class="sub-panel"> <!-- 子菜单内容 --> </div> </div>.nav-item { position: relative; } .sub-panel { position: absolute; left: 0; top: 100%; width: 100%; /* 对齐导航容器宽度，而不是子菜单自身宽度 */ display: none; } .nav-item:hover .sub-panel { display: block; }关键点在于.sub-panel的left要设置为0，并且宽度要跟随导航容器，而不是跟随.nav-item。如果页面导航居中、有最大宽度，子面板还要用left: 50%; transform: translateX(-50%)这类方式做水平居中。这个细节决定了弹出面板边缘和导航边缘是否对齐。
2.2 商品楼层：栅格规律和间距系统决定了页面“专不专业”
小米首页的商品区域并不是随意排布，它遵循一套明显的栅格规律。大部分商品卡片的宽度比例、卡片间距、行与行之间的留白都很统一。我当时总结出这套间距规范：
- 容器左右留白固定，内容区最大宽度约 1200px 左右。
- 卡片间距常用 14px 或 15px，鼠标悬浮时卡片有轻微上移和阴影加深效果。
- 商品卡片内部结构基本固定为：图片区、标题区、副标题/描述区、价格区。
这套规范直接决定了一个静态页面的质感。很多人抄页面“一眼假”的原因不是颜色不对，而是间距完全随机。建议在动手前先从截图里量一遍间距，我自己是把常用的 14px、28px、50px 几个档位写成了 CSS 变量：
:root { --gap-sm: 14px; --gap-md: 28px; --gap-lg: 50px; --container-max-width: 1200px; }后面所有模块的 margin 和 padding 都从这套变量里取，页面看起来才有“被设计过”的秩序感。
3. 布局选型：Flexbox 为主、Grid 为辅，别盲目追求新技术
在做静态页面时，布局方案的选择比写具体样式更值得花时间。我见过有人把所有布局都写成 Grid，也见过有人坚决只用 Flexbox，实际做下来，我的结论是：按场景混合使用，但以 Flexbox 为绝对主力更稳妥。
3.1 为什么主力用 Flexbox 而不是 Grid
Flex 在一个方向上分配空间的思维非常符合“顶部导航横向排列”“几个小图标水平居中”“卡片内图片在上文字在下”这类一维布局需求。而且浏览器兼容处理上基本没有历史包袱，代码写起来也更直观。
Grid 更适合“商品楼层”这种二维网格场景。楼层里商品卡片数量不固定，希望子项自动换行、自动铺满列数，用 Grid 会清晰很多：
.product-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-sm); }但如果整个页面的模块都用 Grid 写，会导致一个问题：嵌套层级一变深，grid 的轨道计算会变得很绕，后期调整成本高。我的分工方式是：能用一行 Flex 解决的不搞 Grid，只有明确的二维网格区域才用 Grid。
3.2 响应式断点的取舍思路
小米官网的响应式实现比较克制，因为网站的主要访问场景是桌面端。做静态复刻时不需要做到“手机上也完美”，但至少要处理好 768px 和 1024px 这两个常见阈值。
我实际断点这么拆：
- 小于 768px：导航折叠成简单的菜单按钮，商品楼层降为两列。
- 768px - 1024px：保留桌面导航结构，缩小商品卡片间距和字号。
- 大于 1024px：完整桌面布局。
这里有个容易踩的坑：不要追求把每个断点都做得完美，先保住内容不溢出、不遮挡就行。静态页面主要验证的还是桌面端的视觉还原度。
4. 开发过程中最值得记录的四个难点和对应解法
每个项目都会有一些“看着简单、写起来发现问题不少”的模块。小米首页静态化也不例外，下面四个问题是我当时卡得比较久的，单独列出来讲清楚。
4.1 轮播图为什么我选择了 JS 而不是纯 CSS
轮播图的实现方式有 CSS Scroll Snap、CSS 动画、原生 JS 切换等。纯 CSS 的 Scroll Snap 做横向滑动列表非常顺手，性能也好，但小米首页的轮播是自动播放、带左右箭头指示器、还要有“切换到哪一页就更新指示点状态”的逻辑，纯 CSS 实现会让 HTML 结构变得很别扭。
我最终用原生 JavaScript 做了一个极简的轮播控制逻辑，核心思路是维护一个索引，通过修改轮播容器的transform: translateX(-index * 100%)实现位移：
let currentIndex = 0; const slider = document.querySelector('.slider-wrapper'); const slides = document.querySelectorAll('.slide'); function goToSlide(index) { currentIndex = (index + slides.length) % slides.length; slider.style.transform = `translateX(-${currentIndex * 100}%)`; updateDots(); }这里要特别注意的是currentIndex取模运算，它避免了最后一屏之后“回跳”时出现过大的跳跃感。如果不用取模，从最后一张切回第一张时会看到整条横幅飞速倒带，观感很差。自动播放就加一个setInterval，鼠标移入轮播区域时暂停，移出后恢复。这套东西大概 30 行代码就能写完，不需要引入任何轮播库。
4.2 导航吸顶效果要处理“占位”问题
导航栏在滚动到顶部之后固定到视口顶部是很多网站的基础交互，但静态页面复刻时特别容易出现一个问题：导航position: fixed之后，下面的内容突然往上跳了一截。这是因为元素脱离了文档流。
解决办法是在触发吸顶的同时，给导航的原始位置补一个同高度的占位元素，或者更优雅的做法是给导航外层容器设置一个固定高度，让导航在里面position: sticky; top: 0;。实际测试下来，position: sticky在今天的主流域名上表现已经很稳定，能用它解决的问题不要去手动操作 JS 监听 scroll 事件。
4.3 小图标不用图片切图，直接用图标字体或 SVG
小米首页顶部有一堆小图标：购物车、客服、定位、用户头像等。我第一次做的时候逐个切成小图片放进img标签里，后来发现两个问题：一是图片请求数量太多，拖慢加载；二是 hover 变色需求没法用换图以外的方式优雅解决。
后来我统一换成了 SVG 图标内联方案，色彩用currentColor继承，hover 时直接改父元素color就能变色。这算是静态页面开发里的一个基础优化点：能用矢量解决的不要切位图。
4.4 商品图太多导致页面加载慢，怎么用占位图策略
静态页面没有真实后端，商品图要么从原站扒，要么用占位图。原站图片资源量大、图片体积不低，本地调试时全部加载非常慢。我的做法是：先给所有图片容器设置固定宽高和背景色，图片只保留首屏的几张真实图片，其余先用占位图或延迟加载。
关键细节是图片容器必须有明确的宽高比。否则图片加载过程中页面会反复抖动，影响调试体验。实践中我用了一个很朴素的方案：封面图统一放进一个宽高比固定的容器里，图片object-fit: cover，这样无论真实图片尺寸比例如何，布局都不会崩。
5. 收尾部署阶段：静态页面怎么从本地目录变成可访问的应用，包括打 Jar 包的问题
页面写完以后，下一步是部署。我做完直接就打算放到服务器上跑，当时还在团队里被问了一个问题：“这种纯静态页面能不能打进 Jar 包里，和后端接口一起部署？”这个问题挺典型，值得单独写一段。
5.1 先分清三种部署场景
- 纯静态部署：把 HTML、CSS、JS、图片直接放到 Nginx 或静态托管平台上，访问路径即目录路径，完全不需要后端参与。
- 静态资源放在后端项目中：比如 Spring Boot 项目，把页面放进
src/main/resources/static目录，打包时资源被一起打进 Jar 包，启动服务后直接通过http://localhost:8080/访问。 - 独立前端 + 后端 API：前端页面静态部署，数据通过 AJAX 请求后端接口获取，前后端完全分离。
做一个静态小米首页时，我建议先走第一种方案，流程最直观。但如果你的最终目标是理解“打包成 Jar 包”，那第二种场景就很值得手动做一遍。
5.2 怎么把一个本地目录打进 Jar 包
以 Spring Boot 为例，操作流程很固定，需要三步：
第一步，在src/main/resources下新建static目录，把整个静态页面的 HTML、CSS、JS、图片目录原样拷进去。
第二步，确认pom.xml里有spring-boot-starter-web依赖，因为这个依赖决定了 Spring Boot 是否启用静态资源自动映射。
第三步，用mvn clean package打完整 Jar 包，启动后访问根路径。默认情况下，Spring Boot 会把classpath:/static/目录映射到根路径，所以static/index.html就是网站的首页。
有个很容易踩的坑是：如果页面里用了“绝对路径”的静态资源，比如/css/index.css，打包后没问题；但如果你之前本地是用file://协议直接双击 HTML 打开的，里面资源的相对路径可能和打包后的 URL 路径对不上。打包前一定要把 HTML 里所有资源路径改成相对路径或符合服务上下文的绝对路径。
5.3 部署完成后的验证清单
不管是纯静态部署还是打 Jar 包，部署完以后不要只看一眼“能打开”就完事。我一般会走一遍下面这个验证清单：
- 首页在 Chrome 无痕模式下能正常打开，没有控制台报错。
- 所有图片都在网络面板里成功加载，404 的要全部处理掉。
- 从首页点击导航锚点能跳到对应区块，滚动行为正常。
- 页面宽度缩到 768px 以下，横向不出现滚动条。
- 刷新页面时，所有资源都能从缓存或服务端正常取回，没有样式丢失。
静态页面这类项目，最大的特点就是没有“复杂的运行状态”，所以排错重点几乎全部集中在路径问题和资源加载问题上。把这一套清单跑完，基本就稳了。
做完整套复刻和部署流程，我自己最大的感受是：静态页面项目看起来不起眼，但它是少数能让你一次性把“切图、布局、交互、部署”全链路走完的练习。做完一个完整首页，你对 HTML 的嵌套结构、CSS 的层叠关系、资源的组织方式都会比写一百个碎片化 demo 理解得更深。如果你也想动手练，建议别再盯着博客类个人站练了，直接挑一个你熟悉的商业首页，先拆后写，体验完全不一样。
本文还有配套的精品资源，点击获取
