当前位置：首页 > news >正文

一个简单的自适应html5导航模板

news 2025/8/12 9:22:32

一个简单的 HTML 导航模板示例，它包含基本的导航栏结构，同时使用了 CSS 进行样式美化，让导航栏看起来更美观。另外，还添加了一些 JavaScript 代码，用于在移动端实现导航菜单的展开和收起功能。

PHP

<!DOCTYPE html>
<html><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>网址导航模板</title><style>body {font-family: Arial, sans-serif;margin: 0;padding: 0;background-color: #f4f4f4;}header {background-color: #333;color: white;text-align: center;padding: 20px;display: flex;align-items: center;justify-content: space-between;}.logo {width: 50px;height: 50px;background-color: #fff;border-radius: 50%;/* 这里可根据实际情况替换为图片 *//* background-image: url('your-logo.png');background-size: cover; */}.search-container {display: flex;background-color: white;border-radius: 4px;overflow: hidden;}.search-container input[type="text"] {padding: 10px;border: none;outline: none;}.search-container button {padding: 10px 15px;background-color: #007BFF;color: white;border: none;cursor: pointer;}main {display: flex;flex-wrap: wrap;justify-content: center;padding: 20px;}.category {background-color: white;border-radius: 8px;box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);margin: 10px;padding: 20px;width: 300px;}.category h2 {margin-top: 0;}.category ul {list-style-type: none;padding: 0;}.category li {margin-bottom: 10px;}.category a {color: #007BFF;text-decoration: none;transition: color 0.3s;}.category a:hover {color: #0056b3;}footer {background-color: #333;color: white;text-align: center;padding: 10px;}</style>
</head><body><header><div></div><h1>实用网址导航</h1><div><input type="text" placeholder="输入关键词搜索"><button onclick="search()">搜索</button></div></header><main><!-- 学习类网址 --><div><h2>学习资源</h2><ul><li><a href="https://www.zhihu.com/" target="_blank">知乎</a></li><li><a href="https://www.bilibili.com/" target="_blank">哔哩哔哩</a></li><li><a href="https://www.coursera.org/" target="_blank">Coursera</a></li></ul></div><!-- 娱乐类网址 --><div><h2>娱乐天地</h2><ul><li><a href="https://music.163.com/" target="_blank">网易云音乐</a></li><li><a href="https://www.youku.com/" target="_blank">优酷</a></li><li><a href="https://www.douyin.com/" target="_blank">抖音</a></li></ul></div><!-- 工具类网址 --><div><h2>实用工具</h2><ul><li><a href="https://www.66zhan.com/" target="_blank">在线工具</a></li><li><a href="https://www.wqqw.net/" target="_blank">在线工具箱</a></li><li><a href="https://www.zhanf.com" target="_blank">站飞字典网</a></li><li><a href="https://tool.66zhan.com" target="_blank">便民工具网</a></li></ul></div></main><footer><p>版权所有 &copy; 2025 Your Name。保留所有权利。</p><p>备案号：粤ICP备12345678号</p></footer><script>function search() {var keyword = document.querySelector('.search-container input[type="text"]').value;if (keyword) {// 这里可以修改为你想要的聚合搜索链接，例如百度搜索window.open('https://www.baidu.com/s?wd=' + encodeURIComponent(keyword), '_blank');}}</script>
</body></html>

============================

这是一个自适应的简单导航模板，可以根据自己需要进行修改。

RB3E)I7AR7Q3K4T[RW0`QR4.png