手写官网首页：HTML+CSS布局实战与避坑指南

小米官网的首页，我在完整手写一遍之后，最大的感受是：它不像很多酷炫的营销页需要压箱底的特效，它的好看完全建立在结构秩序和间距克制上。HTML+CSS能做到什么程度、做到什么程度才叫“会了”，拿这个页面练一次手，心里基本就有数了。

这篇不是带你逐像素复刻的教程，而是记录我完整写一遍的过程、拆解思路、以及几个容易卡住的模块的做法。如果你刚学完浮动和定位，不知道怎么把这些散装知识拼成一个完整网站；或者你正在准备前端作品集，需要一个能体现布局功底的静态页面——这篇应该能给你一个清晰的实践路径。

1. 为什么拿官网首页练手：这个页面的学习价值在哪里

我见过太多人学完HTML和CSS的基础标签之后，面对一个空白编辑器不知道从哪里下手。看视频课的时候什么都懂，一关掉视频就写不出一个完整的section。这就是典型的“知识点都会，综合能力为零”。而要打破这个瓶颈，最好的办法不是继续刷课，而是完整地临摹一个有专业设计水准的站点。官网首页恰好是这样一个对象。

先说说这个页面的含金量在哪里。

第一，它的布局层次非常典型。顶部导航、轮播焦点图、核心产品展示、多列卡片、底部信息区，这套结构是中文互联网企业官网的“标准答案”。你写会这一套，等于掌握了这类网站的主流骨架，以后看到任何一家电商、硬件、消费品公司的首页，都能一眼拆出它的模块，然后套用相似的结构去还原。

第二，它覆盖了CSS中最核心的实战技术点。我粗略数了一下自己用到的能力项：普通文档流、浮动或Flex布局、定位（相对/绝对/固定）、CSS变量、伪类、伪元素、圆角与阴影、渐变、甚至简单动画。这些都是面试和日常开发的高频考点。把一个页面完整写下来，比单独刷十个小demo有用得多，因为你能看到这些技术点是如何配合工作的。

第三，它的视觉风格对“审美洁癖”非常友好。官网走的是简约路线，大量留白、严格对齐、克制的主色调，这种风格特别能暴露一个人对间距和比例的把控力。如果你照着写，哪怕图片素材不那么精确，只要间距、字号、颜色关系对了，页面看起来依然是“那个味儿”。这就让练习者的注意力能集中在布局本身，而不是被复杂细节淹没。

第四，它是一个有完成度标准的项目。你写完一个注册页或登录框，可能很难判断好坏。但官网首页你有明确的对标物——打开真实官网，一屏一屏地对比，哪里窄了、哪里偏了、哪里层级不对，肉眼可见。这种“有参照的纠错”正是进阶最快的方式。

所以我的建议是：不要小看这个练习，也不要只把它当成“照着画”。完整写一遍，顺手还能收获一份能放进简历或作品集的项目。接下来所有的内容，我都假设你已经掌握了HTML常用标签和基础的CSS选择器，在此基础上讲怎么把它们组织成一个完整的页面。

2. 动手前先拆解：把首页切成一个个能落地的模块

拆页面是做前端的基本功，也是拿到设计稿之后最重要的一步。别急着写代码，先花半小时把目标页面的结构吃透。

我在写之前把官网首页拆成了十个区块，按从上到下的顺序排列：

• 顶部工具条：通常是深色背景的一行小字（App下载、登录/注册这类入口）
• 主导航区：Logo、产品分类菜单、搜索框、购物车入口
• 轮播Banner：大图切换区域，是页面视觉焦点
• 产品主推区：通常用大块卡片突出当季新品或主力产品
• 产品列表区：几列并排展示不同产品型号
• 服务模块：售后、维修、以旧换新等入口
• 测评/资讯区：图文混排的内容卡片
• 页脚Sitemap：产品分类链接的陈列区
• 底部备案和版权行

这里有个很重要的认知：你不需要在动手前就知道每一块的具体写法和代码结构，但你必须清楚这一块在整个页面里承担什么视觉角色，以及它和上下模块之间的关系。这就好比写文章先列大纲，具体段落可以后面再填。

