简单落地页

学习目标

• 用 CSS Flexbox 实现导航栏和卡片布局
• 用 CSS 变量管理配色和间距，保持风格统一
• 用媒体查询实现基本的响应式适配
• 理解盒模型对布局的影响

前置要求

• 了解 HTML 基本标签
• 了解 CSS 选择器和常用属性
• 已完成“个人主页”项目或具备同等基础

步骤

2. 1

   编写 HTML 结构

   创建 index.html，搭建页面骨架：导航栏（nav）、英雄区（header）、特性区（section 含三个 article 卡片）、页脚（footer）。用语义化标签而非 div 一把梭。

   代码复制

   <nav>
     <span class="logo">MyApp</span>
     <a href="#features">特性</a>
   </nav>
   
   <header>
     <h1>让生活更简单</h1>
     <p>一款帮你管理日常任务的小工具</p>
     <button>免费开始</button>
   </header>
   
   <section id="features">
     <article><h3>快速</h3><p>秒级响应</p></article>
     <article><h3>简洁</h3><p>界面清爽</p></article>
     <article><h3>免费</h3><p>永久免费</p></article>
   </section>
   
   <footer>© 2026 MyApp</footer>

   预期结果

   页面显示导航、英雄区、三张卡片和页脚，但没有样式。

   显示提示
4. 2

   用 CSS 变量定义设计令牌

   在 style.css 的 :root 中定义颜色和间距变量。用 CSS 变量统一管理设计令牌，后续修改配色只需改一处。

   代码复制

   :root {
     --color-primary: #2563eb;
     --color-text: #1e293b;
     --color-bg: #f8fafc;
     --space-4: 1rem;
     --space-8: 2rem;
   }
   
   body {
     margin: 0;
     font-family: system-ui, sans-serif;
     color: var(--color-text);
     background: var(--color-bg);
   }

   预期结果

   页面有了基础字体和背景色，文字颜色变为深灰。

   显示提示
6. 3

   用 Flexbox 布局导航和卡片

   导航栏用 display: flex 横向排列，space-between 让 logo 和链接分居两端。特性区卡片也用 flex，gap 控制间距。

   代码复制

   nav {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: var(--space-4) var(--space-8);
   }
   
   #features {
     display: flex;
     gap: var(--space-4);
     padding: var(--space-8);
   }
   
   #features article {
     flex: 1;
     background: white;
     padding: var(--space-4);
     border-radius: 8px;
   }

   预期结果

   导航栏两端对齐，三张卡片横向并排显示。

   显示提示
8. 4

   添加响应式适配

   用媒体查询在小屏幕（< 768px）时让卡片改为纵向排列，导航栏也可以简化。测试时拖动浏览器窗口宽度看效果。

   代码复制

   @media (max-width: 768px) {
     #features {
       flex-direction: column;
     }
   
     header {
       padding: var(--space-8) var(--space-4);
     }
   }

   预期结果

   窗口宽度小于 768px 时，卡片变为纵向堆叠。

   显示提示

相关资源