Checkpoint: 静态网页

你将完成什么

用 HTML + CSS 写一个个人主页，包含：头部导航、个人介绍、技能列表、项目展示、联系方式。

验收标准

1. 语义化标签（<header>、<main>、<section>、<footer>）
2. Flexbox 布局
3. 响应式（移动端、桌面端）
4. 无 CSS 框架，纯手写

参考结构

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>张三 - 前端工程师</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <header>
        <nav>
            <h1>张三</h1>
            <ul>
                <li><a href="#about">关于我</a></li>
                <li><a href="#skills">技能</a></li>
                <li><a href="#projects">项目</a></li>
                <li><a href="#contact">联系</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section id="about">
            <h2>关于我</h2>
            <p>前端工程师，3 年经验，专注 React 和 TypeScript。</p>
        </section>

        <section id="skills">
            <h2>技能</h2>
            <ul>
                <li>HTML / CSS / JavaScript</li>
                <li>React / Vue</li>
                <li>Node.js / Express</li>
            </ul>
        </section>

        <section id="projects">
            <h2>项目</h2>
            <article>
                <h3>在线学习平台</h3>
                <p>用 React + Node.js 开发的课程学习平台。</p>
            </article>
        </section>

        <section id="contact">
            <h2>联系我</h2>
            <p>邮箱: zhangsan@example.com</p>
        </section>
    </main>

    <footer>
        <p>&copy; 2025 张三</p>
    </footer>
</body>
</html>

常见卡点

1. 导航栏不水平排列：用 display: flex + justify-content: space-between。
2. 移动端样式错乱：加 <meta name="viewport">，用媒体查询 @media (max-width: 768px)。
3. 锚点跳转不生效：确认 href="#about" 和 id="about" 对应。

加分项

• 平滑滚动（scroll-behavior: smooth）
• 悬停效果（transition）
• CSS 变量统一主题色

下一步

完成本课后，进入「JavaScript 交互」阶段，给页面加动态效果。