从设计稿到完整网页用 Flexbox 构建 Landing Page 实战项目Odin Project Foundations【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum本篇文章是 Odin ProjectThe Odin Project基础阶段FoundationsHTML/CSS 课程中的实战项目指南对应仓库文档 project_landing_page.md。项目核心任务不借助任何框架仅凭一张完整网站设计稿与一组字体、颜色规格用 HTML 与 CSS Flexbox 从零搭建一个完整的产品落地页Landing Page。读完本文你将掌握如何将设计稿拆解为可实现的页面区块、如何为每个区块选择合适的 Flexbox 布局属性主轴/交叉轴对齐、伸缩、间距、如何建立 Git 仓库并配合提交规范推进项目以及最终如何通过 GitHub Pages 把成品发布到公网。项目概览一次从零到一的完整实践这是你在掌握 Flexbox 基础知识之后迎来的第一个完整页面项目。与之前零散的练习不同这里没有脚手架、没有模板代码只有一张设计图和一组设计规格你需要独立完成从空白 HTML 文档到成品网页的全部工作。在动手之前请确认你已经掌握以下前置知识它们都来自同一课程系列flexbox_intro.md理解 flex 容器display: flex的元素与 flex 项目容器内直接子元素的关系以及容器与项目嵌套构建复杂布局的思路flexbox_axes.md理解主轴main axis与交叉轴cross axis以及flex-direction: row默认与column对布局方向的影响flexbox_growing_and_shrinking.md掌握flex简写属性背后的flex-grow、flex-shrink、flex-basis三个值flexbox_alignment.md掌握justify-content主轴对齐、align-items交叉轴对齐与gap项目间距。如果你在这些概念上还有模糊之处建议先回看对应课程再开始本项目——这个项目正是把这些知识串联成完整布局的最佳练习场。设计稿解析你要还原的页面长什么样设计稿位于仓库的 project_landing_page/imgs/01.png是一个 1440×1912 的完整页面效果图。阅读设计稿后可以发现整页从上到下由 6 个清晰区块构成导航栏Header深色背景左侧为 Header Logo 文字右侧为 header link one / two / three 三个链接Hero 区深色背景左右两栏——左侧是大标题 This website is awesome、副标题文字与 Sign up 按钮右侧是一个 this is a placeholder for an image 的灰色占位矩形信息卡片区白色背景居中标题 Some random information.下方并排四个带蓝色边框的矩形卡片每个卡片下方配一行副标题文字引言区Quote浅灰色背景一段斜体引文与右对齐的署名 -Thor, God of Thunder行动号召区CTA白色背景中一个蓝色圆角矩形块左侧是标题与说明文字右侧是带白色描边的 Sign up 按钮页脚Footer深色背景居中的版权文字 Copyright © The Odin Project 2021。官方设计规格设计稿之外项目文档给出了明确的字体、颜色与字号规格。这些数值可以直接照搬也可以自由发挥替换成你自己的配色元素属性值全局字体FontRoboto需自行下载安装或换用自己选择的字体深色背景header / hero / footerbackground-color#1F2937Logo 文字font-size / color24px/#F9FAF8Hero 主文字This website is awesomefont-size / color / weight48px/#F9FAF8/900Hero 副文字与 header 链接font-size / color18px/#E5E7EB按钮与 CTA 背景色background-color#3882F6信息区标题Some random information.font-size / color / weight36px/#1F2937/900引言区background-color / font-size / color / weight / style#E5E7EB/36px/#1F2937/300/italic关于像素级还原文档特别强调不要拿尺子去量每个区块之间精确的边距也不要纠结 24px 与 48px 的差异。这个项目的目标是把各元素放到大致正确的位置上而非逐像素复刻设计稿。动手前的准备搭建 Git 仓库与提交节奏在写任何代码之前先建立项目仓库。这与你此前完成的 Recipes 项目 完全一致——Git 与 GitHub 将成为你未来求职时展示作品的作品集务必把所有项目都纳入版本管理在 GitHub.com 上新建一个仓库例如命名为landing-page保持公开将仓库克隆到本地使用 SSH 方式例如git clone gitgithub.com:username/landing-page.gitcd进入项目目录编写README.md简要描述项目内容与完成本项目的技能点。提交规范记得参考课程中的 commit_messages.md 一课。规范的提交消息包含两部分——主题行subjectGitHub 建议控制在 72 字符以内与正文body正文说明这个提交解决了什么问题、如何解决。例如Add missing link and alt text to the companys logo Screen readers wont read the images to users with disabilities without this information.项目文档反复强调commit early often尽早提交、频繁提交每当代码产生一个有意义的阶段性变化完成某个区块、修复一个 bug、补一个 alt 文本就提交一次。这会在你的 GitHub 主页上形成一条清晰的开发时间线向未来的雇主展示你的工作过程。分区块构建化整为零的实施策略面对一张空白 HTML 文档最让人不知所措的就是不知道从哪开始。项目文档给出了明确的建议一次只处理一个区块。把整页拆成 6 个独立任务逐个攻破导航栏 HeaderHero 区信息卡片区引言区 Quote行动号召区 CTA页脚 Footer从页面顶部开始逐个向下推进是稳妥的选择——每个区块完成到相当不错的状态后再进入下一个而不是同时铺开所有区块。先 HTML 后 CSS 的工作流每个区块内部遵循同样的次序先把内容全部放进 HTML再开始写 CSS。你很可能在写样式时回头补 HTML但从一开始就频繁地 HTML/CSS 来回切换只会更耗时、更令人沮丧。项目文档还明确了两点约束本项目不需要使用多个样式表一个 CSS 文件足够本项目不需要做响应式设计不必考虑不同屏幕尺寸、缩放级别或移动设备——当前阶段只需在常规电脑屏幕上看起来良好即可响应式布局会在后续课程中学习。各区块的 Flexbox 技术要点设计稿中的多数区块结构正好对应 flexbox 课程中练习过的典型模式导航栏父容器display: flex配合justify-content: space-between主轴两端对齐让 Logo 靠左、链接组靠右链接组本身又是一个display: flex的容器用gap拉开三个链接的间距Hero 区外层 flex 容器row 方向把左右两栏并排放置左侧文字栏是flex-direction: column的嵌套 flex 容器把标题、副标题、按钮纵向排列并用align-items: flex-start让按钮靠左信息卡片区标题居中后用justify-content: center排列四个卡片用gap控制卡片间距每张卡片含图框与说明文字本身是flex-direction: column的容器并居中内容CTA 区块蓝色圆角容器内部justify-content: space-betweenalign-items: center左侧文字、右侧按钮页脚最典型的 flex 居中——justify-content: centeralign-items: center即可。这里再次印证了 flexbox 的核心机制容器负责项目在主轴/交叉轴上的排列与对齐flex简写控制项目自身的伸缩行为。需要撑满并等宽的项用flex: 1需要保持固有尺寸、不收缩的项用flex-shrink: 0需要项目间留白时优先用gap而非给每个项目加 margin。关于 CSS 圆角设计稿中的卡片图框和 CTA 矩形块带有圆角而圆角属性border-radius可能还没有出现在你已学过的课程中。这是项目有意为之的——它希望你去搜索引擎查一下例如搜索css rounded corners体验真实开发中随时 Google 查资料的常态。在真实工作中专业开发者也会为多年熟用的技术频繁查文档不要求全部记忆。内容替换与图片版权须知设计稿中的文字是占位用的哑内容完全可以替换成你自己的内容虚构一个品牌、写你自己的业务文案、把占位图换成真实图片、微调配色与字体。这让最终成品能真正放进你的作品集。但使用网络图片时必须注意版权你没有权利随意使用网络上找到的任何图片务必确认图片确实允许你免费使用并在项目中标注图片来源最便捷的致谢方式是把创作者姓名与联系方式写进仓库的README.md常见的免费可商用图片来源有 Pexels、Pixabay、Unsplash 等图库网站。部署上线用 GitHub Pages 发布你的作品项目完成后把代码git push origin main推到 GitHub然后通过 GitHub Pages 将其发布为可公开访问的网页方便你与他人分享。完整步骤与 Recipes 项目中的说明一致见 project_recipes.md 的 Viewing your project on the web 一节确保主 HTML 文件名为index.html且位于仓库根目录顶层目录打开 GitHub 仓库页面点击顶部Settings设置标签如仓库中的截图所示在左侧边栏点击Pages将Branch从none改为main branch若你使用其他分支则选对应分支点击Save等待部署完成GitHub 官方说明最长约 10 分钟实际可能更久。不要给项目添加 theme否则可能引发 Git 冲突耐心等待即可部署成功后你的网站可通过your-github-username.github.io/your-github-repo-name访问请替换为你自己的用户名与仓库名若超过 1 小时仍未发布检查根目录是否存在index.html、设置是否正确也可进入仓库的Actions页查看部署记录必要时把 Branch 切回none再切回main branch重新触发。注意免费 GitHub 账户只能从公开仓库发布 Pages 项目私有仓库发布需要付费账户。完成后的自检清单在把项目标记为完成之前对照设计稿快速自查六个区块Header、Hero、信息卡、引言、CTA、Footer是否齐全顺序是否正确每个区块的相对位置是否与设计稿一致不必逐像素深色背景区块Header / Hero / Footer与浅色区块是否正确区分信息卡片的数量与排列方式是否符合预期按钮样式背景色、圆角、hover 效果是否可用是否替换了占位内容、图片是否标注了来源Git 提交历史是否体现了清晰的开发过程代码是否已 push 到 GitHub 并成功部署本项目是你从会写代码片段迈向能独立交付完整页面的关键一步它综合运用了 HTML 语义结构、Flexbox 容器与项目模型、主轴/交叉轴对齐以及 Git 工作流与 GitHub Pages 部署链路为后续学习响应式设计与更复杂的真实项目打下基础。【免费下载链接】curriculumThe open curriculum for learning web development项目地址: https://gitcode.com/GitHub_Trending/cu/curriculum创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考