给页面搭骨架的时候，我习惯先用语义化标签把大层次架出来，细枝末节先放一边。用div还是用HTML5的语义标签？我的习惯是：能用就用，但不强求。header、footer、nav、main、section、article这些语义标签，写对了不仅代码更清晰，对后续维护和SEO都有好处。

我当时写的第一版HTML骨架大概是这样的结构：

<header> <div class="top-bar">...</div> <div class="main-nav"> <div class="logo">...</div> <nav class="nav-menu">...</nav> <div class="nav-right">...</div> </div> </header> <main> <section class="banner">...</section> <section class="products">...</section> <section class="features">...</section> <section class="news">...</section> </main> <footer> <div class="sitemap">...</div> <div class="copyright">...</div> </footer>

这一步的关键是“由上到下、由大到小”。先把外层框架写出来，再去填充内部内容。很多新手失败的原因就是反过来，一上来就盯着某一个产品卡片的像素级细节，结果做完一个区域就累了，后面全部垮掉。先整体后局部，每次只做一件小事情，心里始终有一张完整的地图，进度感会明确很多，也会更容易坚持做完整个页面。

还有一个小技巧我强烈推荐：在做完HTML结构、还没开始写CSS的时候，可以先给所有模块加上临时背景色或边框。比如给每个区块设置不同的淡色背景，或者统一加上虚线边框。这样你能一眼看出每个区块的边界是不是符合预期，哪个容器塌了、哪个没撑起来，一目了然。写完布局之后再统一去掉这些临时辅助样式，比自己对着空白页面瞎猜要高效得多。

3. 布局核心：我在导航栏和产品区用到的Flex与Grid实战

拆完模块后，真正考验布局功底的地方来了。整个页面里最常用、也最关键的两种布局方案，就是Flex和Grid。先说我的整体选型结论：一维排列用Flex，二维网格用Grid。听起来像废话，但很多人就是栽在这句废话上——他们总是在一行按钮排列里硬用Grid，或者在需要对齐行和列的地方硬用Flex。

导航区是我第一个动手写的模块，也是整个页面里最典型的Flex场景。它的结构是“左边Logo，中间菜单，右边搜索和购物车”，整体是水平方向的一条线。用Flex做这条线再合适不过。

.main-nav { display: flex; align-items: center; justify-content: space-between; height: 60px; padding: 0 24px; } .nav-menu { display: flex; gap: 24px; list-style: none; }

这里面有两个细节值得展开说。

第一个细节是justify-content: space-between。它让主轴的三个部分自动贴到两端和中间，间距完全由浏览器计算，不需要手动算margin。但需要注意，如果左侧Logo和右侧工具区的宽度不稳定，space-between会产生“中间部分偏离视觉中心”的问题。更稳妥的做法是用margin: 0 auto来让中间菜单真正居中：

.nav-menu { display: flex; margin: 0 auto; }

这样无论两侧内容多宽，菜单始终位于整个导航条的正中央，视觉上更稳定。这个处理方式在多个导航方案里都是最优解。

第二个细节是logo和菜单之间的分隔。真实官网上通常不会所有的导航项挤成一团，而是通过间距、分割线、背景色来划分边界。用CSS实现的时候，gap是控制间距最优雅的属性，比一个一个设margin干净得多。记住，gap只在Flex和Grid容器内生效，普通的地方别乱用。

如果说导航是Flex的主场，那么产品展示区就是Grid的主场。

官网首页的核心产品区通常是“左侧一个大卡片，右侧两个小卡片”，或者一排多个等宽产品卡。这种既要管行又要管列的区域，用Flex会很别扭，因为要在一行里做不同宽度的比例控制，弹性计算容易失控。用Grid把父容器定义成明确的三列网格，每个子项自己决定跨几列，写起来就像填空一样自然。

.product-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 16px; } .product-large { grid-column: span 6; } .product-small { grid-column: span 3; }

这里使用12列网格，可以灵活组合出“6+3+3”这种经典的左右比例布局。为什么选12列？因为它能被2、3、4、6整除，组合灵活度最高，这是前端栅格系统里约定俗成的做法。

