【GLM-5 陪练式前端新手入门】第三篇：网页导航栏 —— 搭建个人主页的 “指路牌”

菜鸟小芯2026-02-23 9:37

【GLM-5 陪练式前端新手入门】第三篇：网页导航栏 ------ 搭建个人主页的 "指路牌"

目录

[【GLM-5 陪练式前端新手入门】第三篇：网页导航栏 ------ 搭建个人主页的 "指路牌"](#【GLM-5 陪练式前端新手入门】第三篇：网页导航栏 —— 搭建个人主页的 “指路牌”)

[1 项目背景：给个人主页加上 "指路牌"](#1 项目背景：给个人主页加上 “指路牌”)

[2 AI 赋能：向 GLM-5 提出导航栏制作需求](#2 AI 赋能：向 GLM-5 提出导航栏制作需求)

[3 快速落地：跟着 AI 搭建网页导航栏](#3 快速落地：跟着 AI 搭建网页导航栏)

[3.1 核心实现思路：3 步搞定导航栏](#3.1 核心实现思路：3 步搞定导航栏)

[3.2 代码实践：编写有设计感的导航栏](#3.2 代码实践：编写有设计感的导航栏)

[3.3 本地运行：3 步查看导航栏效果](#3.3 本地运行：3 步查看导航栏效果)

[3.4 动手练习：修改导航栏，巩固知识点](#3.4 动手练习：修改导航栏，巩固知识点)

[4 实践感悟：导航栏是网页的 "骨架延伸"](#4 实践感悟：导航栏是网页的 “骨架延伸”)

[5 小补充：关于 "点击无跳转" 的说明](#5 小补充：关于 “点击无跳转” 的说明)

🎯 主题 1：初体验拾光 ------ AI 陪练式前端新手入门

本文聚焦 GLM-5 引导零基础新手从 CSS 样式进阶到网页导航栏制作的实战过程。

活动仓库链接：https://atomgit.com/GitCode/0daymodel

1 项目背景：给个人主页加上 "指路牌"

在完成了 HTML 骨架和 CSS 样式美化后，我的个人主页已经有了 "颜值"，但还缺少一个核心功能 ------导航栏。没有导航栏，用户就不知道类似 "首页"、"关于我"、"作品" 这些功能在哪里，整个页面就像一个没有路牌的迷宫。

作为零基础的新手，对导航栏的实现思路一无所知，既担心结构复杂，又怕样式不好看。于是可以试着再次求助 GLM-5，希望延续 "一步一知识点、一步一练习" 的陪练模式，学会制作一个有设计感的网页导航栏。

2 AI 赋能：向 GLM-5 提出导航栏制作需求

延续之前的学习节奏，我向 GLM-5 提出了精准的导航栏学习需求：

"我已经学会了 HTML 和 CSS 基础，现在要学习第三步：制作网页导航栏。请你用通俗易懂的语言讲解导航栏的核心实现思路，提供可直接运行的 HTML+CSS 代码，布置一个小练习（比如修改导航栏的颜色或菜单项），并解释关键代码的含义。"

GLM-5 不仅拆解了导航栏的 "3 步核心思路"，还设计了一个深色质感的导航栏示例，兼顾了教学性和视觉效果，让我能直观感受到导航栏的作用。

复制代码 
用户已经学会了 HTML 和 CSS 基础，现在要学习如何制作网页导航栏。我需要：

1. 用通俗易懂的语言讲解导航栏的核心实现思路
2. 提供可直接运行的 HTML+CSS 代码
3. 布置一个小练习
4. 解释关键代码的含义

让我设计一个有设计感的导航栏，同时保持教学性质，代码要清晰易懂。

核心实现思路：
1. HTML 结构：用 `<nav>` 包裹，里面用 `<ul>` + `<li>` + `<a>` 组织菜单项
2. CSS 样式：
   - 去除列表默认样式（圆点、缩进）
   - 让列表项横向排列（float 或 flexbox，推荐 flexbox）
   - 设置导航栏背景、链接样式
   - 添加悬停效果

我要做一个有设计感的导航栏，但不要太复杂，适合初学者理解。

配色方面，我会避免那种淡紫色模板风格，用一个有质感的配色方案。

让我设计一个深色主题的导航栏，带有：
- 深色背景
- 金色/琥珀色作为强调色
- 悬停动画效果
- 响应式设计（简单介绍）

代码要清晰，注释要详细，方便初学者# 网页导航栏制作教程

欢迎来到第三步学习！导航栏是网站的"路牌"，告诉用户可以去哪里。让我用最通俗的方式带你掌握它。

---

## 一、核心实现思路（3步走）

```
┌─────────────────────────────────────────────────────────┐
│  第1步：搭建结构                                         │
│  ─────────────                                          │
│  用 <nav> 包裹 → <ul> 列表 → <li> 列表项 → <a> 链接      │
│                                                         │
│  第2步：横向排列                                         │
│  ─────────────                                          │
│  默认是竖着的列表，用 Flexbox 让它们横着站成一排          │
│                                                         │
│  第3步：美化交互                                         │
│  ─────────────                                          │
│  加背景色、间距、悬停效果，让导航"活"起来                 │
└─────────────────────────────────────────────────────────┘
```

---

## 二、完整代码（可直接运行）

```html
<!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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&display=swap" rel="stylesheet">
    
    <style>
        /* ========== 重置样式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
        }

        /* ========== 导航栏主体 ========== */
        .navbar {
            /* 背景与阴影 */
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);  /* 毛玻璃效果 */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            
            /* 布局 */
            display: flex;           /* 核心：启用弹性布局 */
            justify-content: space-between;  /* 两端对齐 */
            align-items: center;     /* 垂直居中 */
            padding: 0 60px;
            height: 70px;
        }

        /* ========== Logo 部分 ========== */
        .navbar .logo {
            font-size: 24px;
            font-weight: 600;
            color: #f0a500;          /* 金色 */
            text-decoration: none;
            letter-spacing: 2px;
        }

        /* ========== 菜单列表 ========== */
        .navbar .menu {
            display: flex;           /* 核心：让 li 横向排列 */
            list-style: none;        /* 去掉列表圆点 */
            gap: 10px;               /* 菜单项之间的间距 */
        }

        /* ========== 单个菜单项 ========== */
        .navbar .menu li a {
            /* 文字样式 */
            color: #e8e8e8;
            text-decoration: none;   /* 去掉下划线 */
            font-size: 15px;
            padding: 10px 20px;      /* 内边距：扩大点击区域 */
            
            /* 过渡动画 */
            transition: color 0.3s, background 0.3s;
            
            /* 圆角 */
            border-radius: 6px;
        }

        /* ========== 悬停效果 ========== */
        .navbar .menu li a:hover {
            color: #f0a500;                    /* 文字变金色 */
            background: rgba(240, 165, 0, 0.1); /* 背景微亮 */
        }

        /* ========== 当前页面高亮 ========== */
        .navbar .menu li a.active {
            color: #f0a500;
            background: rgba(240, 165, 0, 0.15);
        }

        /* ========== 示例页面内容 ========== */
        .page-content {
            padding: 100px 60px;
            color: #e8e8e8;
        }
        
        .page-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ffffff;
        }
        
        .page-content p {
            font-size: 18px;
            opacity: 0.7;
            max-width: 600px;
            line-height: 1.8;
        }
        
        .hint-box {
            margin-top: 40px;
            padding: 20px 30px;
            background: rgba(240, 165, 0, 0.1);
            border-left: 4px solid #f0a500;
            border-radius: 0 8px 8px 0;
        }
        
        .hint-box h3 {
            color: #f0a500;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <!-- 导航栏开始 -->
    <nav class="navbar">
        <!-- Logo -->
        <a href="#" class="logo">BRAND</a>
        
        <!-- 菜单列表 -->
        <ul class="menu">
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <!-- 导航栏结束 -->

    <!-- 页面内容（用于演示） -->
    <div class="page-content">
        <h1>导航栏教程</h1>
        <p>恭喜你学会了导航栏的制作！这是网页开发中最常用的组件之一。试着把鼠标移到上面的菜单项上，看看悬停效果。</p>
        
        <div class="hint-box">
            <h3>小练习</h3>
            <p>尝试修改代码完成以下任务：</p>
            <ol style="margin-top: 10px; margin-left: 20px; line-height: 2;">
                <li>把 Logo 文字改成你喜欢的名字</li>
                <li>把金色 #f0a500 改成青色 #00d4aa</li>
                <li>在菜单中添加一个新项"下载"</li>
            </ol>
        </div>
    </div>

</body>
</html>
```

---

## 三、关键代码详解

### 1️⃣ HTML 结构为什么这样写？

```html
<nav class="navbar">
    <a class="logo">...</a>
    <ul class="menu">
        <li><a>首页</a></li>
        <li><a>产品</a></li>
    </ul>
</nav>
```

| 标签 | 作用 | 为什么用它？ |
|------|------|--------------|
| `<nav>` | 导航栏容器 | 语义化标签，告诉搜索引擎"这是导航" |
| `<ul>` | 无序列表 | 菜单本质就是个列表，符合语义化 |
| `<li>` | 列表项 | 每个菜单项 |
| `<a>` | 链接 | 可点击跳转，必须有 href 属性 |

---

### 2️⃣ CSS 核心技巧：Flexbox

```css
.navbar {
    display: flex;              /* 开启弹性布局 */
    justify-content: space-between;  /* 子元素两端对齐 */
    align-items: center;        /* 子元素垂直居中 */
}

.menu {
    display: flex;              /* 让菜单项横向排列 */
    list-style: none;           /* 去掉圆点 */
    gap: 10px;                  /* 项与项之间的间距 */
}
```

**通俗理解：**
- `display: flex` 就像把元素变成一个"弹性盒子"
- `justify-content` 控制水平方向怎么排
- `align-items` 控制垂直方向怎么对齐
- `gap` 就是元素之间的"缝隙"

---

### 3️⃣ 悬停效果怎么实现？

```css
.menu li a {
    color: #e8e8e8;              /* 默认颜色：浅灰 */
    transition: color 0.3s;      /* 颜色变化用0.3秒过渡 */
}

.menu li a:hover {
    color: #f0a500;              /* 悬停时变成金色 */
}
```

**`:hover` 是伪类**，表示"当鼠标悬停在元素上时"。配合 `transition` 可以让变化有动画效果，而不是瞬间切换。

---

## 四、结构可视化

```
┌──────────────────────────────────────────────────────────┐
│  NAVBAR (flex容器)                                        │
│  ┌─────────────┐  ┌───────────────────────────────────┐  │
│  │    LOGO     │  │  MENU (flex容器)                   │  │
│  │    BRAND    │  │  ┌────┐ ┌────┐ ┌────┐ ┌────┐     │  │
│  │             │  │  │首页│ │产品│ │关于│ │博客│ ... │  │
│  │             │  │  └────┘ └────┘ └────┘ └────┘     │  │
│  └─────────────┘  └───────────────────────────────────┘  │
│                                                           │
│  ← justify-content: space-between 让它们两端对齐 →        │
└──────────────────────────────────────────────────────────┘
```

---

## 五、小练习答案提示

想验证你的修改是否正确？看看这些提示：

<details>
<summary>点击查看练习提示</summary>

1. **修改 Logo**：找到 `<a class="logo">BRAND</a>`，把 BRAND 改成任意文字

2. **修改颜色**：搜索所有 `#f0a500`，替换成 `#00d4aa`（青色）

3. **添加菜单项**：在 `<ul class="menu">` 里复制一个 `<li><a>...</a></li>`，修改文字

</details>

---

有任何不理解的地方随时问我！下一步可以学习**响应式导航栏**（手机端显示汉堡菜单），想继续吗？

3 快速落地：跟着 AI 搭建网页导航栏

在 GLM-5 的引导下，我顺利完成了导航栏的制作，从核心思路到代码实现，全程清晰易懂。

3.1 核心实现思路：3 步搞定导航栏

GLM-5 用一个通俗的 "3 步走" 框架，帮我瞬间理解了导航栏的本质：

  1. 搭建结构 ：用 <nav> 包裹，里面用 <ul> + <li> + <a> 组织菜单项（本质是 "列表 + 链接"）；
  2. 横向排列：默认列表是竖着的，用 CSS Flexbox 让菜单项 "横着站成一排"；
  3. 美化交互：添加背景色、间距、悬停效果，让导航栏 "活" 起来。

3.2 代码实践：编写有设计感的导航栏

GLM-5 提供了一段完整的可运行代码，我在 VS Code 中新建 nav-practice.html 文件，粘贴了以下内容：

复制代码 
<!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 href="https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;600&display=swap" rel="stylesheet">
    
    <style>
        /* ========== 重置样式 ========== */
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Noto Sans SC', sans-serif;
            background: linear-gradient(135deg, #1a1a2e 0%, #16213e 100%);
            min-height: 100vh;
        }

        /* ========== 导航栏主体 ========== */
        .navbar {
            /* 背景与阴影 */
            background: rgba(255, 255, 255, 0.05);
            backdrop-filter: blur(10px);  /* 毛玻璃效果 */
            border-bottom: 1px solid rgba(255, 255, 255, 0.1);
            
            /* 布局 */
            display: flex;           /* 核心：启用弹性布局 */
            justify-content: space-between;  /* 两端对齐 */
            align-items: center;     /* 垂直居中 */
            padding: 0 60px;
            height: 70px;
        }

        /* ========== Logo 部分 ========== */
        .navbar .logo {
            font-size: 24px;
            font-weight: 600;
            color: #f0a500;          /* 金色 */
            text-decoration: none;
            letter-spacing: 2px;
        }

        /* ========== 菜单列表 ========== */
        .navbar .menu {
            display: flex;           /* 核心：让 li 横向排列 */
            list-style: none;        /* 去掉列表圆点 */
            gap: 10px;               /* 菜单项之间的间距 */
        }

        /* ========== 单个菜单项 ========== */
        .navbar .menu li a {
            /* 文字样式 */
            color: #e8e8e8;
            text-decoration: none;   /* 去掉下划线 */
            font-size: 15px;
            padding: 10px 20px;      /* 内边距：扩大点击区域 */
            
            /* 过渡动画 */
            transition: color 0.3s, background 0.3s;
            
            /* 圆角 */
            border-radius: 6px;
        }

        /* ========== 悬停效果 ========== */
        .navbar .menu li a:hover {
            color: #f0a500;                    /* 文字变金色 */
            background: rgba(240, 165, 0, 0.1); /* 背景微亮 */
        }

        /* ========== 当前页面高亮 ========== */
        .navbar .menu li a.active {
            color: #f0a500;
            background: rgba(240, 165, 0, 0.15);
        }

        /* ========== 示例页面内容 ========== */
        .page-content {
            padding: 100px 60px;
            color: #e8e8e8;
        }
        
        .page-content h1 {
            font-size: 48px;
            margin-bottom: 20px;
            color: #ffffff;
        }
        
        .page-content p {
            font-size: 18px;
            opacity: 0.7;
            max-width: 600px;
            line-height: 1.8;
        }
        
        .hint-box {
            margin-top: 40px;
            padding: 20px 30px;
            background: rgba(240, 165, 0, 0.1);
            border-left: 4px solid #f0a500;
            border-radius: 0 8px 8px 0;
        }
        
        .hint-box h3 {
            color: #f0a500;
            margin-bottom: 10px;
        }
    </style>
</head>
<body>

    <!-- 导航栏开始 -->
    <nav class="navbar">
        <!-- Logo -->
        <a href="#" class="logo">BRAND</a>
        
        <!-- 菜单列表 -->
        <ul class="menu">
            <li><a href="#" class="active">首页</a></li>
            <li><a href="#">产品</a></li>
            <li><a href="#">关于我们</a></li>
            <li><a href="#">博客</a></li>
            <li><a href="#">联系</a></li>
        </ul>
    </nav>
    <!-- 导航栏结束 -->

    <!-- 页面内容（用于演示） -->
    <div class="page-content">
        <h1>导航栏教程</h1>
        <p>恭喜你学会了导航栏的制作！这是网页开发中最常用的组件之一。试着把鼠标移到上面的菜单项上，看看悬停效果。</p>
        
        <div class="hint-box">
            <h3>小练习</h3>
            <p>尝试修改代码完成以下任务：</p>
            <ol style="margin-top: 10px; margin-left: 20px; line-height: 2;">
                <li>把 Logo 文字改成你喜欢的名字</li>
                <li>把金色 #f0a500 改成青色 #00d4aa</li>
                <li>在菜单中添加一个新项"下载"</li>
            </ol>
        </div>
    </div>

</body>
</html>

💡 小提示：当前代码中所有 <a> 标签的 href="#" 只是占位符 ，所以点击菜单项不会跳转到新页面。后续学习了页面跳转或多页面开发后，可以把 # 替换成真实的链接（如 href="home.html"、href="about.html"），就能实现点击跳转了。

3.3 本地运行：3 步查看导航栏效果

  1. 保存 nav-practice.html 文件（确保后缀为 .html）；
  2. 双击文件，用浏览器打开；
  3. 看到深色背景的导航栏，鼠标悬停在菜单项上，会有金色高亮效果，瞬间有了 "专业网站" 的感觉。

3.4 动手练习：修改导航栏，巩固知识点

按照 GLM-5 的指导，我完成了 3 个小练习：

  1. 把 Logo 文字 "BRAND" 改成了我的名字（昵称）；
  2. 把金色强调色 #f0a500 改成了青色 #00d4aa，整体风格更清新；
  3. 在菜单中添加了 "下载" 菜单项，导航栏的功能更完整了。

每一次修改后刷新浏览器，都能直观看到变化，这种 "试错 - 观察 - 理解" 的方式，让我对导航栏的代码逻辑理解得更透彻。

4 实践感悟：导航栏是网页的 "骨架延伸"

这次导航栏学习让我对前端开发有了新的认知：

  • 导航栏本质是 "语义化列表"：用 <nav>、<ul>、<li>、<a> 这些标签，不仅是为了好看，更是为了让搜索引擎和屏幕阅读器理解 "这是导航"；
  • Flexbox 是布局神器：之前觉得 "让元素横向排列" 很难，现在用 display: flex 就能轻松实现，彻底打破了我对 "布局复杂" 的恐惧；
  • 交互细节决定体验：一个简单的 :hover 悬停效果，就能让导航栏从 "静态" 变成 "动态"，用户体验瞬间提升。

虽然现在的导航栏还只是 "演示版"，点击菜单项不会跳转，但我已经掌握了核心实现思路，后续只要补充跳转逻辑，就能做出一个完整可用的导航栏了。

5 小补充：关于 "点击无跳转" 的说明

完成上述操作后，你可能会发现，当前导航栏的选项点击后没有内容跳转，这是因为代码中 <a> 标签的 href 属性都是 #（占位符），它的作用是：

  • 保留链接的可点击样式（下划线、颜色变化）；
  • 避免页面跳转，方便初学者专注于导航栏的样式和布局学习。

如果想实现点击跳转，只需要把 href="#" 替换成真实的页面链接即可，比如：

复制代码 
<li><a href="home.html" class="active">首页</a></li>
<li><a href="about.html">关于我们</a></li>

这样点击菜单项，就能跳转到对应的页面了。

参与链接：

GLM-5 在线体验：https://ai.atomgit.com/zai-org/GLM-5/model-inference

GLM-5 活动贴：https://ai.atomgit.com/zai-org/GLM-5/discussions

相关推荐
明月_清风2 小时前
PWA 到底是什么？它在 2026 年解决了哪些真实痛点？
前端·pwa
甲枫叶2 小时前
【claude产品经理系列13】核心功能实现——需求的增删改查全流程
java·前端·人工智能·python·产品经理·ai编程
蓝帆傲亦2 小时前
Vue.js 大数据处理全景解析：从加载策略到渲染优化的完全手册
前端·vue.js·flutter
不会敲代码12 小时前
React组件通信实战：从Todo应用彻底搞懂父子、子父、兄弟通信
前端·react.js
SuperEugene2 小时前
字符串处理实战：模板字符串、split/join、正则的 80% 用法
前端·javascript·面试
wuhen_n2 小时前
前端构建工具：从Rollup到Vite
前端
钟智强2 小时前
深度剖析CVE-2023-41064与CVE-2023-4863：libwebp堆溢出漏洞的技术解剖与PoC构建实录
前端·后端
钟智强2 小时前
MySQL客户端惊现高危漏洞CVE-2023-21980，可导致远程代码执行
前端·后端
Cache技术分享2 小时前
332. Java Stream API - Java Stream 实战进阶：按年份找出合作最多的作者对
前端·后端
热门推荐
01GitHub 镜像站点02AI Agent 平台横评：ZeroClaw vs OpenClaw vs Nanobot03Claude Code + GLM4.7 避坑指南：解决 Unable to connect to Anthropic services04HTML 早已不是标签了，它现在是系统级接口：这 9 个 API 直接干翻常用 JS 库05如何解决 OpenClaw “Pairing required” 报错：两种官方解决方案详解06全面体验 Grok API 中转站（2025 · Grok 4 系列最新版）07【OpenClaw 本地实战 Ep.3】突破瓶颈：强制修改 openclaw.json 解锁 32k 上下文记忆08MIUI显示/隐藏5G开关的方法，信号弱时开启手机Wifi通话方法09openClaw安装飞书插件｜核心踩坑：spawn EINVAL 错误终极解决指南10网站改了域名，如何查找？