【GLM-5 陪练式前端新手入门】第三篇网页导航栏 —— 搭建个人主页的 “指路牌”目录【GLM-5 陪练式前端新手入门】第三篇网页导航栏 —— 搭建个人主页的 “指路牌”1 项目背景给个人主页加上 “指路牌”2 AI 赋能向 GLM-5 提出导航栏制作需求3 快速落地跟着 AI 搭建网页导航栏3.1 核心实现思路3 步搞定导航栏3.2 代码实践编写有设计感的导航栏3.3 本地运行3 步查看导航栏效果3.4 动手练习修改导航栏巩固知识点4 实践感悟导航栏是网页的 “骨架延伸”5 小补充关于 “点击无跳转” 的说明 主题 1初体验拾光 —— AI 陪练式前端新手入门本文聚焦 GLM-5 引导零基础新手从 CSS 样式进阶到网页导航栏制作的实战过程。活动仓库链接https://atomgit.com/GitCode/0daymodel1 项目背景给个人主页加上 “指路牌”在完成了 HTML 骨架和 CSS 样式美化后我的个人主页已经有了 “颜值”但还缺少一个核心功能 ——导航栏。没有导航栏用户就不知道类似 “首页”、“关于我”、“作品” 这些功能在哪里整个页面就像一个没有路牌的迷宫。作为零基础的新手对导航栏的实现思路一无所知既担心结构复杂又怕样式不好看。于是可以试着再次求助 GLM-5希望延续 “一步一知识点、一步一练习” 的陪练模式学会制作一个有设计感的网页导航栏。2 AI 赋能向 GLM-5 提出导航栏制作需求延续之前的学习节奏我向 GLM-5 提出了精准的导航栏学习需求“我已经学会了 HTML 和 CSS 基础现在要学习第三步制作网页导航栏。请你用通俗易懂的语言讲解导航栏的核心实现思路提供可直接运行的 HTMLCSS 代码布置一个小练习比如修改导航栏的颜色或菜单项并解释关键代码的含义。”GLM-5 不仅拆解了导航栏的 “3 步核心思路”还设计了一个深色质感的导航栏示例兼顾了教学性和视觉效果让我能直观感受到导航栏的作用。用户已经学会了 HTML 和 CSS 基础现在要学习如何制作网页导航栏。我需要 1. 用通俗易懂的语言讲解导航栏的核心实现思路 2. 提供可直接运行的 HTMLCSS 代码 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 langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title导航栏教程/title !-- 引入字体 -- link hrefhttps://fonts.googleapis.com/css2?familyNotoSansSC:wght400;600displayswap relstylesheet 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 classnavbar !-- Logo -- a href# classlogoBRAND/a !-- 菜单列表 -- ul classmenu lia href# classactive首页/a/li lia href#产品/a/li lia href#关于我们/a/li lia href#博客/a/li lia href#联系/a/li /ul /nav !-- 导航栏结束 -- !-- 页面内容用于演示 -- div classpage-content h1导航栏教程/h1 p恭喜你学会了导航栏的制作这是网页开发中最常用的组件之一。试着把鼠标移到上面的菜单项上看看悬停效果。/p div classhint-box h3小练习/h3 p尝试修改代码完成以下任务/p ol stylemargin-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 classnavbar a classlogo.../a ul classmenu lia首页/a/li lia产品/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 classlogoBRAND/a把 BRAND 改成任意文字 2. **修改颜色**搜索所有 #f0a500替换成 #00d4aa青色 3. **添加菜单项**在 ul classmenu 里复制一个 lia.../a/li修改文字 /details --- 有任何不理解的地方随时问我下一步可以学习**响应式导航栏**手机端显示汉堡菜单想继续吗3 快速落地跟着 AI 搭建网页导航栏在 GLM-5 的引导下我顺利完成了导航栏的制作从核心思路到代码实现全程清晰易懂。3.1 核心实现思路3 步搞定导航栏GLM-5 用一个通俗的 “3 步走” 框架帮我瞬间理解了导航栏的本质搭建结构用nav包裹里面用ullia组织菜单项本质是 “列表 链接”横向排列默认列表是竖着的用 CSS Flexbox 让菜单项 “横着站成一排”美化交互添加背景色、间距、悬停效果让导航栏 “活” 起来。3.2 代码实践编写有设计感的导航栏GLM-5 提供了一段完整的可运行代码我在 VS Code 中新建nav-practice.html文件粘贴了以下内容!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title导航栏教程/title !-- 引入字体 -- link hrefhttps://fonts.googleapis.com/css2?familyNotoSansSC:wght400;600displayswap relstylesheet 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 classnavbar !-- Logo -- a href# classlogoBRAND/a !-- 菜单列表 -- ul classmenu lia href# classactive首页/a/li lia href#产品/a/li lia href#关于我们/a/li lia href#博客/a/li lia href#联系/a/li /ul /nav !-- 导航栏结束 -- !-- 页面内容用于演示 -- div classpage-content h1导航栏教程/h1 p恭喜你学会了导航栏的制作这是网页开发中最常用的组件之一。试着把鼠标移到上面的菜单项上看看悬停效果。/p div classhint-box h3小练习/h3 p尝试修改代码完成以下任务/p ol stylemargin-top: 10px; margin-left: 20px; line-height: 2; li把 Logo 文字改成你喜欢的名字/li li把金色 #f0a500 改成青色 #00d4aa/li li在菜单中添加一个新项下载/li /ol /div /div /body /html 小提示当前代码中所有a标签的href#只是占位符所以点击菜单项不会跳转到新页面。后续学习了页面跳转或多页面开发后可以把#替换成真实的链接如hrefhome.html、hrefabout.html就能实现点击跳转了。3.3 本地运行3 步查看导航栏效果保存nav-practice.html文件确保后缀为.html双击文件用浏览器打开看到深色背景的导航栏鼠标悬停在菜单项上会有金色高亮效果瞬间有了 “专业网站” 的感觉。3.4 动手练习修改导航栏巩固知识点按照 GLM-5 的指导我完成了 3 个小练习把 Logo 文字 “BRAND” 改成了我的名字昵称把金色强调色#f0a500改成了青色#00d4aa整体风格更清新在菜单中添加了 “下载” 菜单项导航栏的功能更完整了。每一次修改后刷新浏览器都能直观看到变化这种 “试错 - 观察 - 理解” 的方式让我对导航栏的代码逻辑理解得更透彻。4 实践感悟导航栏是网页的 “骨架延伸”这次导航栏学习让我对前端开发有了新的认知导航栏本质是 “语义化列表”用nav、ul、li、a这些标签不仅是为了好看更是为了让搜索引擎和屏幕阅读器理解 “这是导航”Flexbox 是布局神器之前觉得 “让元素横向排列” 很难现在用display: flex就能轻松实现彻底打破了我对 “布局复杂” 的恐惧交互细节决定体验一个简单的:hover悬停效果就能让导航栏从 “静态” 变成 “动态”用户体验瞬间提升。虽然现在的导航栏还只是 “演示版”点击菜单项不会跳转但我已经掌握了核心实现思路后续只要补充跳转逻辑就能做出一个完整可用的导航栏了。5 小补充关于 “点击无跳转” 的说明完成上述操作后你可能会发现当前导航栏的选项点击后没有内容跳转这是因为代码中a标签的href属性都是#占位符它的作用是保留链接的可点击样式下划线、颜色变化避免页面跳转方便初学者专注于导航栏的样式和布局学习。如果想实现点击跳转只需要把href#替换成真实的页面链接即可比如lia hrefhome.html classactive首页/a/li lia hrefabout.html关于我们/a/li这样点击菜单项就能跳转到对应的页面了。参与链接GLM-5 在线体验https://ai.atomgit.com/zai-org/GLM-5/model-inferenceGLM-5 活动贴https://ai.atomgit.com/zai-org/GLM-5/discussions