产品卡片在Grid内的实现还有一个容易忽略的点：卡片本身的高度一致性。Grid的默认行为是让同一行的单元格自动等高，这是一个巨大的优势——比Flex配合align-items的stretch要省心。你不需要给每个卡片手动设置相同高度，也不用担心某个卡片内容多把整行撑得高低不齐。若用Flex做多列产品卡，则要额外处理等高问题，代码立刻复杂一个量级。

所以我的最终建议是：一行内上下不对齐就用Flex，行列都要对齐就用Grid，不要混着用，更不要在一个容器里同时开两种布局方式。前者适合作导航、按钮组、标签行、卡片里的内容行；后者适合产品网格、图片画廊、需要严格对齐的卡片矩阵。这也是我在这个页面里把布局能力训练得最扎实的一课。

4. 轮播Banner和吸顶导航：两个容易卡住的模块

如果说前面那些区块还有人能靠感觉写出来，那轮播图和吸顶导航绝对是初学者的两道坎。因为这俩不光考验布局，还考验对CSS状态、伪元素、以及一些“非标准直觉”的属性的理解。我一个个说。

4.1 没有JavaScript也能做轮播图

看到标题别惊讶，纯CSS确实能做轮播效果，虽然真实官网里的轮播是JS控制的，但作为静态页面的还原练习，CSS方案完全够用，而且能训练你对定位和动画边界的理解。

最实用的纯CSS轮播方案有两种：一种是scroll-snap，一种是animation搭配transform。我个人推荐优先用scroll-snap，因为它的代码量小、行为自然，而且支持触屏滑动，移动端体验很好。

.banner-wrapper { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; } .banner-slide { flex: 0 0 100%; scroll-snap-align: start; }

这里的核心概念是“吸附”：scroll-snap-type定义在父容器身上，告诉浏览器“横向滚动时，滚动结束后要吸附到某个位置”；scroll-snap-align定义在子元素身上，告诉浏览器“子元素哪条边是对齐基准”。两者配合，用户滑动时松手，浏览器会自动把当前屏卡到位，完全不需要JS监听 scroll 事件。

但做自动播放的轮播时，纯CSS就很吃力了。我的做法是：页面里用scroll-snap做手动滑动，如果要实现“每隔几秒自动切到下一张”的效果，可以用animation移动容器：

.banner-track { display: flex; width: 300%; animation: slide 9s infinite; } @keyframes slide { 0%, 30% { transform: translateX(0); } 33.33%, 63.33% { transform: translateX(-33.333%); } 66.66%, 96.66% { transform: translateX(-66.666%); } 100% { transform: translateX(0); } }

这里的关键点是百分比与轮播数量之间的关系。三张图需要300%的宽度，每张占1/3，所以在33.33%和66.66%处切换，停顿时间和过渡时间分别控制。记住这个数字关系，以后做三张、四张、五张的轮播都能推算出来：n张轮播，track宽度就是n00%，每个关键帧的切换点就是 100/n 的整数倍。

纯CSS轮播的局限是无法点击底部小圆点跳转到指定页，也无法在滑动后同步圆点状态。如果后续要接JavaScript，给track加上transition，用JS修改transform的值就可以兼容升级。目前先练好CSS部分的“形”，后面写JS时就知道该把动态逻辑挂在哪里了。

4.2 吸顶导航的占位陷阱

吸顶导航就是滚动时导航栏固定在视口顶部的效果。核心CSS只有一行：

.main-nav { position: sticky; top: 0; z-index: 100; }

sticky比fixed更适合导航栏，因为sticky不脱离文档流，它在“滚动到顶部之前”依然占据原来的位置，滚动经过时才开始“吸住”。用fixed的话，导航一开始就从文档流中被抽离，下面的内容会瞬间往上顶，需要额外给body加padding补偿，操作很绕。

