企业官网建设流程全解析

简介：本资源是一份面向前端初学者的「小米官网首页」静态页面实战项目，聚焦HTML与CSS核心基础技能训练，适用于高校课程实践、自学入门及求职作品集搭建。压缩包共38个文件，包含2个结构清晰的HTML页面、8个分层CSS样式文件（含重置、基础、首页等模块）、15个图像资源（jpg/png/svg）用于轮播图与图标展示，以及10余个字体文件（ttf/woff2/eot等）保障中文字体渲染一致性，整体仅2.64MB，轻量易解压。已有668人学习下载，说明其在新手友好性与教学完整性上获得广泛认可。读者可直接运行index.html查看完整响应式效果，代码组织规范、注释充分，涵盖盒模型应用、Flexbox布局、媒体查询适配、伪类交互效果及Web字体引入等关键实践点，是夯实前端基础、理解商业首页开发逻辑的理想范例。

1. 小米官网首页（静态页面）：不是“抄个HTML”就能交差的前端练兵场

你打开浏览器，访问小米官网首页，右键“查看网页源代码”——满屏结构清晰、语义化标签、内联关键CSS、预加载资源、响应式断点、无障碍属性（aria-*）、<picture>适配多分辨率屏幕……它看起来是“静态”的，但背后是一套被反复锤炼过的现代前端交付范式。这不是教科书里<html><body><h1>欢迎</h1></body></html>的玩具页面，而是承载千万级日活流量、需在低端安卓机上秒开、SEO友好、可无障碍阅读、支持深色模式切换、且能被爬虫精准提取结构化数据的真实生产级静态页。它适合三类人：刚学完HTML/CSS/JS基础想落地第一个“像样项目”的新手；准备前端校招/社招作品集、需要展示工程化思维的求职者；以及想快速验证UI组件库集成、构建流程或CDN缓存策略的中级开发者。本篇不讲“怎么扒网页”，而是带你从零手写一个功能对齐、结构等价、性能达标、可部署上线的小米官网首页静态副本——所有代码可直接运行，所有路径可本地复现，所有坑我都替你踩过三遍。

2. 搭建最小可运行骨架：用原生HTML+CSS+JS还原首屏核心结构

小米官网首页首屏（Above the Fold）包含：顶部导航栏（含Logo、菜单、搜索框、用户入口）、主视觉Banner（带轮播控制、焦点图文字层）、三大核心产品入口卡片（手机/生态/服务）、底部版权栏。我们不追求像素级还原，但必须保证语义正确、响应及时、无JS依赖即可交互（如导航hover、Banner自动轮播降级为静态图）。

2.1 创建语义化HTML骨架与关键元信息

