小米官网的首页我在完整手写一遍之后最大的感受是它不像很多酷炫的营销页需要压箱底的特效它的好看完全建立在结构秩序和间距克制上。HTMLCSS能做到什么程度、做到什么程度才叫“会了”拿这个页面练一次手心里基本就有数了。这篇不是带你逐像素复刻的教程而是记录我完整写一遍的过程、拆解思路、以及几个容易卡住的模块的做法。如果你刚学完浮动和定位不知道怎么把这些散装知识拼成一个完整网站或者你正在准备前端作品集需要一个能体现布局功底的静态页面——这篇应该能给你一个清晰的实践路径。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 classtop-bar.../div div classmain-nav div classlogo.../div nav classnav-menu.../nav div classnav-right.../div /div /header main section classbanner.../section section classproducts.../section section classfeatures.../section section classnews.../section /main footer div classsitemap.../div div classcopyright.../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列网格可以灵活组合出“633”这种经典的左右比例布局。为什么选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. 响应式适配断点选择与移动端处理的细节现在的官网不可能只做桌面端移动端适配是必然要面对的一环。我的做法是先写完桌面版再用媒体查询逐屏调校移动版。前后期做法各有利弊目前大多数人的习惯是桌面优先因为桌面版的结构更完整能快速把握整体设计语言。如果你有精力也可以尝试移动端优先把单列布局作为基础再往大屏扩展。两种思路殊途同归关键是断点要怎么选。我没有机械地套用某个框架的断点而是根据页面内容崩坏的临界点来自行设置。我的经验是三个档位基本够用断点适用设备主要调整内容小于768px手机导航折叠为图标菜单产品区改为单列轮播保留但缩小字号768px ~ 1024px平板竖屏/小笔记本产品区改为两列顶部工具条部分隐藏大于1024px桌面使用完整布局这套断点不是拍脑袋定的。我把窗口从宽拖到窄观察哪个宽度下布局开始变得局促比如导航菜单开始换行、产品卡片文字被挤压那个宽度附近就是合适的断点。标准断点只是起点内容才是最终依据。移动端最需要重做的模块是导航。桌面端一行排开的菜单在手机宽度下必然放不下最务实的做法是用一个简单的图标按钮代替完整菜单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再回头补。写完之后我个人的一点体会这个页面写到一半的时候我还觉得挺枯燥的无非是盒子套盒子。但等全部模块跑通、图片和文字都填进去之后那种“用纯HTMLCSS真的能拼出一个完整的现代官网首页”的实感确实比写十个零散小demo带来的成就感强得多。如果你也想拿这个题目练手我的建议是先别管太多细节按导航、轮播、产品区、页脚的顺序依次推进每一块写到自己肉眼看着顺眼为止。写的时候多问自己一个问题这个模块能不能用一种更简单的方式布局很多看起来需要对每个元素单独调整位置的地方其实换一种布局方案几行代码就搞定了。等一版完整的页面落地再回头调整细节那时候你对间距、对比度、层级关系的敏感度和从来没完整写过整个页面的时候是完全不同的。前端练的就是这个“整体感”而这种感觉只能靠完整项目喂出来。