但sticky有个很容易踩的坑：它的吸附效果只在父容器范围内生效，且父容器不能有overflow: hidden。如果你把导航和页脚包在同一个大容器里，导航吸到容器底部就会停住，不会再跟着滚动；而如果某个父级为了清除浮动或实现圆角写了overflow: hidden，整个sticky会直接失效，表现成普通定位。我第一次写的时候，页面外层挂了个overflow-x: hidden来处理横向溢出，结果导航怎么都不吸顶，排查了很久才发现是这个属性在搞鬼。所以用sticky之前，一定要检查所有祖先元素有没有overflow相关设置。

吸顶导航还有一层问题是层级。Banner轮播里的图片、下拉菜单、弹层，都需要和导航比较层级关系。做法是给导航设置一个足够大的z-index，比如100，同时给Banner、产品区的定位元素设置较低的z-index。这里有个容易忽略的点：z-index只在定位元素（position不为static）上生效。如果某个下拉菜单忘加position属性，z-index写得再大也没用。这个坑我前后踩了两次，后来养成了“凡是设z-index必先写position”的习惯。

5. 响应式适配：断点选择与移动端处理的细节

现在的官网不可能只做桌面端，移动端适配是必然要面对的一环。我的做法是先写完桌面版，再用媒体查询逐屏调校移动版。前后期做法各有利弊，目前大多数人的习惯是桌面优先，因为桌面版的结构更完整，能快速把握整体设计语言。如果你有精力，也可以尝试移动端优先，把单列布局作为基础，再往大屏扩展。两种思路殊途同归，关键是断点要怎么选。

我没有机械地套用某个框架的断点，而是根据页面内容崩坏的临界点来自行设置。我的经验是三个档位基本够用：

这套断点不是拍脑袋定的。我把窗口从宽拖到窄，观察哪个宽度下布局开始变得局促，比如导航菜单开始换行、产品卡片文字被挤压，那个宽度附近就是合适的断点。标准断点只是起点，内容才是最终依据。

移动端最需要重做的模块是导航。桌面端一行排开的菜单在手机宽度下必然放不下，最务实的做法是用一个简单的图标按钮代替完整菜单，CSS隐藏掉具体的菜单项：

@media (max-width: 768px) { .nav-menu { display: none; } .menu-toggle { display: block; } }

产品区用Grid的响应式能力做列数收缩：

.product-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }

auto-fit和minmax的组合是响应式Grid里的王牌：每列至少280px，放不下就自动换行，不发生横向滚动，也不需要写媒体查询。这个技巧在处理任意数量的卡片时都非常好用。它是我在灰度项目里优化卡片布局时沉淀下来的经验。

除了布局，移动端还要处理字体和间距。触屏设备的阅读距离和桌面显示器不同，最小字号建议不低于14px，区块间的垂直间距在手机上适当压缩到桌面的一半左右。原因是手机屏幕本来就小，过大的留白只会让内容显得稀疏，用户需要滑动更多屏才能看到后面内容。间距的“疏密相间”在移动端要比桌面端更紧凑。

另外一个移动端特有的细节是点击区域。导航图标、搜索按钮这类交互元素，建议把实际点击区域放大到44px见方左右，这是触屏操作比较舒适的最小尺寸。哪怕图标本身只有20px，用一个padding把周围撑开，体验会好很多。这个细节看似微小，但在移动端适配检查时是很容易被外行一眼看穿的水平线。

6. 完整走一遍之后，我记住的几个教训

页面写完并不代表结束，真正让人进步的是写完之后的复盘。我把自己在这个项目里踩到的几个比较有代表性的问题整理了一下，都是那种“原理你好像知道，但你不踩一次就不会长记性”的典型。

6.1 宽度百分比链引发的图像拉伸

做产品卡片时，我给图片设了width: 100%，但它父容器又套了一层百分比宽度，最后导致图片在某些屏宽下被拉伸到比例失调。问题出在百分比宽度是相对父容器计算的，不是相对图片原始尺寸。当父容器宽度变化，图片跟着拉伸，而高度若固定，就会变形。

解决方案是object-fit: cover，让图片在保持比例的前提下填满容器，超出部分裁掉：

.product-card img { width: 100%; height: 200px; object-fit: cover; }

记住这个属性，它是我在这类布局问题中使用最频密的CSS属性，没有之一。

6.2 横向滚动条从哪里冒出来的

