二开聚合工具类静态导航网站HTML 源码

基于只言片语原静态导航主页源码，优化后的版本在功能完整性、用户体验和视觉表现上进行了增强，主要功能和特色如下：

核心功能

1. 多搜索引擎集成
   支持谷歌、百度、必应、360搜索、搜狗等主流搜索引擎切换，用户可通过点击搜索框左侧图标快速切换默认引擎，并支持本地存储记忆上次选择的引擎，无需重复设置。

2. 智能搜索提示
   输入关键词时，实时显示搜索建议（如百度的联想词、谷歌的推荐结果），支持上下方向键选择建议词，回车直接跳转搜索，提升输入效率。

3. 分类导航目录
   按功能将常用网站分为多个分类，涵盖工具类（地图、二维码生成）、学习类（慕课网、腾讯课堂）、购物类（淘宝、京东）、资讯类（36氪、虎嗅）等，点击链接直接跳转对应网站。

4. 响应式布局适配
   优化页面布局兼容性，在不同屏幕尺寸下保持导航内容的整齐排列，避免因窗口缩放导致的排版错乱。

优化特色

1. 交互体验升级

   • 导航链接悬停时触发动画效果（3D摇摆+背景色渐变），同时字体放大加粗，提升视觉反馈；
   • 搜索框聚焦时显示蓝色边框高亮，失焦时自动恢复，增强操作感知；
   • 搜索引擎切换面板支持鼠标hover选择，离开区域自动隐藏，操作更流畅。

2. 视觉设计增强

   • 统一配色方案，以蓝色系（#1890FF）为主色调，搭配浅色背景（rgba(230, 247, 255, 0.96)），营造简洁清晰的视觉风格；
   • 分类标题采用加粗设计，与链接内容形成层级区分，便于快速定位分类；
   • 按钮和可点击元素添加圆角和阴影效果，增强立体感。

3. 性能与稳定性优化

   • 精简CSS代码，移除冗余样式，采用Flex布局提升页面渲染效率；
   • 搜索建议通过JSONP跨域请求实现，避免跨域限制，同时减少不必要的网络请求；
   • 本地存储（localStorage）记录用户偏好，提升二次使用体验。

4. 扩展性提升

   • 导航链接采用模块化HTML结构，新增/修改网站仅需在对应分类的<ul>中添加<li>标签，无需改动样式或逻辑；
   • 搜索引擎配置集中管理在keyword.js的search_types数组中，便于新增自定义搜索源（如学术搜索、图片搜索等）。

适用场景

• 个人浏览器主页，快速访问常用网站；
• 团队内部导航页，聚合工作所需工具和资源；
• 基于GitHub Pages/Coding Pages部署，实现零成本在线导航服务。

整体保持了原代码“轻量静态”的核心优势，同时通过细节优化提升了实用性和美观度，适合作为个性化导航工具使用。
采用HTML+CSS+JQ开发的静态导航页面

目录结构

├── index.html # 主页面
├── README.md # 说明文档
├── LICENSE # 许可证
├── .gitignore # Git 忽略文件
└── static/
├── css/
│ ├── style.css # 样式表
│ └── img/ # 图片资源
└── js/
├── jquery.min.js # jQuery 库
└── keyword.js # 核心功能脚本

使用方法

1. 克隆本仓库到本地
2. 直接打开index.html即可使用
3. 可根据需要修改导航链接和样式

自定义修改

• 如需添加新的导航链接，可直接编辑index.html中的对应分类
• 如需修改样式，可编辑static/css/style.css
• 功能扩展可修改static/js/keyword.js

许可证

本项目基于Apache License 2.0许可证开源