正在加载...

CSS 小项目 — 风格化落地页

CSS 总结已经把工具箱画成地图。这一课要把它用起来。你会亲手拼出一页小型风格化落地页：身份栏、带明确行动号召的英雄区、几张特性卡片，以及安静的页脚。没有新奇属性——只是把已经练过的技能拼在一起（层叠、盒模型、Flex、Grid、响应式、焦点）。

直接回答

1) 先草拟区块：header + nav、英雄区 + CTA、特性区、页脚。
2) 用语义 HTML（header、nav、main、section、footer）标出它们，放进有 max-width 的容器。
3) 把共用颜色、间距和圆角放进 :root 自定义属性。
4) 顶栏和英雄区一行用 Flex；特性卡片用 Grid。
5) 加一个 media query 断点，并在链接与 CTA 上保留 :focus-visible。
6) 「完成」意味着窄视口上可读、Tab 仍能看见焦点——不是每种 CSS 技巧都露脸一次。

这页落地页的搭建顺序

📊 Landing sections and CSS jobs

Section HTML job CSS job
Header + nav 站点名 + 页内链接 Flex 行、间距、安静背景
Hero 标题、简短卖点、主 CTA Flex 或堆叠；强对比；清晰按钮
Features 三张短卡片 等宽轨道 + gap 的 Grid
Footer 联系或法律一行 安静内边距；可读的柔和文字
Shared tokens — :root 颜色、间距、圆角处处复用
Responsive check HTML 里已有 viewport meta 一个把英雄区/卡片叠起来的断点

先接好结构，再装饰。一锅 div 上的漂亮渐变，比平静 CSS 配上朴素语义骨架更难修。

第 1 步 — 语义骨架

从地标开始。类名细化外观；元素为读者和辅助技术命名区域。

Landing landmarks shell

html 
<body>
<header class="site-header">
<div class="container header-inner">
<a class="logo" href="#">BrightDesk</a>
<nav class="site-nav" aria-label="Primary">
<a href="#features">Features</a>
<a href="#contact">Contact</a>
</nav>
</div>
</header>

<main>
<section class="hero">
<div class="container hero-inner">
<div class="hero-copy">
<h1>Ship a calm landing with CSS you already know</h1>
<p class="lede">Flex the bar, Grid the cards, keep focus visible.</p>
<a class="btn" href="#features">See features</a>
</div>
</div>
</section>

<section id="features" class="features">
<div class="container">
<h2>What you practice</h2>
<div class="feature-grid">
<article class="card"><h3>Tokens</h3><p>Shared color and space.</p></article>
<article class="card"><h3>Layout</h3><p>Flex and Grid on purpose.</p></article>
<article class="card"><h3>Polish</h3><p>Breakpoint and focus.</p></article>
</div>
</div>
</section>
</main>

<footer id="contact" class="site-footer">
<div class="container">
<p>Practice page — style by hand before frameworks.</p>
</div>
</footer>
</body>

演示文案保持英文且简短。你自己的项目可用任意产品名——结构比品牌故事更重要。

第 2 步 — 在 :root 上放设计令牌

把重复值抽到自定义属性里，这样改页面时调色板和间距仍一致。

Shared tokens for the landing

css 
:root {
--bg: #0b1220;
--surface: #111827;
--text: #f8fafc;
--muted: #cbd5e1;
--accent: #38bdf8;
--accent-ink: #0c4a6e;
--radius: 0.75rem;
--space: 1rem;
--max: 960px;
--focus: #fbbf24;
}

*,
*::before,
*::after {
box-sizing: border-box;
}

body {
margin: 0;
font-family: system-ui, sans-serif;
line-height: 1.5;
background: var(--bg);
color: var(--text);
}

.container {
width: 100%;
max-width: var(--max);
margin: 0 auto;
padding: 0 var(--space);
}

令牌不是装饰——它们挡住复制粘贴漂移。改一次 --accent，CTA、链接和焦点提示就能对齐。

第 3 步 — 用 Flex 做页眉与导航

一维行是 Flex 的活儿：一边 logo，一边链接，间距一致。

Flex header bar

css 
.site-header {
background: var(--surface);
border-bottom: 1px solid #1f2937;
}

.header-inner {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: var(--space);
padding: 0.75rem 0;
}

.logo {
color: var(--text);
font-weight: 700;
text-decoration: none;
}

.site-nav {
display: flex;
flex-wrap: wrap;
gap: 1rem;
}

.site-nav a {
color: var(--muted);
text-decoration: none;
}

.site-nav a:hover {
color: var(--accent);
}

在 media query 叠起大区块之前，flex-wrap 让顶栏在窄屏上仍诚实换行。