完成页面后，我在手机上检查时发现页面可以左右滑动，底部多了一条横向滚动条。排查了一圈，最常见的嫌疑是某个区块的宽度超过了视口宽度，比如定位元素设置了负的left值、或者某个长单词/长URL没换行把容器撑开了。

治本的方案是不要反复去排查大宽度，而是提前控制溢出。我最终用两行代码兜底：

html, body { overflow-x: hidden; max-width: 100%; }

但我必须强调，这个方案是“止损”，不是“根治”。它会掩盖真实的溢出问题，让页面在视觉上正常，但某些组件在极端屏宽下可能变得不可见或位置错乱。所以还是要定位到具体元素，比如用浏览器开发者工具逐层检查哪个元素的宽度超出视口，才是干净的修法。正常情况下我建议先把明显的问题元素修掉，再把overflow-x: hidden作为最后一道保险。

6.3 垂直居中为何失效

我见过很多人写居中样式时，直接对着一个行内元素用Flex的align-items，结果不起作用，就开始怀疑属性是不是写错了。这里的关键区分在于：Flex控制的是“子元素”的排列，不是元素自身。你想让一个div里的图片居中，要给div设display: flex再配align-items和justify-content，而不是给图片本身设flex。一个元素本身是无法既当flex容器又当flex子项来给自己居中的。

页面里那些“图标+文字水平排列并垂直居中”的按钮，我的做法是：

.btn { display: inline-flex; align-items: center; gap: 6px; }

inline-flex能让按钮在文档流中保持行内特性，内部又是flex布局，处理图标和文字的居中非常顺手。用熟练之后，这类组合几乎成了我处理“图文并排”的标配，远比浮动加line-height去逐像素对齐要稳定。

6.4 字体与间距的一致性

写完整页之后，我检查视觉细节时发现字号和配色有些随意，后来统一用CSS变量收敛了核心设计令牌，整体观感立刻整齐不少。

:root { --primary-color: #ff6700; --text-dark: #333; --text-light: #666; --bg-light: #f5f5f5; --spacing-sm: 8px; --spacing-md: 16px; --spacing-lg: 32px; --font-size-lg: 20px; --font-size-md: 14px; }

用变量的价值在于：局部修改的时候不用翻整个样式表。比如后来我想把主色调调深一点，只需要改一处:root里的定义，全站同步生效。间距也一样，所有区块的padding统一引用变量，页面的节奏感会天然保持一致。这也是一个静态页面从“能看”到“专业”之间的重要分水岭。

6.5 菜单悬停下拉没有z-index加持必然被图片压住

导航菜单往下弹出下拉面板时，如果产品Banner里有一张z-index较大的定位图片，下拉菜单会被压住。原因还是层级问题。下拉菜单的容器要同时具备position和z-index，且数值必须高于Banner区域的定位元素。

.dropdown { position: absolute; z-index: 200; /* 其他样式省略 */ }

这种问题在写的时候往往不会立刻暴露，只有等你给Banner加了特效（比如动画、阴影）之后才突然出现。所以我在任何涉及悬停下拉或浮层的地方，都会第一时间把层级打好，而不是等出了bug再回头补。

写完之后，我个人的一点体会

这个页面写到一半的时候，我还觉得挺枯燥的，无非是盒子套盒子。但等全部模块跑通、图片和文字都填进去之后，那种“用纯HTML+CSS真的能拼出一个完整的现代官网首页”的实感，确实比写十个零散小demo带来的成就感强得多。

如果你也想拿这个题目练手，我的建议是先别管太多细节，按导航、轮播、产品区、页脚的顺序依次推进，每一块写到自己肉眼看着顺眼为止。写的时候多问自己一个问题：这个模块能不能用一种更简单的方式布局？很多看起来需要对每个元素单独调整位置的地方，其实换一种布局方案，几行代码就搞定了。

等一版完整的页面落地，再回头调整细节，那时候你对间距、对比度、层级关系的敏感度，和从来没完整写过整个页面的时候是完全不同的。前端练的就是这个“整体感”，而这种感觉，只能靠完整项目喂出来。