# 导航网页制作指南 ## HTML基础结构 ```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> <style> /* CSS样式将在下面提供 */ </style> </head> <body> <header> <h1>我的导航</h1> <div class="search-box"> <input type="text" placeholder="搜索..."> <button>搜索</button> </div> </header> <main> <section class="category"> <h2>常用网站</h2> <div class="links"> <a href="https://www.baidu.com" target="_blank">百度</a> <a href="https://www.google.com" target="_blank">Google</a> <a href="https://github.com" target="_blank">GitHub</a> </div> </section> <section class="category"> <h2>学习资源</h2> <div class="links"> <a href="https://www.runoob.com" target="_blank">菜鸟教程</a> <a href="https://developer.mozilla.org" target="_blank">MDN</a> <a href="https://stackoverflow.com" target="_blank">Stack Overflow</a> </div> </section> </main> <footer> <p>© 2023 我的导航网站</p> </footer> </body> </html> ``` ## CSS样式设计 ```css body { font-family: 'Arial', sans-serif; margin: 0; padding: 0; background-color: #f5f5f5; color: #333; } header { background-color: #4285f4; color: white; padding: 20px; text-align: center; } h1 { margin: 0; } .search-box { margin-top: 15px; } .search-box input { padding: 8px; width: 300px; border: none; border-radius: 4px 0 0 4px; } .search-box button { padding: 8px 15px; background-color: #34a853; color: white; border: none; border-radius: 0 4px 4px 0; cursor: pointer; } main { display: flex; flex-wrap: wrap; justify-content: center; padding: 20px; gap: 20px; } .category { background-color: white; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.1); padding: 15px; width: 300px; } .category h2 { border-bottom: 1px solid #eee; padding-bottom: 10px; margin-top: 0; } .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); gap: 10px; } .links a { display: block; padding: 8px; background-color: #f1f1f1; color: #333; text-decoration: none; border-radius: 4px; text-align: center; transition: background-color 0.3s; } .links a:hover { background-color: #4285f4; color: white; } footer { text-align: center; padding: 10px; background-color: #333; color: white; } ``` ## JavaScript功能增强 ```javascript // 搜索功能 document.querySelector('.search-box button').addEventListener('click', function() { const query = document.querySelector('.search-box input').value.toLowerCase(); const links = document.querySelectorAll('.links a'); links.forEach(link => { const text = link.textContent.toLowerCase(); if(text.includes(query)) { link.style.display = 'block'; } else { link.style.display = 'none'; } }); }); // 回车键触发搜索 document.querySelector('.search-box input').addEventListener('keypress', function(e) { if(e.key === 'Enter') { document.querySelector('.search-box button').click(); } }); // 从本地存储加载书签 window.addEventListener('DOMContentLoaded', function() { const savedLinks = localStorage.getItem('customLinks'); if(savedLinks) { // 可以在这里添加代码来加载保存的链接 } }); ``` ## 功能扩展建议 1. 添加分类管理功能，允许用户自定义分类 2. 实现拖拽排序，让用户可以调整链接顺序 3. 添加夜间模式切换 4. 实现数据本地存储，保存用户添加的网站 5. 添加导入/导出功能，方便备份和迁移 ## 响应式设计改进 在CSS中添加媒体查询，使网页在移动设备上也能良好显示： ```css @media (max-width: 600px) { .search-box input { width: 200px; } main { flex-direction: column; align-items: center; } .category { width: 90%; } } ``` ## 部署建议 1. 可以将此代码保存为index.html文件直接打开使用 2. 也可以部署到GitHub Pages等免费托管服务 3. 如需长期使用，建议添加后端支持以实现数据持久化 ## 三条额外需要注意的逻辑点 1. 搜索功能目前是前端实现，只能过滤当前页面上显示的链接，无法搜索未加载的内容 2. 本地存储功能需要用户授权，某些浏览器可能限制存储空间 3. 链接的target="_blank"属性可能导致安全风险，建议添加rel="noopener noreferrer" [2025-05-24 04:15:54 | AI写代码神器 | 1317点数解答]