第 4 步 — 英雄区

给卖点留空间，保持强对比，让 CTA 看起来就是主操作。

Hero copy and primary CTA

css 
.hero {
padding: 3rem 0 2.5rem;
background:
radial-gradient(circle at top right, #1e3a5f 0%, transparent 45%),
var(--bg);
}

.hero-inner {
display: flex;
flex-direction: column;
gap: 1.25rem;
max-width: 40rem;
}

.hero h1 {
margin: 0;
font-size: clamp(1.75rem, 4vw, 2.5rem);
line-height: 1.15;
}

.lede {
margin: 0;
color: var(--muted);
font-size: 1.05rem;
}

.btn {
display: inline-block;
width: fit-content;
padding: 0.75rem 1.25rem;
border-radius: var(--radius);
background: var(--accent);
color: var(--accent-ink);
font-weight: 700;
text-decoration: none;
}

.btn:hover {
filter: brightness(1.05);
}

标题上的 clamp 是前几课的小现代手法——有用，非必须。CTA 必须可读：accent 背景配更深的字色，而不是淡对淡。

第 5 步 — 用 Grid 做特性卡片

两轴（等大卡片的行与列）属于 Grid。卡片内边距和边框保持克制。

Feature cards with Grid

css 
.features {
padding: 2rem 0 3rem;
}

.features h2 {
margin: 0 0 1rem;
}

.feature-grid {
display: grid;
grid-template-columns: 1fr;
gap: var(--space);
}

.card {
padding: 1.25rem;
border-radius: var(--radius);
background: var(--surface);
border: 1px solid #1f2937;
}

.card h3 {
margin: 0 0 0.5rem;
font-size: 1.1rem;
}

.card p {
margin: 0;
color: var(--muted);
}

.site-footer {
padding: 1.5rem 0 2rem;
border-top: 1px solid #1f2937;
color: var(--muted);
font-size: 0.95rem;
}

移动端一列即可。在断点处加宽网格——别为三张卡片再发明第三套布局系统。

第 6 步 — 断点与可见焦点

一个诚实的断点加上焦点环，就收完这页练习页。键盘用户仍须看见自己在哪。

Widen cards and keep focus visible

css 
@media (min-width: 640px) {
.feature-grid {
grid-template-columns: repeat(3, 1fr);
}

.hero {
padding-top: 4rem;
}
}

a:focus-visible,
.btn:focus-visible {
outline: 3px solid var(--focus);
outline-offset: 3px;
}

无障碍样式你已深入学过。这里只是落实习惯：别交付丢掉焦点提示的漂亮 CTA。

自己动手

  1. 创建 index.html + styles.css，粘贴地标骨架并链接样式表。
  2. 加入 :root 令牌与 body/container 规则；确认页面居中且可读。
  3. 用 Flex 样式化页眉，用 Grid 样式化特性卡（一列，自 640px 起三列）。
  4. 样式化 CTA；用 Tab 走过 logo、导航和按钮——焦点必须可见。
  5. 缩到手机宽度：无横向滚动、卡片堆叠、触控目标可用。
  6. 可选加分：若给 .btn 加了 hover transition，一并加上 prefers-reduced-motion。

常见错误

  • 还不会手写样式这页小页面就先打开组件库
  • 每个区块都用 position: absolute 涂，而不是 Flex/Grid 流
  • 跳过容器的 max-width，大屏上行从边拉到边
  • 「为了设计」去掉 CTA 与导航链接上的焦点轮廓
  • 三张卡片却做五个断点，而不是一步清晰加宽
  • 把实验当成属性清单——每个技巧抄一遍——而不是交出连贯的一页
  • 忘掉前几课：总结画了技能地图；无障碍要求可见焦点——两者在这里仍然有效

小结

  • 这个小项目把课程技能合成一页风格化落地页
  • 先结构（地标），再令牌、Flex 顶栏、Grid 卡片、断点、焦点
  • 一维外壳用 Flex；特性矩阵用 Grid
  • 「完成」= 移动端可读且键盘安全——不是框架脚手架
  • 下一步（可选进阶）：若想深入层叠边角，看 CSS !important（important）；否则继续手写更多小页面

🧠 测试您的知识

准备开始

测试您的知识

通过这个互动测验挑战自己，看看你对这个主题的理解程度如何

❓
7
问题
🎯
70%
及格要求
♾️
∞
时间
🔄
∞
尝试次数

📝 说明

  • 仔细阅读每个问题
  • 为每个问题选择最佳答案
  • 您可以随时重新参加测验
  • 您的进度将显示在顶部
主题 70 的 72
Css 教程