介绍
页面把图标导航栏做成完整的组件展示台。首屏上方是横向标签栏，下方是移动端风格 Dock，点击后会联动切换高亮滑块、图标状态和右侧说明文本，适合管理台、工具站和内容站的导航模块。
技术栈
页面由 index.html、styles.css 和 script.js 组成，直接双击即可运行，不依赖 npm、框架或外部 CDN。
软件架构
- index.html：负责首屏主体、交互按钮和内容说明区。
- styles.css：负责布局、视觉变量、动画节奏、响应式和 reduced-motion 降级。
- script.js：负责状态切换、按钮联动和动画参数更新。
- preview.png：当前页面的真实浏览器截图，可直接作为下载页封面。
安装教程
- 下载并解压 zip 压缩包。
- 进入同名目录后双击 index.html 直接预览。
- 如果要部署到站点，把整个目录上传到静态服务器即可。
使用说明
点击不同标签即可切换当前导航项，顶部和底部导航会同步变化。开发时只需要替换导航数据、图标字母和说明文案，就能复用到实际项目。
功能讲解
- 首屏直接展示可点击的图标导航栏，而不是远处一张小卡片。
- 顶部标签栏与底部 Dock 双导航联动，适合同时演示桌面端和移动端导航形态。
- 高亮滑块和焦点态由脚本控制，便于继续扩展角标、未读数或徽标。