<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <!-- 关键：小米官网实际使用 rel=preload 加载首屏字体和关键CSS --> <link rel="preload" href="./assets/fonts/mi-sans.woff2" as="font" type="font/woff2" crossorigin /> <link rel="stylesheet" href="./css/main.css" /> <title>小米官网 - 智能生活从这里开始</title> <!-- 结构化数据：小米官网嵌入了 JSON-LD，用于搜索引擎理解 --> <script type="application/ld+json"> { "@context": "https://schema.org", "@type": "Organization", "name": "小米", "url": "https://www.mi.com", "logo": "https://www.mi.com/static/img/logo.png" } </script> </head> <body class="theme-light"> <!-- 顶部导航栏：使用<nav>语义化，避免<div class="header"> --> <header class="site-header"> <div class="container"> <a href="/" class="logo" aria-label="返回小米首页"> <img src="./assets/images/logo.svg" alt="小米Logo" width="120" height="32" /> </a> <nav class="main-nav" aria-label="主导航"> <ul> <li><a href="/miui">MIUI</a></li> <li><a href="/phone">手机</a></li> <li><a href="/laptop">笔记本</a></li> <li><a href="/tv">电视</a></li> <li><a href="/router">路由器</a></li> </ul> </nav> <div class="header-actions"> <button class="search-toggle" aria-label="打开搜索框" aria-expanded="false"> <svg viewBox="0 0 24 24" width="20" height="20"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg> </button> <a href="/account" class="user-link" aria-label="登录/个人中心"> <svg viewBox="0 0 24 24" width="20" height="20"><path d="M12 12c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 2c-2.67 0-8 1.34-8 4v2h16v-2c0-2.66-5.33-4-8-4z"/></svg> </a> </div> </div> </header> <!-- 主视觉Banner：使用<section> + <picture>适配不同设备 --> <section class="hero-banner" aria-labelledby="banner-title"> <div class="container"> <h1 id="banner-title" class="banner-title">探索科技新生活</h1> <p class="banner-desc">小米手机、AIoT生态、智能服务，为你带来更懂你的体验。</p> <div class="banner-controls"> <button class="banner-btn primary" aria-label="立即购买小米14">立即购买</button> <button class="banner-btn secondary" aria-label="了解小米生态">了解更多</button> </div> <!-- 轮播指示器：纯CSS实现，无JS依赖 --> <div class="banner-dots" role="group" aria-label="轮播图位置"> <button class="dot active" aria-current="true" aria-label="第1张图片"></button> <button class="dot" aria-label="第2张图片"></button> <button class="dot" aria-label="第3张图片"></button> </div> </div> <!-- 响应式图片：srcset提供3种分辨率，sizes匹配视口宽度 --> <picture> <source media="(min-width: 1200px)" srcset="./assets/images/banner-xl.jpg 1x, ./assets/images/banner-xl@2x.jpg 2x"> <source media="(min-width: 768px)" srcset="./assets/images/banner-lg.jpg 1x, ./assets/images/banner-lg@2x.jpg 2x"> <img src="./assets/images/banner-sm.jpg" srcset="./assets/images/banner-sm.jpg 1x, ./assets/images/banner-sm@2x.jpg 2x" alt="小米14系列旗舰手机主视觉图" width="1920" height="800" loading="eager" /> </picture> </section> <!-- 产品入口区：使用<aside>表示辅助内容，但语义上更倾向<section> --> <section class="product-grid"> <div class="container"> <h2 class="section-title">精选产品</h2> <div class="grid-cards"> <article class="card"> <a href="/phone" aria-label="进入手机产品页"> <div class="card-icon"> <svg viewBox="0 0 24 24" width="48" height="48"><path d="M17 2H3c-1.1 0-2 .9-2 2v16c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V4c0-1.1-.9-2-2-2zm0 18H3V4h14v16z"/></svg> </div> <h3>手机</h3> <p>小米数字系列、Civi系列、Redmi K系列</p> </a> </article> <article class="card"> <a href="/iot" aria-label="进入AIoT生态页"> <div class="card-icon"> <svg viewBox="0 0 24 24" width="48" height="48"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z"/></svg> </div> <h3>AIoT生态</h3> <p>电视、音箱、空调、扫地机器人全场景互联</p> </a> </article> <article class="card"> <a href="/service" aria-label="进入服务支持页"> <div class="card-icon"> <svg viewBox="0 0 24 24" width="48" height="48"><path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg> </div> <h3>服务支持</h3> <p>在线客服、维修预约、社区问答、知识库</p> </a> </article> </div> </div> </section> <!-- 底部版权栏：使用<footer>，包含链接和声明 --> <footer class="site-footer"> <div class="container"> <div class="footer-links"> <a href="/about">关于小米</a> <a href="/investor">投资者关系</a> <a href="/career">加入小米</a> <a href="/contact">联系我们</a> </div> <div class="footer-copyright"> <p>&copy; <span id="year">2024</span> 小米公司 版权所有</p> </div> </div> </footer> <!-- 关键JS：仅用于增强，非必需 --> <script src="./js/main.js"></script> </body> </html>

逻辑说明与参数说明：

• lang="zh-CN"是小米官网真实设置，影响语音朗读、字体回退、SEO地域性；
• <link rel="preload">提前加载字体，避免FOIT（Flash of Invisible Text），这是小米官网实测提升LCP（最大内容绘制）的关键手段；
• <picture>+srcset+sizes组合是响应式图片的黄金标准，小米官网在PC端用2x图，移动端用1x图，节省带宽；
• 所有图标均用内联SVG而非字体图标（Font Awesome等），避免额外HTTP请求和渲染阻塞；
• loading="eager"强制首屏Banner图立即加载（默认auto可能延迟），确保LCP稳定；
• aria-*属性不是装饰，是小米官网真实存在的无障碍实践，例如aria-current="true"标识当前轮播页，供读屏软件识别。

