太好了，先把“导航栏（Navbar）”这块从博客里完整拆出来，做成一节45分钟就能看到成果的教学组件。下面给你“组件讲义版（轨道A）+ 教学实施版（轨道B）”，并附最小可运行代码与考核点。

组件名称：导航栏（Navbar）

A. 组件讲义大纲（可直接发给学生）

1）学习目标（SMART）

• 20 分钟内用 HTML5 语义化结构写出 <header><nav><ul><li><a> 的导航框架（可通过校验：链接可点击、结构嵌套正确）。
• 15 分钟内用 CSS3 Flexbox 让导航水平排列、居中/两端对齐，并添加悬停样式。
• 10 分钟内用少量 JS 为移动端“汉堡按钮”添加展开/收起交互（可通过：手机视口下点击可显隐菜单）。

对齐课程标准要点（摘录）：HTML5 语义化与表单/标签、CSS3 布局（含 Flexbox/盒模型）、JavaScript DOM 操作与事件、DevTools 调试与代码规范、安全意识（XSS 初识）等（对应“知识目标/能力目标/素养目标”的多处条目；考核构成为平时40%+成果40%+出勤20%）。

2）运行效果（学生能看到什么）

• PC 端：博客标题左/中对齐，右侧一排导航链接（首页/文章/关于/联系）。
• 移动端：显示“☰”汉堡按钮，点击后下拉显示链接；再次点击收起。

3）最小代码示例（可直接新建三文件）

index.html

<!doctype html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>MVB 博客 · 导航栏演示</title>
  <link rel="stylesheet" href="nav.css" />
</head>
<body>
  <header class="site-header">
    <a class="logo" href="index.html">MyBlog</a>
    <button class="nav-toggle" aria-expanded="false" aria-controls="site-nav" aria-label="切换导航">☰</button>
    <nav id="site-nav" class="nav" aria-label="主导航">
      <ul>
        <li><a href="index.html">首页</a></li>
        <li><a href="post.html">文章</a></li>
        <li><a href="about.html">关于</a></li>
        <li><a href="contact.html">联系</a></li>
      </ul>
    </nav>
  </header>

  <main class="container">
    <h1>欢迎来到最小可用博客</h1>
    <p>这是导航栏组件的演示页。</p>
  </main>

  <script src="nav.js"></script>
</body>
</html>

nav.css

* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", Arial, "Noto Sans SC"; }

.site-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 16px; background: #222; color: #fff; position: sticky; top: 0;
}

.logo { color: #fff; text-decoration: none; font-weight: 700; }

.nav-toggle { display: none; font-size: 20px; background: none; border: 0; color: #fff; }

.nav ul { list-style: none; display: flex; gap: 16px; margin: 0; padding: 0; }
.nav a { color: #fff; text-decoration: none; padding: 8px 10px; border-radius: 6px; }
.nav a:hover, .nav a:focus { background: rgba(255,255,255,.12); outline: none; }

/* 移动端折叠 */
@media (max-width: 768px) {
  .nav-toggle { display: inline-block; }
  .nav { position: absolute; left: 0; right: 0; top: 56px; background: #222; display: none; }
  .nav.open { display: block; }
  .nav ul { flex-direction: column; padding: 8px; }
  .nav a { display: block; }
}

.container { padding: 24px; }

nav.js

const btn = document.querySelector('.nav-toggle');
const nav = document.getElementById('site-nav');

btn.addEventListener('click', () => {
  const isOpen = nav.classList.toggle('open');
  btn.setAttribute('aria-expanded', String(isOpen));
});

// 无障碍增强：Esc 关闭
document.addEventListener('keydown', (e) => {
  if (e.key === 'Escape') {
    nav.classList.remove('open');
    btn.setAttribute('aria-expanded', 'false');
  }
});

4）知识点映射

• HTML：<header> / <nav> / <ul> / <li> / <a> 语义化结构（语义更清、利于无障碍与SEO）。