简介仿小米官网模版是一份面向前端初学者与网页设计师的HTML网页源码包适用于练习企业级官网的页面搭建与整体视觉还原。项目模拟小米官网的信息架构与视觉风格借助HTML5语义化标签组织页面头部、导航、正文与页脚同时覆盖CSS3布局、响应式适配与表单交互等关键知识点。压缩包约2.65MB内容以HTML页面文件为核心配合CSS样式表与JavaScript脚本共同还原官网常见的轮播图、滑动菜单、下拉加载等交互效果。通过该模板可学习媒体查询、Flexbox/Grid布局的实际用法还能参考email、tel等新型输入类型的表单验证处理。目前已有427人学习下载适合希望在一个完整且贴近真实商业站风格的项目中系统提升前端开发技能的读者。1. 仿小米官网模版拿 HTML 静态页练手企业站布局的捷径如果你第一次动手做企业官网别一上来就啃框架直接拿一套仿小米官网的 HTML 模版拆开看反而是最省时间的入门方式。这类模版把电商首页常见的导航、轮播、商品卡片、页脚全部用原生 HTML CSS 搭好不依赖 Vue 或 React浏览器打开就能跑。对我这种常年接外包的人来说它还有一个更实在的用途当甲方催得紧时这套模版能直接当企业站或商城首页的底子改比从零手搓快上半天。我先后拿它给某公司的产品展示页做过二次开发也帮某高校的学生改过实训作业凡是熟悉基础标签的人照着这套结构改文字和图片一小时就能把一个可用的首页拼出来。不过别以为它只是静态皮囊里面对齐方式、层级关系、响应式断点的处理才是值得细看的地方。2. 布局骨架从导航栏到商品区的结构拆分2.1 顶部导航条的语义化标签选择拿到这套仿小米官网模版后我习惯先从头文件开始读。顶部导航是整个页面里最值得先看的部分它承担了品牌标识、主导航、搜索框和用户入口四个功能。模版里用的是header包裹nav导航内部再分左中右三块左右用浮动或 Flex 布局拉开的做法是早期电商站最通用的结构。header classsite-header div classheader-inner h1 classlogoa href#MI/a/h1 nav classmain-nav ul lia href#手机/a/li lia href#电视/a/li lia href#笔记本/a/li lia href#智能硬件/a/li /ul /nav div classheader-right form classsearch-box action# input typetext placeholder搜索商品 button typesubmit搜索/button /form a href# classuser-entry登录/a /div /div /header这段结构里我特别留意.header-inner这个容器它通常设置了固定的最大宽度常见是 1226px并居中这个宽度与小米官网早期版本保持一致保证在宽屏下内容不会无限拉伸。.main-nav里的ul用 Flex 横向排列每个li不需要单独设置间距直接用gap或margin-right控制即可。搜索框用form而不是div这是出于语义化考虑按下回车时能触发表单提交对无障碍访问也更友好。在实际改版时我一般会保留这套 header 结构因为企业站通常也要放 logo、联系电话和产品入口只需把#替换成真实链接把“手机”“电视”改成自己公司的产品名。参数上需要调整的地方主要是.header-inner的宽度如果企业站的商品卡片比小米的窄可以改成 1100px但注意要同步调整其他区块的父容器宽度否则页面左右会出现错位。遇到导航项更多的场景可以把ul改成 flex-wrap但不要忘了给li设置合理的 padding 值否则挤压到一起后标签的点击区域会变小移动端体验不佳。2.2 商品卡片网格的 Flex 与 Grid 选择商品展示区是仿小米模版里信息量最大的部分。模版在展示商品卡片时用的是display: flex配合flex-wrap: wrap每个卡片的宽度用百分比控制比如width: 23.5%再配margin-right: 2%这样一行能放下四个卡片。实际运行起来这种做法的好处是容器宽度变化时卡片会自动换行不用写媒体查询也能保证基本整齐。缺点是计算百分比时容易出偏差四列布局里最后一个卡片如果多加了 margin整行的换行就会乱掉。.product-grid { display: flex; flex-wrap: wrap; margin: 0 -10px; } .product-card { width: calc(25% - 20px); margin: 10px; background: #fff; transition: box-shadow 0.3s ease; } .product-card:hover { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); }这段样式的核心是calc(25% - 20px)它把卡片的左右 margin 全部包进宽度里保证四列之间缝隙均匀。.product-grid上设置负 margin 是一个经典做法用来抵消卡片两侧的 10px margin让整体网格与上方导航内容区对齐。如果换成 CSS Grid 布局写法会更简洁直接grid-template-columns: repeat(4, 1fr)就行但考虑到早期浏览器兼容性模版用 Flex 的做法显然更稳妥。我拿这套模版改企业站时遇到最多的需求是商品卡片数量不确定有的客户只有八个产品有的要展示十几个。Flex 方案的优势在这里就体现出来了卡片数量不足时不会像 Grid 那样留下空白列。另一个常见的改动是把卡片里的促销标签加一个角标我一般会在.product-card里加一个.product-tag绝对定位元素并把父元素设成position: relative。这里有个坑如果图片尺寸不统一卡片高度会参差不齐Flex 布局默认是按行内最高的卡片拉伸最直接的办法是给图片统一设height: 200px; object-fit: cover保证视觉上整齐。2.3 页面内容区的层级关系与 z-index 陷阱仿小米官网首页的层级关系比表面看起来复杂轮播图、吸顶导航、侧边栏、弹窗遮罩这些元素交叠时全靠z-index和position配合撑起层次。模版里吸顶导航用position: fixed同时设置z-index: 1000确保滚动时商品卡片不会从导航底下穿上来。轮播图内部如果用了箭头按钮就需要对比导航的层级关系来定z-index的值。我见过不少初学者把z-index当成一个只能往大调的数字结果弹窗的遮罩层和轮播箭头互相覆盖。实际调试时要注意z-index只在定位元素relative、absolute、fixed、sticky上生效。如果某个区块没有设置position就算z-index写成 9999 也不会起作用。模版里每个覆盖层都有明确的定位上下文轮播图容器是position: relative内部的左右箭头用absolute定位并设z-index: 10遮罩层z-index: 999吸顶导航z-index: 1000弹窗本身如果存在一般会设到z-index: 10000。调试层级问题时我一般会用浏览器开发者工具选中元素把position和z-index两个属性同时查看确认元素是否处于同一个层叠上下文里。还有一个容易忽略的情况transform属性会创建新的层叠上下文。商品卡片的 hover 效果里如果写了transform: translateY(...)那么卡片内部的子元素z-index将无法穿透到卡片外部去。这是频繁翻车的点等下会有专门章节讲。我的习惯是先把所有覆盖元素的 class 名和 z-index 值列成一个表格改一处就核对一次避免出现滚动后导航压住轮播箭头的诡异问题。3. 视觉还原把小米首页的细节特征做出来3.1 字体、颜色与间距的三个关键变量仿小米官网模版在视觉上最抓人的地方不是某一张图而是整体节奏感。整套页面主色是橙色系导航栏背景用黑色正文文字用近黑色辅助文字是中灰色。拆开看这里的间距体系是有章法的内容区左右留白固定、卡片间隙固定、文字行高固定。我一般会把颜色、字号、间距抽成 CSS 变量放在根伪类里方便后续整体调整。:root { --primary-color: #ff6700; --text-main: #333333; --text-sub: #757575; --bg-header: #333333; --gap-size: 14px; --content-width: 1226px; } .main-nav a { color: #ffffff; font-size: 14px; line-height: 60px; padding: 0 12px; } .product-title { color: var(--text-main); font-size: 14px; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; }颜色变量定义好之后企业站换肤就成了一件很轻松的事。把--primary-color改成品牌主色所有按钮、链接、标签都会同步变化不用逐个找文件替换。.main-nav里的导航项高度直接借用 line-height 撑开是早期官网常见的做法配合padding: 0 12px控制间距。商品标题那里的text-overflow: ellipsis是处理超长标题的关键配合white-space: nowrap和overflow: hidden一眼看不全的标题会自动变成省略号。间距这个变量在改版时同样重要。默认--gap-size是 14px企业站如果觉得卡片太挤可以放宽到 20px但要注意商品卡片的高度如果是由图片撑起来的间距调整不会带来布局抖动。真正的坑在于某些区块用了 padding某些区块用了 margin混用时间距会被叠加出现导航下方和轮播图上方忽大忽小的空隙。我建议在改造时固定一个原则区块之间的距离统一用 margin区块内部的留白统一用 padding不要混着用。3.2 阴影与圆角电商卡片的立体感从哪里来小米官网的卡片在视觉上并不花哨但悬浮时有一层淡淡的阴影和轻微的浮动这种反馈感让用户觉得卡片可点击。模版通过transition加box-shadow实现这个效果默认状态阴影很轻几乎看不见hover 时阴影加深同时卡片向上移动几个像素。.product-card { border-radius: 8px; overflow: hidden; background: #fff; transition: transform 0.2s ease, box-shadow 0.2s ease; } .product-card:hover { transform: translateY(-4px); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); }这里的圆角用的是 8px在整套页面里属于统一变量。实际改企业站时如果客户更偏好直角风格可以把border-radius改成 0但要注意卡片内部如有图片或按钮它们的圆角也要同步调整。overflow: hidden写在卡片上是防止内部元素溢出后破坏圆角这在有促销角标或图片放大效果的卡片里尤其重要。悬浮效果里transform: translateY(-4px)是我测过多个值后觉得舒适的距离小于 2px 几乎没有质感大于 8px 又显得太飘。这套微交互还有一个容易忽视的环节过渡时间。transition的 duration 设置为 0.2s 比较合适太短会显得生硬太长会有拖泥带水的感觉。如果你把阴影和位移拆成两个属性分别控制过渡注意保持时间一致性否则会出现阴影已经变深但卡片没动起来的不协调画面。我调试时习惯打开开发者工具的渲染面板开启 paint flashing能直观看到哪些区域在 hover 时发生重绘如果阴影引起大面积重绘可以考虑改用伪元素做阴影来提升性能。3.3 轮播图与按钮的视觉权重分配轮播图是整个首页视觉重心最重的位置它需要足够醒目但又不干扰下方商品信息。模版里轮播图宽度和内容区宽度一致高度约在 460px 左右图片本身用background-size: cover或直接放img标签加object-fit: cover来铺满容器。轮播左右箭头的视觉权重控制得比较轻默认半透明hover 时加深这样不会抢大片头图的注意力。按钮体系同样讲究轻重之分。主按钮如“立即购买”使用品牌主色背景、白色文字并且 hover 时会加深背景色次按钮如“了解更多”是白色背景加主色文字加边框。模版里这两个按钮的视觉差异很明显主按钮因为有背景色填充视觉重量重次按钮靠边框和文字色引导点击。颜色、阴影、圆角这三个维度结合起来其实就是组件设计系统里常说的视觉层级。仿小米官网模版之所以看起来高级是因为按钮、卡片、导航这些组件的视觉重量都经过了刻意控制重色块集中在主按钮和导航轻色块集中在辅助文字和箭头。我改企业站时最先调整的往往也是这套权重客户随便加一个高饱和色块做背景时页面的秩序感立刻会崩塌所以拿到模版后不要轻易修改颜色变量之外的硬编码颜色。4. 交互实现轮播、吸顶导航与返回顶部的 JavaScript 细节4.1 轮播图的基础逻辑与手动滑动状态管理仿小米官网首页的轮播图是常见的淡入淡出式切换每隔几秒自动播放鼠标移入时暂停右下角有几个小圆点显示当前索引。模拟这个逻辑并不复杂但状态管理容易出错。模版里通常会维护一个currentIndex变量切换时把当前图隐藏、下一张显示同时更新小圆点的选中状态。let currentIndex 0; const slides document.querySelectorAll(.slide); const dots document.querySelectorAll(.dot); const total slides.length; let timer null; function goToSlide(index) { slides[currentIndex].classList.remove(active); dots[currentIndex].classList.remove(active); currentIndex (index total) % total; slides[currentIndex].classList.add(active); dots[currentIndex].classList.add(active); } function nextSlide() { goToSlide(currentIndex 1); } function startAutoPlay() { timer setInterval(nextSlide, 3000); } const banner document.querySelector(.banner); banner.addEventListener(mouseenter, () clearInterval(timer)); banner.addEventListener(mouseleave, startAutoPlay);这段代码里最关键的是(index total) % total这个取模运算它保证了无论在最后一张点下一张、还是在第一张点上一张索引都不会越界。slides和dots使用querySelectorAll拿到的是类数组直接用下标访问即可。classList的add和remove是控制显示隐藏的标准做法。CSS 里.slide.active配合opacity和transition就能实现淡入淡出效果。实际改造时我通常会在这个基础上增加一点点“防抖”逻辑如果用户在动画播放过程中频繁点击箭头currentIndex会被反复修改导致画面跳来跳去。常见做法是加一个isTransitioning标志位动画结束前不接受下一次点击。另一个值得补的点是触摸滑动支持模版如果只做了点击箭头切换在移动端体验会打折扣加一套touchstart和touchend的差值判断即可。4.2 吸顶导航的实现与滚动事件性能商品页滚动时导航栏会从正常文档流里“吸”在窗口顶部这是官网标配交互。模版里常规做法是监听window.scroll事件判断滚动距离超过导航原始高度时给导航加一个固定类。const header document.querySelector(.site-header); const headerOffset header.offsetTop; function handleScroll() { if (window.scrollY headerOffset) { header.classList.add(is-sticky); } else { header.classList.remove(is-sticky); } } window.addEventListener(scroll, handleScroll);.is-sticky类对应position: fixed; top: 0; left: 0; z-index: 1000;。逻辑看上去简单但滚动事件在移动端和低性能设备上触发频率极高如果handleScroll里再有复杂的布局读写操作很容易造成卡顿。我一般会在这个基础上加requestAnimationFrame做节流或者用IntersectionObserver替代滚动监听。const observer new IntersectionObserver( (entries) { entries.forEach((entry) { if (!entry.isIntersecting) { header.classList.add(is-sticky); } else { header.classList.remove(is-sticky); } }); }, { rootMargin: -1px 0px 0px 0px } ); observer.observe(header);IntersectionObserver 的写法虽然比单纯监听滚动事件多一层概念但性能优势很明显。rootMargin设置成-1px是为了在导航刚离开视口边界时就触发状态切换避免出现吸顶后露出一条缝隙的情况。如果绑定了旧的 scroll 方案记得在页面销毁时移除监听单页应用场景里这个操作能减少内存泄漏的风险。仿小米模版如果是纯静态页不存在销毁问题但二次开发时嵌入别人的框架就需要注意清理。4.3 返回顶部按钮的显示阈值与平滑滚动返回顶部按钮是电商页的常客仿小米模版里一般在页面滚动超过一屏后显示点击后平滑回到顶部。显示阈值通常由一个固定值控制比如window.scrollY 600。按钮的显隐通过display或opacity控制我建议用opacity加pointer-events组合这样能做出渐隐渐显效果比display: none硬切更有质感。const backTop document.querySelector(.back-top); window.addEventListener(scroll, () { const isVisible window.scrollY 600; backTop.classList.toggle(is-visible, isVisible); }); backTop.addEventListener(click, () { window.scrollTo({ top: 0, behavior: smooth }); });classList.toggle第二个参数直接传入布尔值比先if判断再add或remove要干净。平滑滚动用behavior: smooth就能实现但这个属性在部分旧版浏览器里无效需要配合requestAnimationFrame做手动动画作为降级方案。我在自己改造时一般会加一个判断if (scrollBehavior in document.documentElement.style) { window.scrollTo({ top: 0, behavior: smooth }); } else { window.scrollTo(0, 0); }这段处理的意义在于支持平滑滚动就用原生能力不支持就瞬间回顶两行代码避免用户卡在半路。返回按钮的 CSS 位置通常是position: fixed加right: 40px; bottom: 80px不同屏幕宽度下要保持按钮距离边缘的距离一致。企业站改造时还要注意按钮不能遮挡移动端底部工具栏小屏设备可以把bottom值调得更大一些。5. 响应式适配与浏览器兼容性别让首页在手机上散架5.1 断点选择与导航栏的移动端折叠策略仿小米官网模版的响应式策略在断点上踩过不少坑。常见做法是设置三个断点大于 992px 显示完整导航768px 到 992px 隐藏部分次要导航小于 768px 把导航折叠成汉堡菜单。折叠菜单的实现通常依赖一小段 JavaScript点击汉堡按钮时展开下拉面板。media (max-width: 768px) { .main-nav ul { display: none; position: absolute; top: 60px; left: 0; width: 100%; background: #fff; } .main-nav ul.is-open { display: block; } .menu-toggle { display: block; } }这里有个隐藏很深的坑.main-nav ul的position: absolute是基于最近的定位祖先元素定位的如果nav本身没有设置position: relative下拉面板就会往上找到 header 甚至视口边缘位置错乱。所以移动端改造时要检查.main-nav是否已经设为position: relative。另外下拉面板弹出后下面的商品布局会用display: block覆盖原来的 Flex 排列让卡片变成单列纵向排列。汉堡菜单按钮的显隐逻辑也值得注意。桌面端display: none隐藏移动端display: block显示这里建议把按钮的 HTML 放在导航结构内部且不要用或~选择器依赖 DOM 顺序否则调整布局时很容易断掉。还有一点是折叠菜单展开后如果菜单项很多页面高度会撑得比较长滚动范围变大不太严重的做法也够用但如果想要更接近 App 的体验可以把菜单面板设成max-height: calc(100vh - 60px); overflow-y: auto;。5.2 图片尺寸在不同设备下的裁剪策略电商首页的图片是重灾区一款笔记本的展示图在桌面端是横向构图到了手机端如果不处理就会被压缩成看不清细节的一小条。模版里主推商品的图片一般都用object-fit: cover或者给容器设固定宽高比确保任何屏宽下图片都不会变形。.promo-banner img { width: 100%; height: auto; min-height: 160px; object-fit: cover; } media (max-width: 768px) { .promo-banner { height: 180px; } .promo-banner img { height: 100%; } }height: auto可以让图片保持原始比例但在容器高度固定为 180px 的场景下单纯靠height: auto不够还需要object-fit: cover把图片裁剪填充到容器里。两个属性共同作用才能兼顾比例控制和铺满效果。还有一种常见需求是换图移动端加载一张更窄的图片减少流量消耗这时可以用picture标签配合source元素做响应式图片切换比用 JavaScript 判断屏幕宽度再替换src要优雅得多。图片懒加载也是仿小米模版页面体积较大的原因之一。首页商品卡片数量多每张图都直接加载会显著拖慢首屏速度。原生loadinglazy属性就能解决大部分问题不需要额外引入脚本库。但要注意轮播首屏的第一张图不能懒加载否则会出现进入页面后轮播图区域白屏几秒的糟糕体验建议给首屏图片显式设置loadingeager或者干脆不加 lazy 属性。5.3 不同浏览器下 Flex 与 Grid 的兼容性处理仿小米官网模版的 HTML 结构是按旧标准写的很多样式在 Chrome 里表现完美但到了某些小众浏览器或旧版移动端浏览器Flex 布局就会出现莫名其妙的错位。最常见的症状是子元素被压缩变窄、换行失效、gap属性完全不生效。gap在 Flex 布局中是较晚才被支持的属性旧浏览器只认 margin 方案所以模版里普遍用 margin 加负间距的老办法是有道理的。.product-list { display: flex; flex-wrap: wrap; margin-right: -14px; } .product-item { width: calc(33.333% - 14px); margin-right: 14px; }这段代码用的是负 margin 加右 margin 的方式控制间距在旧版浏览器里的兼容性比gap好得多。calc函数本身兼容性尚可但减号两侧必须有空格写成calc(33.333% -14px)是无效的这是一个高频踩坑点。如果你在开发时用gap写得很顺手需要确认项目目标浏览器的最低版本比如某些企业还在使用未更新的老系统内嵌浏览器内核版本低Flex 的gap很可能不支持。另外position: sticky在一些旧移动端浏览器里也支持不佳。模版如果没用 sticky而你自己改造时想用稳妥做法是保留样式的同时再加一段 JavaScript 兜底用position: fixed模拟吸顶。我的原则是功能性增强可以大胆用新特性关键布局尽量保持兼容毕竟首页是门面在访客的浏览器里散架比少一点动画效果严重得多。6. 性能优化与首屏加载策略动手给首页减重拿到仿小米官网模版后很多人第一件事就是改内容但我建议先做一次简单的性能体检再动手改版。浏览器开发者工具的网络面板能看到每个资源的加载时间模版里常见的大块头来源有三类未压缩的图片、多个样式表和脚本文件、无用的字体或插件代码。我一般用三个步骤给它减重压缩图片、合并 CSS 和 JS 文件。# 查看图片资源大小 ls -lh images/ # 用工具批量压缩图片例如使用 cwebp 转成 webp cwebp -q 80 banner.jpg -o banner.webpwebp格式比同质量级别的 JPEG 小 25% 到 35%对首页大图收益尤其明显。转换时注意质量参数-q。我一般设在 75 到 85 之间低于 70 会出现明显压缩痕迹。如果图片内容包含透明通道webp 也能保留透明度比 PNG 体积小很多。全套商品图如果是背景透明产品图转换完的效果最明显。CSS 和 JS 的合并主要靠构建工具完成但如果模版没有构建配置直接在 HTML 里把多个link或script标签合并成一个也有一定效果。注意合并文件时不要打乱原有顺序特别是某些脚本依赖前一个脚本定义的全局变量时合并后仍然要按照原来的先后顺序排列代码块。我在处理时会把 CSS 先全部复制进一个文件再用压缩工具去空白和注释JS 合并时检查是否有window.onload多次赋值的现象多次赋值会导致之前的回调被覆盖行为不可预期。link relpreload hrefimages/banner-main.webp asimage首屏的关键图片用preload提前加载浏览器会把它当成高优先级资源不用等解析到对应img标签才开始请求。这个技巧配合 CSS 里首屏区域不做懒加载能明显缩短用户看到轮播图的时间。另外一个容易被忽略的点是字体如果模版引用了外部字体库首屏加载会阻塞渲染通常的做法是把不需要的字体子集裁剪掉或者干脆用系统字体栈替代。性能优化的终点不是追求 Lighthouse 满分而是让用户在真实网络环境下尽快看到可用内容。我改造这套仿小米模版时最终把首屏时间从 3 秒以上压到 1.5 秒左右主要收益来自图片压缩和移除一个统计脚本。从那以后我每次拿到静态页模版都会强制走一遍同样的流程打开网络面板记录基线压缩图片合并脚本再对比前后数据。这种习惯帮我避免了不少交付前才临时抢救性能的场面也希望这些操作能帮你在实际项目中少走一点弯路。资源包里的 HTML 结构可以直接在浏览器打开验证不需要搭建本地服务。你可以先按第 2、3 章的思路把布局和视觉拆完再按第 4 章的 JavaScript 逻辑把交互跑通最后落实第 5、6 章的响应式和性能优化。把这些步骤走一遍你对企业站首页的整体掌控会明显比照猫画虎式的改文字来得扎实希望帮到你。本文还有配套的精品资源点击获取