简介本资源是一份面向前端初学者的「小米官网首页」静态页面实战项目聚焦HTML与CSS核心基础技能训练适用于高校课程实践、自学入门及求职作品集搭建。压缩包共38个文件包含2个HTML主页面、8个CSS样式文件含重置、基础、首页等分层结构、8张JPG Banner图与4张PNG图标、3种字体格式WOFF2/EOT/WOFF及SVG矢量图标整体2.64MB资源组织清晰便于逐模块理解布局逻辑与样式分层。已有670人学习下载体现了其在新手练手场景中的高实用性。学习者可直接运行index.html查看完整响应式效果掌握盒模型应用、Flexbox导航栏实现、媒体查询适配、Web字体引入及图片优化技巧并通过多版本CSS.min.css与源码并存对比学习代码压缩与工程规范为后续动态页面开发夯实基础。1. 这不是“抄网站”而是前端新手的第一块拼图用 HTML CSS 复刻小米官网首页到底在练什么你是不是也这样看到一个喜欢的网页心里想“这排版真舒服”“这个按钮动效好酷”但一打开开发者工具满屏div和.class就懵了——这堆字母和点号到底怎么变成眼前这个页面的别急复刻小米官网首页静态版恰恰是零基础跨进前端世界最自然、最不吓人的第一步。它不是让你去造火箭而是像搭乐高HTML 是一块块带编号的积木标题、图片、按钮、导航栏CSS 是给这些积木上色、调大小、摆位置的说明书。你不需要懂后台、不用写逻辑、不碰数据库只专注“怎么把内容放对地方、看起来顺眼”。适合完全没写过代码的人也适合学过一点但总卡在“写了却看不到效果”的同学。它解决的是那个最原始的困惑“网页到底是怎么从空白变成我眼前这个样子的”——而这份资源就是一份已经搭好的、可运行、可拆解、可修改的“小米首页乐高模型”。2. 先搞懂两个核心角色HTML 负责“有啥”CSS 负责“长啥样”2.1 HTML页面的骨架清单不是代码是结构说明书HTMLHyperText Markup Language根本不是编程语言它更像一份“页面成分表”。比如小米首页顶部那条黑色导航栏它不是一张图而是由几段文字“小米商城”“MIUI”“IoT”“云服务”……和几个图标组成的。HTML 就负责老老实实写下这里有一个导航区域nav里面有一组链接a每个链接前面有个图标i或img最右边还有一组用户操作入口登录、购物车。你看它不关心颜色、间距、鼠标悬停变啥样——它只回答“这里有什么”。就像装修前的户型图标出客厅、厨房、卧室在哪但不管贴什么瓷砖、挂什么画。项目里所有.html文件就是这份“小米首页户型图”的完整手稿。你打开它用浏览器直接双击就能看效果你改其中一行文字比如把“小米商城”改成“我的商城”刷新页面就立刻变——这就是 HTML 的即时反馈也是新手建立信心最直接的方式。2.2 CSS页面的化妆师空间规划师让骨架活起来如果 HTML 是骨架CSSCascading Style Sheets就是给骨架穿衣服、打灯光、安排站位的全过程。它管三件事长啥样文字用什么字体、多大字号、什么颜色color: #ff6700;占多大地方盒子宽多少、高多少、边框粗细width: 120px; border: 1px solid #eee;放哪导航栏固定在顶部position: fixed; top: 0;轮播图居中显示margin: 0 auto;商品卡片横向排列display: flex;。项目里的.css文件就是这份“化妆与布景指南”。它和 HTML 是分开的但通过link relstylesheet hrefstyle.css这行代码悄悄连在一起。你改一个background-color整个导航栏背景就变了调一个margin-top下面的内容就往下挪了一截——这种“改一行看一眼”的确定性正是前端入门最友好的学习节奏。它不玄学全是可见、可测、可逆的操作。2.3 为什么选“小米首页”而不是“做个计算器”或“todo list”这是很多新手没想通的关键点。计算器要学变量、函数、事件监听todo list 要学数据增删、本地存储、状态管理——它们太“重”了还没看清页面长啥样就被逻辑绕晕了。而小米首页是典型的“展示型页面”内容静态、结构清晰、模块分明头部、轮播、产品区、底部。它天然适合分块练习先搞定顶部导航练 HTML 结构 CSS 定位再做轮播图容器练图片布局 基础动画keyframes接着处理商品卡片网格练flexbox或grid布局最后统一配色和响应式练media断点。每一块都能独立运行、单独调试失败了也不影响其他部分。就像学游泳先扶着池边划水而不是直接扔进深水区扑腾。2.4 你真正需要的只是三个文件一个骨架、一套妆容、一次点击这份资源没有隐藏门槛。它不依赖服务器、不调用 API、不连数据库。你电脑上只要装了任意一款现代浏览器Chrome、Edge、Firefox 都行再有一个能写文本的编辑器系统自带的记事本、Mac 的 TextEdit或者更顺手的 VS Code就够了。整个项目就三个核心文件index.html主页面包含所有文字、图片路径、结构标签style.css全部样式规则控制颜色、大小、位置images/文件夹存放所有用到的图片已按需裁剪好尺寸无需自己找图。没有node_modules没有package.json没有构建命令。你双击index.html它就跑你用编辑器打开style.css改完保存切回浏览器按CtrlRWindows或CmdRMac变化立刻呈现。这种“所见即所得”的闭环是其他技术栈很难给新手的温柔起点。3. 第一步下载、解压、双击——5 分钟跑通你的第一个“小米首页”3.1 下载与准备找到资源确认结构你拿到的压缩包解压后会看到一个文件夹名字类似xiaomi-static-homepage。打开它你会看到xiaomi-static-homepage/ ├── index.html ← 主页面文件重点 ├── style.css ← 样式文件重点 ├── images/ ← 图片文件夹含 logo.png, banner1.jpg 等 └── README.md ← 简单说明可选读提示不要用手机下载后传到电脑容易损坏文件编码建议用电脑浏览器直接下载解压时右键选择“解压到当前文件夹”。3.2 第一次运行双击别犹豫找到index.html直接双击它。浏览器会自动打开并显示一个熟悉的页面——没错就是小米官网首页的静态模样。此时你还没写任何代码只是“运行”了别人搭好的结构。这是关键一步它证明环境没问题文件没损坏路径都对得上。如果打开是白屏或报错比如显示“找不到图片”先别慌看下一节排查。3.3 修改第一行字亲手验证“所见即所得”现在用你的文本编辑器推荐 VS Code免费且对 HTML/CSS 友好打开index.html。拉到中间偏上的位置找到类似这样的代码h1 classlogo-text小米商城/h1把小米商城四个字改成我的第一个页面然后保存文件CtrlS / CmdS。切回浏览器按CtrlR刷新。看到了吗顶部那个大大的 Logo 文字已经变成你写的字了。这行代码的意思是“这里有一个一级标题h1它属于logo-text这个类别class里面的内容是‘我的第一个页面’。” 浏览器照单全收CSS 文件里h1.logo-text对应的样式比如字体、颜色会自动套用上去。你改的是内容样式依然生效——这就是 HTML 和 CSS 分工的直观体现。3.4 改一个颜色从“看懂”到“动手调”接着打开同目录下的style.css文件。搜索header或nav找到导航栏相关的样式块大概长这样header { background-color: #000; height: 60px; }把#000纯黑改成#ff6700小米橙保存。回到浏览器刷新。你会发现顶部那条黑杠瞬间变成了醒目的橙色。注意#ff6700是十六进制颜色码你可以把它理解成“颜色身份证”。#000是黑#fff是白#ff6700是小米品牌橙。你不需要背所有颜色码但要知道改这里就改了那里。这种“定位→修改→验证”的三步闭环就是前端调试的基本功。4. 新手必踩的 5 个坑不是你笨是没人告诉你这些细节4.1 现象双击index.html打开是白屏或地址栏显示file:///...但啥也没有原因文件路径错误尤其是图片路径。index.html里写的img srcimages/logo.png但实际images文件夹被你移到了别处或名字拼错了比如写成image/少了个s。浏览器找不到图可能整个页面渲染中断。解决右键页面 → “检查”或按F12→ 切到 “Console”控制台标签页。如果有红字报错比如Failed to load resource: net::ERR_FILE_NOT_FOUND后面跟着images/logo.png那就说明路径错了。回到文件夹确认images文件夹和index.html在同一级且名字完全一致区分大小写。4.2 现象改了style.css里的颜色刷新后页面没变还是旧颜色原因浏览器缓存了旧的 CSS 文件。它以为“这个文件没变过”就直接用内存里存着的老版本根本不重新下载。解决强制刷新。Windows 按CtrlF5Mac 按CmdShiftR。或者在开发者工具F12的 “Network”网络标签页里勾选 “Disable cache”禁用缓存再刷新。这是前端开发的“后悔药”几乎每天都要用。4.3 现象导航栏文字挤成一团或者图片错位、重叠原因CSS 里用了float或position: absolute但没配好clear或z-index导致元素脱离正常文档流“飘”到奇怪位置。新手常盲目复制网上的代码但没理解上下文。解决先删掉可疑的float或position相关行让页面回归默认流式布局从上到下、从左到右。再一点点加回来每次加一行刷新看效果。记住宁可先让它丑也要让它稳。布局问题90% 出在盒模型box-sizing、外边距margin和内边距padding的组合上。4.4 现象在手机上看页面被缩得很小要手动放大才能看清原因缺少移动端视口viewport声明。HTML 文件head里必须有这一行meta nameviewport contentwidthdevice-width, initial-scale1.0它告诉手机浏览器“别按桌面宽度渲染按设备真实宽度来初始缩放为 1”。没有它手机就当你是给电脑看的页面强行缩小显示。解决打开index.html找到head标签在里面加上上面这行代码通常放在title下面。立刻生效。4.5 现象改完代码保存了刷新了但页面还是老样子甚至倒退了原因编辑器自动保存失败或你改的是另一个同名文件比如桌面上也有个index.html你误改了它。更隐蔽的是你用 VS Code 打开了整个文件夹但实际编辑的是index.html的副本或者文件编码格式不对比如用了 GBK 而不是 UTF-8导致中文乱码、标签解析失败。解决改完后看编辑器标题栏确认文件名后有*表示已修改未保存保存后看文件修改时间是否更新右键文件 → 属性在编辑器里底部状态栏确认编码是UTF-8不是GBK或ISO-8859-1最保险关闭所有编辑器重新双击index.html打开再用编辑器打开它确保是同一个文件。5. 从“能跑”到“能改”拆解小米首页的 4 个核心模块动手练一遍5.1 模块一顶部导航栏练结构 定位这是页面最显眼的部分也是新手最容易上手的切入点。打开index.html找到header区域它通常包含左侧 Logoa classlogoimg中间导航链接nav 多个a右侧用户入口登录、购物车图标。动手任务把中间导航的第三个链接“IoT”改成“智能生活”给“购物车”图标加一个红色小圆点提示有商品在对应i标签后加span classcart-badge3/span在style.css里添加.cart-badge { position: absolute; top: -5px; right: -5px; background: #ff6700; color: white; font-size: 12px; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 18px; }解释position: absolute让小圆点脱离文字流top/right定位到图标右上角border-radius: 50%把方块变圆line-height让数字垂直居中。改完保存刷新一个带数量的小红点就出现了。5.2 模块二轮播图区域练容器 基础动画小米首页的大图轮播本质是一个固定宽高的容器div classbanner里面放几张图img再用 CSS 控制它们轮流显示。项目里通常用keyframes实现自动切换。动手任务找到style.css里keyframes banner-move的定义把动画时长15s改成8s让切换快一点把animation-timing-function: ease-in-out改成linear让运动更匀速。解释animation-duration控制总时长animation-timing-function控制速度曲线。“ease-in-out”是慢-快-慢“linear”是全程匀速。改完后轮播会明显变快、变干脆。5.3 模块三商品卡片网格练 Flex 布局下方“手机”“电视”“笔记本”等区域是一排排整齐的卡片。现代写法基本用display: flex。在style.css里找.product-list或.grid类。动手任务找到.product-list { display: flex; }这行在它下面加.product-list { flex-wrap: wrap; gap: 20px; } .product-card { flex: 0 0 calc(25% - 15px); }解释flex-wrap: wrap允许换行gap: 20px统一设置卡片间距flex: 0 0 calc(25% - 15px)表示“每个卡片占 1/4 宽度再减去间距的一半”这样 4 张刚好铺满一行。改完后卡片会自动适应窗口宽度缩小时变成两列、一列这就是响应式的雏形。5.4 模块四页脚练语义化 简单布局页脚通常包含版权信息、友情链接、备案号。HTML 里常用footer标签这是语义化标签——它不改变样式但告诉浏览器和搜索引擎“这里是页面底部”。动手任务在index.html的/body上面找到footer把里面的© 2023 小米公司 版权所有改成© 2024 我的前端学习笔记在style.css里给footer加一行footer { background: #f5f5f5; padding: 20px 0; }解释footer是 HTML5 新增的语义标签比用div classfooter更规范。padding: 20px 0表示上下内边距 20px左右为 0让文字离边框有呼吸感。改完后页脚背景变浅灰文字更舒展。6. 下一步学什么一条不绕弯的前端入门路径从“看得见”走向“做得出”你现在能打开、能修改、能调试一个完整的静态页面这已经超越了 70% 的纯理论新手。但别停在这儿——接下来三个月我建议你按这个顺序把每一步都亲手走实不跳、不赶、不抄6.1 第 1 周吃透“盒模型”和“选择器优先级”告别“为啥这行没生效”你肯定遇到过明明写了color: red;文字就是不红。根源往往不在语法而在 CSS 的“层叠”和“继承”。拿出一张纸画四个同心矩形content内容→padding内边距→border边框→margin外边距。这就是盒模型。然后用不同选择器改同一个元素p { color: blue; }.text { color: green; }#main p { color: orange; }p.text { color: purple; }观察哪个生效。你会发现ID 选择器#main权重最高类选择器.text次之标签选择器p最低。这不是玄学是规则。从那以后我每次写 CSS都会先问自己“这个选择器够不够力”如果不行就加个类而不是疯狂加!important——那是新手的止痛药不是解药。6.2 第 2–3 周用 Flexbox 布局重构一个“个人作品集页面”别再练轮播图了。找三张你喜欢的图片旅行、宠物、手绘用 HTML 写一个简单页面顶部你的名字 一句介绍中部三张图要求在桌面端横排在手机端竖排底部联系方式邮箱、微信二维码。目标只用display: flex和flex-wrap: wrap实现不用float不用position。过程中你会反复调整flex-direction、justify-content、align-items。失败十次没关系第十一次成功时你会突然懂什么叫“布局自由”。6.3 第 4 周接入一个真实 API让静态页面“活”起来这时候该引入 JavaScript 了。但别学for循环先练“获取数据并显示”。注册一个免费的 JSONPlaceholder模拟 API 服务用浏览器控制台执行fetch(https://jsonplaceholder.typicode.com/posts/1) .then(res res.json()) .then(data console.log(data.title));然后把data.title插入到你页面的一个h2 idapi-title/h2里。从那以后我每次学新东西都强制自己“当天就接一个真实接口”哪怕只是显示一句‘Hello World’。因为静态页面是骨架动态数据才是血肉。这一步把你从“页面搬运工”变成“信息连接者”。6.4 第 5–6 周用 GitHub Pages 部署你的第一个公开页面别再双击index.html了。注册 GitHub 账号新建一个仓库把你的作品集代码传上去。在 Settings → Pages 里选main分支/ (root)保存。几秒钟后你会得到一个网址比如https://yourname.github.io/my-portfolio/。发给朋友发到朋友圈看他们点开——那种“全世界都能看到我做的东西”的感觉比任何证书都真实。从那以后我每次完成一个小项目都强制走一遍 GitHub Pages 部署流程。不为别的就为记住代码的价值始于被看见。希望帮到你。本文还有配套的精品资源点击获取 
长河君 · 2026/10/18 13:09:27 · 阅读 1.2k HTML+CSS复刻小米首页：前端新手入门实战指南
简介本资源是一份面向前端初学者的「小米官网首页」静态页面实战项目聚焦HTML与CSS核心基础技能训练适用于高校课程实践、自学入门及求职作品集搭建。压缩包共38个文件包含2个HTML主页面、8个CSS样式文件含重置、基础、首页等分层结构、8张JPG Banner图与4张PNG图标、3种字体格式WOFF2/EOT/WOFF及SVG矢量图标整体2.64MB资源组织清晰便于逐模块理解布局逻辑与样式分层。已有670人学习下载体现了其在新手练手场景中的高实用性。学习者可直接运行index.html查看完整响应式效果掌握盒模型应用、Flexbox导航栏实现、媒体查询适配、Web字体引入及图片优化技巧并通过多版本CSS.min.css与源码并存对比学习代码压缩与工程规范为后续动态页面开发夯实基础。1. 这不是“抄网站”而是前端新手的第一块拼图用 HTML CSS 复刻小米官网首页到底在练什么你是不是也这样看到一个喜欢的网页心里想“这排版真舒服”“这个按钮动效好酷”但一打开开发者工具满屏div和.class就懵了——这堆字母和点号到底怎么变成眼前这个页面的别急复刻小米官网首页静态版恰恰是零基础跨进前端世界最自然、最不吓人的第一步。它不是让你去造火箭而是像搭乐高HTML 是一块块带编号的积木标题、图片、按钮、导航栏CSS 是给这些积木上色、调大小、摆位置的说明书。你不需要懂后台、不用写逻辑、不碰数据库只专注“怎么把内容放对地方、看起来顺眼”。适合完全没写过代码的人也适合学过一点但总卡在“写了却看不到效果”的同学。它解决的是那个最原始的困惑“网页到底是怎么从空白变成我眼前这个样子的”——而这份资源就是一份已经搭好的、可运行、可拆解、可修改的“小米首页乐高模型”。2. 先搞懂两个核心角色HTML 负责“有啥”CSS 负责“长啥样”2.1 HTML页面的骨架清单不是代码是结构说明书HTMLHyperText Markup Language根本不是编程语言它更像一份“页面成分表”。比如小米首页顶部那条黑色导航栏它不是一张图而是由几段文字“小米商城”“MIUI”“IoT”“云服务”……和几个图标组成的。HTML 就负责老老实实写下这里有一个导航区域nav里面有一组链接a每个链接前面有个图标i或img最右边还有一组用户操作入口登录、购物车。你看它不关心颜色、间距、鼠标悬停变啥样——它只回答“这里有什么”。就像装修前的户型图标出客厅、厨房、卧室在哪但不管贴什么瓷砖、挂什么画。项目里所有.html文件就是这份“小米首页户型图”的完整手稿。你打开它用浏览器直接双击就能看效果你改其中一行文字比如把“小米商城”改成“我的商城”刷新页面就立刻变——这就是 HTML 的即时反馈也是新手建立信心最直接的方式。2.2 CSS页面的化妆师空间规划师让骨架活起来如果 HTML 是骨架CSSCascading Style Sheets就是给骨架穿衣服、打灯光、安排站位的全过程。它管三件事长啥样文字用什么字体、多大字号、什么颜色color: #ff6700;占多大地方盒子宽多少、高多少、边框粗细width: 120px; border: 1px solid #eee;放哪导航栏固定在顶部position: fixed; top: 0;轮播图居中显示margin: 0 auto;商品卡片横向排列display: flex;。项目里的.css文件就是这份“化妆与布景指南”。它和 HTML 是分开的但通过link relstylesheet hrefstyle.css这行代码悄悄连在一起。你改一个background-color整个导航栏背景就变了调一个margin-top下面的内容就往下挪了一截——这种“改一行看一眼”的确定性正是前端入门最友好的学习节奏。它不玄学全是可见、可测、可逆的操作。2.3 为什么选“小米首页”而不是“做个计算器”或“todo list”这是很多新手没想通的关键点。计算器要学变量、函数、事件监听todo list 要学数据增删、本地存储、状态管理——它们太“重”了还没看清页面长啥样就被逻辑绕晕了。而小米首页是典型的“展示型页面”内容静态、结构清晰、模块分明头部、轮播、产品区、底部。它天然适合分块练习先搞定顶部导航练 HTML 结构 CSS 定位再做轮播图容器练图片布局 基础动画keyframes接着处理商品卡片网格练flexbox或grid布局最后统一配色和响应式练media断点。每一块都能独立运行、单独调试失败了也不影响其他部分。就像学游泳先扶着池边划水而不是直接扔进深水区扑腾。2.4 你真正需要的只是三个文件一个骨架、一套妆容、一次点击这份资源没有隐藏门槛。它不依赖服务器、不调用 API、不连数据库。你电脑上只要装了任意一款现代浏览器Chrome、Edge、Firefox 都行再有一个能写文本的编辑器系统自带的记事本、Mac 的 TextEdit或者更顺手的 VS Code就够了。整个项目就三个核心文件index.html主页面包含所有文字、图片路径、结构标签style.css全部样式规则控制颜色、大小、位置images/文件夹存放所有用到的图片已按需裁剪好尺寸无需自己找图。没有node_modules没有package.json没有构建命令。你双击index.html它就跑你用编辑器打开style.css改完保存切回浏览器按CtrlRWindows或CmdRMac变化立刻呈现。这种“所见即所得”的闭环是其他技术栈很难给新手的温柔起点。3. 第一步下载、解压、双击——5 分钟跑通你的第一个“小米首页”3.1 下载与准备找到资源确认结构你拿到的压缩包解压后会看到一个文件夹名字类似xiaomi-static-homepage。打开它你会看到xiaomi-static-homepage/ ├── index.html ← 主页面文件重点 ├── style.css ← 样式文件重点 ├── images/ ← 图片文件夹含 logo.png, banner1.jpg 等 └── README.md ← 简单说明可选读提示不要用手机下载后传到电脑容易损坏文件编码建议用电脑浏览器直接下载解压时右键选择“解压到当前文件夹”。3.2 第一次运行双击别犹豫找到index.html直接双击它。浏览器会自动打开并显示一个熟悉的页面——没错就是小米官网首页的静态模样。此时你还没写任何代码只是“运行”了别人搭好的结构。这是关键一步它证明环境没问题文件没损坏路径都对得上。如果打开是白屏或报错比如显示“找不到图片”先别慌看下一节排查。3.3 修改第一行字亲手验证“所见即所得”现在用你的文本编辑器推荐 VS Code免费且对 HTML/CSS 友好打开index.html。拉到中间偏上的位置找到类似这样的代码h1 classlogo-text小米商城/h1把小米商城四个字改成我的第一个页面然后保存文件CtrlS / CmdS。切回浏览器按CtrlR刷新。看到了吗顶部那个大大的 Logo 文字已经变成你写的字了。这行代码的意思是“这里有一个一级标题h1它属于logo-text这个类别class里面的内容是‘我的第一个页面’。” 浏览器照单全收CSS 文件里h1.logo-text对应的样式比如字体、颜色会自动套用上去。你改的是内容样式依然生效——这就是 HTML 和 CSS 分工的直观体现。3.4 改一个颜色从“看懂”到“动手调”接着打开同目录下的style.css文件。搜索header或nav找到导航栏相关的样式块大概长这样header { background-color: #000; height: 60px; }把#000纯黑改成#ff6700小米橙保存。回到浏览器刷新。你会发现顶部那条黑杠瞬间变成了醒目的橙色。注意#ff6700是十六进制颜色码你可以把它理解成“颜色身份证”。#000是黑#fff是白#ff6700是小米品牌橙。你不需要背所有颜色码但要知道改这里就改了那里。这种“定位→修改→验证”的三步闭环就是前端调试的基本功。4. 新手必踩的 5 个坑不是你笨是没人告诉你这些细节4.1 现象双击index.html打开是白屏或地址栏显示file:///...但啥也没有原因文件路径错误尤其是图片路径。index.html里写的img srcimages/logo.png但实际images文件夹被你移到了别处或名字拼错了比如写成image/少了个s。浏览器找不到图可能整个页面渲染中断。解决右键页面 → “检查”或按F12→ 切到 “Console”控制台标签页。如果有红字报错比如Failed to load resource: net::ERR_FILE_NOT_FOUND后面跟着images/logo.png那就说明路径错了。回到文件夹确认images文件夹和index.html在同一级且名字完全一致区分大小写。4.2 现象改了style.css里的颜色刷新后页面没变还是旧颜色原因浏览器缓存了旧的 CSS 文件。它以为“这个文件没变过”就直接用内存里存着的老版本根本不重新下载。解决强制刷新。Windows 按CtrlF5Mac 按CmdShiftR。或者在开发者工具F12的 “Network”网络标签页里勾选 “Disable cache”禁用缓存再刷新。这是前端开发的“后悔药”几乎每天都要用。4.3 现象导航栏文字挤成一团或者图片错位、重叠原因CSS 里用了float或position: absolute但没配好clear或z-index导致元素脱离正常文档流“飘”到奇怪位置。新手常盲目复制网上的代码但没理解上下文。解决先删掉可疑的float或position相关行让页面回归默认流式布局从上到下、从左到右。再一点点加回来每次加一行刷新看效果。记住宁可先让它丑也要让它稳。布局问题90% 出在盒模型box-sizing、外边距margin和内边距padding的组合上。4.4 现象在手机上看页面被缩得很小要手动放大才能看清原因缺少移动端视口viewport声明。HTML 文件head里必须有这一行meta nameviewport contentwidthdevice-width, initial-scale1.0它告诉手机浏览器“别按桌面宽度渲染按设备真实宽度来初始缩放为 1”。没有它手机就当你是给电脑看的页面强行缩小显示。解决打开index.html找到head标签在里面加上上面这行代码通常放在title下面。立刻生效。4.5 现象改完代码保存了刷新了但页面还是老样子甚至倒退了原因编辑器自动保存失败或你改的是另一个同名文件比如桌面上也有个index.html你误改了它。更隐蔽的是你用 VS Code 打开了整个文件夹但实际编辑的是index.html的副本或者文件编码格式不对比如用了 GBK 而不是 UTF-8导致中文乱码、标签解析失败。解决改完后看编辑器标题栏确认文件名后有*表示已修改未保存保存后看文件修改时间是否更新右键文件 → 属性在编辑器里底部状态栏确认编码是UTF-8不是GBK或ISO-8859-1最保险关闭所有编辑器重新双击index.html打开再用编辑器打开它确保是同一个文件。5. 从“能跑”到“能改”拆解小米首页的 4 个核心模块动手练一遍5.1 模块一顶部导航栏练结构 定位这是页面最显眼的部分也是新手最容易上手的切入点。打开index.html找到header区域它通常包含左侧 Logoa classlogoimg中间导航链接nav 多个a右侧用户入口登录、购物车图标。动手任务把中间导航的第三个链接“IoT”改成“智能生活”给“购物车”图标加一个红色小圆点提示有商品在对应i标签后加span classcart-badge3/span在style.css里添加.cart-badge { position: absolute; top: -5px; right: -5px; background: #ff6700; color: white; font-size: 12px; width: 18px; height: 18px; border-radius: 50%; text-align: center; line-height: 18px; }解释position: absolute让小圆点脱离文字流top/right定位到图标右上角border-radius: 50%把方块变圆line-height让数字垂直居中。改完保存刷新一个带数量的小红点就出现了。5.2 模块二轮播图区域练容器 基础动画小米首页的大图轮播本质是一个固定宽高的容器div classbanner里面放几张图img再用 CSS 控制它们轮流显示。项目里通常用keyframes实现自动切换。动手任务找到style.css里keyframes banner-move的定义把动画时长15s改成8s让切换快一点把animation-timing-function: ease-in-out改成linear让运动更匀速。解释animation-duration控制总时长animation-timing-function控制速度曲线。“ease-in-out”是慢-快-慢“linear”是全程匀速。改完后轮播会明显变快、变干脆。5.3 模块三商品卡片网格练 Flex 布局下方“手机”“电视”“笔记本”等区域是一排排整齐的卡片。现代写法基本用display: flex。在style.css里找.product-list或.grid类。动手任务找到.product-list { display: flex; }这行在它下面加.product-list { flex-wrap: wrap; gap: 20px; } .product-card { flex: 0 0 calc(25% - 15px); }解释flex-wrap: wrap允许换行gap: 20px统一设置卡片间距flex: 0 0 calc(25% - 15px)表示“每个卡片占 1/4 宽度再减去间距的一半”这样 4 张刚好铺满一行。改完后卡片会自动适应窗口宽度缩小时变成两列、一列这就是响应式的雏形。5.4 模块四页脚练语义化 简单布局页脚通常包含版权信息、友情链接、备案号。HTML 里常用footer标签这是语义化标签——它不改变样式但告诉浏览器和搜索引擎“这里是页面底部”。动手任务在index.html的/body上面找到footer把里面的© 2023 小米公司 版权所有改成© 2024 我的前端学习笔记在style.css里给footer加一行footer { background: #f5f5f5; padding: 20px 0; }解释footer是 HTML5 新增的语义标签比用div classfooter更规范。padding: 20px 0表示上下内边距 20px左右为 0让文字离边框有呼吸感。改完后页脚背景变浅灰文字更舒展。6. 下一步学什么一条不绕弯的前端入门路径从“看得见”走向“做得出”你现在能打开、能修改、能调试一个完整的静态页面这已经超越了 70% 的纯理论新手。但别停在这儿——接下来三个月我建议你按这个顺序把每一步都亲手走实不跳、不赶、不抄6.1 第 1 周吃透“盒模型”和“选择器优先级”告别“为啥这行没生效”你肯定遇到过明明写了color: red;文字就是不红。根源往往不在语法而在 CSS 的“层叠”和“继承”。拿出一张纸画四个同心矩形content内容→padding内边距→border边框→margin外边距。这就是盒模型。然后用不同选择器改同一个元素p { color: blue; }.text { color: green; }#main p { color: orange; }p.text { color: purple; }观察哪个生效。你会发现ID 选择器#main权重最高类选择器.text次之标签选择器p最低。这不是玄学是规则。从那以后我每次写 CSS都会先问自己“这个选择器够不够力”如果不行就加个类而不是疯狂加!important——那是新手的止痛药不是解药。6.2 第 2–3 周用 Flexbox 布局重构一个“个人作品集页面”别再练轮播图了。找三张你喜欢的图片旅行、宠物、手绘用 HTML 写一个简单页面顶部你的名字 一句介绍中部三张图要求在桌面端横排在手机端竖排底部联系方式邮箱、微信二维码。目标只用display: flex和flex-wrap: wrap实现不用float不用position。过程中你会反复调整flex-direction、justify-content、align-items。失败十次没关系第十一次成功时你会突然懂什么叫“布局自由”。6.3 第 4 周接入一个真实 API让静态页面“活”起来这时候该引入 JavaScript 了。但别学for循环先练“获取数据并显示”。注册一个免费的 JSONPlaceholder模拟 API 服务用浏览器控制台执行fetch(https://jsonplaceholder.typicode.com/posts/1) .then(res res.json()) .then(data console.log(data.title));然后把data.title插入到你页面的一个h2 idapi-title/h2里。从那以后我每次学新东西都强制自己“当天就接一个真实接口”哪怕只是显示一句‘Hello World’。因为静态页面是骨架动态数据才是血肉。这一步把你从“页面搬运工”变成“信息连接者”。6.4 第 5–6 周用 GitHub Pages 部署你的第一个公开页面别再双击index.html了。注册 GitHub 账号新建一个仓库把你的作品集代码传上去。在 Settings → Pages 里选main分支/ (root)保存。几秒钟后你会得到一个网址比如https://yourname.github.io/my-portfolio/。发给朋友发到朋友圈看他们点开——那种“全世界都能看到我做的东西”的感觉比任何证书都真实。从那以后我每次完成一个小项目都强制走一遍 GitHub Pages 部署流程。不为别的就为记住代码的价值始于被看见。希望帮到你。本文还有配套的精品资源点击获取