一个简单的hrml导航模板
2025-01-25
一个简单的 HTML 导航模板示例，它包含基本的导航栏结构，同时使用了 CSS 进行样式美化，让导航栏看起来更美观。另外，还添加了一些 JavaScript 代码，用于在移动端实现导航菜单的展开和收起功能。
<!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>版权所有 © 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>============================
这是一个自适应的简单导航模板，可以根据自己需要进行修改。