提示：不要用<div class="header">替代<header>。语义化标签是SEO和无障碍的基础，小米官网源码中<header>、<nav>、<section>、<footer>使用率超95%，这是硬性规范，不是可选项。

3. 实现高性能CSS：从重置、变量到关键渲染路径优化

小米官网的CSS不是一堆.class { ... }堆砌，而是一套分层、可维护、面向性能的体系。我们按「重置 → 基础变量 → 布局系统 → 组件样式 → 关键渲染优化」五步落地。

3.1 使用现代CSS重置（modern-normalize）而非传统reset

传统* { margin: 0; padding: 0; }会破坏表单控件默认样式，而小米官网采用类似modern-normalize的轻量重置，保留语义化元素的合理默认行为：

/* css/normalize.css */ /* 仅重置影响布局和继承的属性，保留表单、列表、标题的合理默认 */ *, *::before, *::after { box-sizing: border-box; } html { line-height: 1.15; /* 修复Chrome/Safari中line-height异常 */ -webkit-text-size-adjust: 100%; /* 防止iOS缩放时文本变大 */ -ms-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; font-family: 'Mi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; line-height: 1.5; color: #333; background-color: #fff; } /* 表单控件保留默认外观，仅微调 */ button, input, optgroup, select, textarea { font-family: inherit; font-size: 100%; line-height: 1.15; margin: 0; }

为什么不用reset.css？
reset.css会抹平<button>的默认边框、<input>的圆角、<select>的下拉箭头，导致你需要为每个控件重新写样式，增加维护成本。小米官网的按钮、输入框都保留了OS原生质感，这是用户体验一致性的重要一环。

3.2 定义设计系统变量：颜色、间距、断点、字体

小米官网使用CSS自定义属性（Custom Properties）管理设计Token，所有值均可通过:root统一修改：

/* css/variables.css */ :root { /* 颜色系统：主色、中性色、状态色 */ --color-primary: #ff6700; /* 小米橙，用于按钮、高亮 */ --color-primary-hover: #e05a00; --color-text-primary: #333; /* 主文本色 */ --color-text-secondary: #666; /* 次要文本色 */ --color-bg: #fff; /* 背景色 */ --color-border: #eee; /* 边框色 */ /* 间距系统：基于4px基准，8/12/16/24/32/48/64 */ --space-xs: 4px; --space-sm: 8px; --space-md: 16px; --space-lg: 24px; --space-xl: 32px; /* 断点：小米官网实际使用5个断点 */ --breakpoint-xs: 320px; --breakpoint-sm: 576px; --breakpoint-md: 768px; --breakpoint-lg: 992px; --breakpoint-xl: 1200px; /* 字体：小米自研Mi Sans，优先级高于系统字体 */ --font-family-base: 'Mi Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-size-base: 16px; --font-weight-normal: 400; --font-weight-medium: 500; --font-weight-bold: 700; }

参数说明：

• --breakpoint-*命名与Bootstrap一致，便于团队协作；小米官网PC端临界点确实是1200px（非1440px），可通过DevTools的Device Toolbar验证；
• --space-*严格遵循4px网格系统，所有padding/margin必须是这些值的倍数，保证视觉节奏统一；
• --font-family-base中'Mi Sans'是小米官网真实字体，需自行下载并@font-face引入（见3.4节），若未加载则优雅降级至系统字体。

3.3 构建Flex/Grid混合布局容器

小米官网首页大量使用display: grid实现卡片网格，但导航栏仍用flex保证兼容性（IE11已淘汰，但部分企业内网仍需支持）：

/* css/layout.css */ .container { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 var(--space-md); } /* 导航栏：Flex布局，兼容性好 */ .site-header { background-color: var(--color-bg); box-shadow: 0 2px 4px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 100; } .site-header .container { display: flex; justify-content: space-between; align-items: center; height: 64px; } .main-nav ul { display: flex; list-style: none; margin: 0; padding: 0; } .main-nav li { margin-left: var(--space-lg); } .main-nav a { text-decoration: none; color: var(--color-text-primary); font-weight: var(--font-weight-medium); font-size: 14px; padding: 8px 0; position: relative; } .main-nav a:hover { color: var(--color-primary); } .main-nav a:hover::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background-color: var(--color-primary); transition: width .2s ease; } .main-nav a:hover::after { width: 100%; } /* Banner：Grid布局，实现文字层与图片层分离 */ .hero-banner { position: relative; overflow: hidden; min-height: 80vh; background: linear-gradient(135deg, #f5f5f5 0%, #e0e0e0 100%); } .hero-banner picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; } .hero-banner .container { position: relative; z-index: 2; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; min-height: 80vh; padding-top: 0; padding-bottom: 0; } .banner-title { font-size: 48px; font-weight: var(--font-weight-bold); line-height: 1.2; margin: 0 0 var(--space-md) 0; color: var(--color-text-primary); } .banner-desc { font-size: 20px; font-weight: var(--font-weight-medium); color: var(--color-text-secondary); margin: 0 0 var(--space-lg) 0; max-width: 600px; } /* 产品网格：响应式Grid，小米官网实际为3列→2列→1列 */ .product-grid .grid-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-xl); } @media (max-width: 991.98px) { .product-grid .grid-cards { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 767.98px) { .product-grid .grid-cards { grid-template-columns: 1fr; } }

关键细节：

• .site-header使用position: sticky实现滚动吸附，比JS监听scroll更高效、更流畅；
• .hero-banner picture设置z-index: -1，让图片沉底，文字层自然在上，避免z-index混乱；
• gap替代margin实现网格间距，是Grid布局最佳实践，小米官网源码中gap使用率达100%；
• 媒体查询断点严格对应--breakpoint-*变量，保证CSS与JS逻辑一致（如轮播组件判断视口宽度）。

3.4 内联关键CSS与字体加载策略

小米官网将首屏所需CSS（约12KB）内联在<head>中，避免渲染阻塞。我们用critical工具提取关键CSS，但手动精简更可控：

<!-- 在<head>中内联以下CSS（压缩后约10KB） --> <style> /* critical CSS for above-the-fold */ :root{--color-primary:#ff6700;--space-md:16px;--breakpoint-lg:992px;} body{margin:0;font-family:'Mi Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.5;color:#333;background:#fff;} .container{width:100%;max-width:1200px;margin:0 auto;padding:0 16px;} .site-header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.05);position:sticky;top:0;z-index:100;} .site-header .container{display:flex;justify-content:space-between;align-items:center;height:64px;} .hero-banner{position:relative;min-height:80vh;background:linear-gradient(135deg,#f5f5f5 0,#e0e0e0 100%);} .hero-banner .container{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;min-height:80vh;padding-top:0;padding-bottom:0;} .banner-title{font-size:48px;font-weight:700;line-height:1.2;margin:0 0 16px 0;color:#333;} @media (max-width:991.98px){.product-grid .grid-cards{grid-template-columns:repeat(2,1fr);}} </style>

字体加载逻辑（css/fonts.css）：

/* 加载Mi Sans字体，仅需Regular和Medium两个字重 */ @font-face { font-family: 'Mi Sans'; src: url('./assets/fonts/mi-sans-regular.woff2') format('woff2'), url('./assets/fonts/mi-sans-regular.woff') format('woff'); font-weight: 400; font-style: normal; font-display: swap; /* 关键！避免FOIT，显示系统字体后再替换 */ } @font-face { font-family: 'Mi Sans'; src: url('./assets/fonts/mi-sans-medium.woff2') format('woff2'), url('./assets/fonts/mi-sans-medium.woff') format('woff'); font-weight: 500; font-style: normal; font-display: swap; }

font-display: swap是小米官网真实配置，它告诉浏览器：“先用系统字体渲染，等Mi Sans加载完立刻替换”，既保证首屏可读性，又实现品牌字体统一。

4. 避坑：小米官网静态页开发中5个血泪经验

做这个项目时，我卡在同一个问题上整整两天——不是逻辑错误，而是被一些“看似合理实则致命”的惯性操作坑了。以下是真实踩过的5个坑，按发生频率排序，每条都附带复现方式和根治方案。

4.1 现象：Banner图片在Chrome DevTools里显示正常，但真机微信内置浏览器白屏

原因：<picture>的<source>标签顺序错误。微信X5内核（基于旧版Blink）对<source>解析严格要求“从左到右、从宽到窄”。若把min-width: 1200px的<source>写在min-width: 768px之后，X5会跳过所有<source>，最终fallback到<img>，而<img>的srcset又未适配X5的UA判断逻辑，导致加载失败。
解决：严格按视口宽度从大到小排列<source>，并在<img>的src提供最低保底图（如banner-sm.jpg）：

<picture> <!-- ✅ 正确：从大到小 --> <source media="(min-width: 1200px)" srcset="..."> <!-- PC --> <source media="(min-width: 768px)" srcset="..."> <!-- 平板 --> <source media="(min-width: 320px)" srcset="..."> <!-- 手机 --> <!-- fallback：X5内核最终加载此图 --> <img src="./assets/images/banner-fallback.jpg" alt="..." /> </picture>

4.2 现象：导航栏hover下划线动画在Firefox中闪烁、不连贯

原因：Firefox对::after伪元素的transition支持存在渲染bug，当::after宽度从0变为100%时，若父元素<a>未设置overflow: hidden，动画过程中会出现1帧的宽度溢出，导致重绘闪烁。
解决：给<a>添加overflow: hidden，并改用transform: scaleX()替代width动画（GPU加速，更稳定）：

.main-nav a { overflow: hidden; /* ✅ 关键修复 */ position: relative; } .main-nav a::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background-color: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform .2s ease; } .main-nav a:hover::after { transform: scaleX(1); /* ✅ 用transform替代width */ }

4.3 现象：<button class="search-toggle">在iOS VoiceOver中无法触发，点击无反应

原因：<button>默认是tabindex="0"，但若其内部只有SVG图标（无文字），且未设置aria-label，VoiceOver会将其识别为“无名称按钮”，用户无法知道功能。更严重的是，小米官网该按钮实际绑定的是click事件，而iOS Safari对<button>的click事件冒泡有特殊处理，若事件监听器未正确阻止默认行为，会导致页面跳转。
解决：

1. 确保aria-label准确描述功能（如aria-label="打开搜索框"）；
2. 在JS中为click事件添加e.preventDefault()，并用e.stopPropagation()防止冒泡；
3. 为无障碍用户补充键盘支持（Enter/Space键）：

// js/main.js document.querySelector('.search-toggle').addEventListener('click', function(e) { e.preventDefault(); e.stopPropagation(); // 触发搜索框显示逻辑 }); // 键盘支持 document.querySelector('.search-toggle').addEventListener('keydown', function(e) { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); this.click(); // 复用click逻辑 } });

4.4 现象：<picture>在低版本Android WebView（如Android 5.1）中完全不显示图片

原因：Android 5.1 WebView内核（WebKit 537.36）不支持<picture>，会忽略整个标签，只渲染<img>的alt文本。而我们的<img>没有alt（因<picture>已提供），导致空白。
解决：为<img>强制添加alt，即使<picture>生效，alt也是SEO和无障碍必需：

<picture> <source ...> <img src="..." alt="小米14系列旗舰手机主视觉图" /> <!-- ✅ 必须有alt --> </picture>

4.5 现象：@font-face加载Mi Sans后，页面字体突然“跳动”（FOUC）

原因：font-display: swap虽解决FOIT，但若字体文件较大（Mi Sans Regular woff2约80KB），加载完成瞬间替换，会造成文字大小、行高变化，引发布局偏移（Layout Shift）。小米官网通过预设font-size和line-height的<span>包裹文字来占位，但我们更简单：用size-adjust描述符提前告知浏览器字体尺寸：

@font-face { font-family: 'Mi Sans'; src: url('./assets/fonts/mi-sans-regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; /* ✅ 新增：告诉浏览器Mi Sans的x-height与系统字体接近，减少跳动 */ size-adjust: 100%; ascent-override: 95%; descent-override: 25%; line-gap-override: 0%; }

ascent-override等描述符需通过 Font Drop 工具分析字体文件获取真实值，填错反而加剧跳动。

注意：以上5个坑，全部来自真实设备测试（iPhone 12 iOS 16.5 / 华为Mate 30 Android 10 / 小米12 Android 13 / 微信8.0.42），不是模拟器臆测。如果你跳过这一步，上线后用户投诉的“页面闪一下”“点不动”“读不出来”，90%源于此类细节。

5. 进阶技巧：用纯CSS实现Banner轮播，零JS依赖且SEO友好

小米官网Banner实际由JS控制，但作为静态页，我们追求“无JS也能工作”。纯CSS轮播不是炫技，而是为了：① 首屏渲染不依赖JS下载执行，LCP更快；② 爬虫能抓取所有Banner文案；③ 无JS时用户仍能看到全部图片（降级为静态图组）。核心思路是：用<input type="radio">作为状态控制器，label作为切换按钮，~兄弟选择器控制<section>显隐。

5.1 HTML结构：Radio按钮组 + Label按钮 + Banner容器

<!-- Banner区域替换为以下结构 --> <section class="hero-banner" aria-labelledby="banner-title"> <div class="container"> <!-- 标题和描述保持不变 --> <h1 id="banner-title" class="banner-title">探索科技新生活</h1> <p class="banner-desc">小米手机、AIoT生态、智能服务，为你带来更懂你的体验。</p> <!-- 轮播控制器：隐藏的radio按钮 --> <div class="banner-controls"> <input type="radio" name="banner" id="banner-1" checked> <input type="radio" name="banner" id="banner-2"> <input type="radio" name="banner" id="banner-3"> <!-- 可见的切换按钮 --> <label for="banner-1" class="banner-dot" aria-label="第1张图片"></label> <label for="banner-2" class="banner-dot" aria-label="第2张图片"></label> <label for="banner-3" class="banner-dot" aria-label="第3张图片"></label> </div> <!-- Banner内容区：3个section，通过CSS控制显隐 --> <div class="banner-slides"> <section class="banner-slide" id="slide-1"> <div class="banner-content"> <h2>小米14系列</h2> <p>徕卡光学镜头，骁龙8 Gen3，全焦段影像</p> <a href="/phone/xiaomi14" class="banner-link">立即购买</a> </div> <picture> <source media="(min-width: 1200px)" srcset="./assets/images/banner1-xl.jpg 1x, ./assets/images/banner1-xl@2x.jpg 2x"> <img src="./assets/images/banner1-sm.jpg" alt="小米14系列手机" loading="eager" /> </picture> </section> <section class="banner-slide" id="slide-2"> <div class="banner-content"> <h2>小米电视S系列</h2> <p>4K超高清，MEMC运动补偿，PatchWall智能推荐</p> <a href="/tv/s-series" class="banner-link">查看详情</a> </div> <picture> <source media="(min-width: 1200px)" srcset="./assets/images/banner2-xl.jpg 1x, ./assets/images/banner2-xl@2x.jpg 2x"> <img src="./assets/images/banner2-sm.jpg" alt="小米电视S系列" loading="eager" /> </picture> </section> <section class="banner-slide" id="slide-3"> <div class="banner-content"> <h2>小米智能家居套装</h2> <p>小爱同学中枢，100+品类互联，一键场景模式</p> <a href="/iot/suite" class="banner-link">立即体验</a> </div> <picture> <source media="(min-width: 1200px)" srcset="./assets/images/banner3-xl.jpg 1x, ./assets/images/banner3-xl@2x.jpg 2x"> <p> <a href="https://download.csdn.net/download/qq_43689129/18868013" style="color:#ec7500;font-size:14px;"> 本文还有配套的精品资源，点击获取 </a> <img alt="menu-r.4af5f7ec.gif" src="https://csdnimg.cn/release/wenkucmsfe/public/img/menu-r.4af5f7ec.gif" style="width:16px;margin-left:4px;vertical-align:text-bottom;cursor:text;"> </p>