461 lines
15 KiB
HTML
461 lines
15 KiB
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>
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
<style>
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Segoe UI', 'Microsoft YaHei', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background: linear-gradient(135deg, #f5f7fa 0%, #e4edf5 100%);
|
|
min-height: 100vh;
|
|
color: #333;
|
|
line-height: 1.6;
|
|
padding: 20px;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1000px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
header {
|
|
text-align: center;
|
|
margin-bottom: 40px;
|
|
padding: 30px 0;
|
|
}
|
|
|
|
.avatar {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
|
|
margin: 0 auto 15px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
font-size: 2rem;
|
|
box-shadow: 0 5px 15px rgba(106, 137, 204, 0.3);
|
|
}
|
|
|
|
h1 {
|
|
font-size: 2.2rem;
|
|
color: #2c3e50;
|
|
margin-bottom: 8px;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1.1rem;
|
|
color: #7f8c8d;
|
|
max-width: 500px;
|
|
margin: 0 auto;
|
|
}
|
|
|
|
.search-box {
|
|
max-width: 600px;
|
|
margin: 0 auto 40px;
|
|
position: relative;
|
|
}
|
|
|
|
.search-box input {
|
|
width: 100%;
|
|
padding: 15px 20px;
|
|
border: none;
|
|
border-radius: 50px;
|
|
background: white;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.08);
|
|
font-size: 1rem;
|
|
outline: none;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
.search-box input:focus {
|
|
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.12);
|
|
}
|
|
|
|
.search-box i {
|
|
position: absolute;
|
|
right: 20px;
|
|
top: 50%;
|
|
transform: translateY(-50%);
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
.nav-grid {
|
|
display: grid;
|
|
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
|
|
gap: 25px;
|
|
}
|
|
|
|
.nav-card {
|
|
background: white;
|
|
border-radius: 16px;
|
|
padding: 25px;
|
|
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
|
|
transition: all 0.3s ease;
|
|
border-top: 4px solid #6a89cc;
|
|
}
|
|
|
|
.nav-card:hover {
|
|
transform: translateY(-5px);
|
|
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
|
|
}
|
|
|
|
.card-header {
|
|
display: flex;
|
|
align-items: center;
|
|
margin-bottom: 20px;
|
|
}
|
|
|
|
.card-icon {
|
|
width: 40px;
|
|
height: 40px;
|
|
border-radius: 10px;
|
|
background: linear-gradient(135deg, #6a89cc 0%, #4a69bd 100%);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
color: white;
|
|
margin-right: 15px;
|
|
}
|
|
|
|
.card-title {
|
|
font-size: 1.3rem;
|
|
color: #2c3e50;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.link-list {
|
|
list-style: none;
|
|
}
|
|
|
|
.link-item {
|
|
margin-bottom: 12px;
|
|
padding-bottom: 12px;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
}
|
|
|
|
.link-item:last-child {
|
|
margin-bottom: 0;
|
|
padding-bottom: 0;
|
|
border-bottom: none;
|
|
}
|
|
|
|
.link-item a {
|
|
text-decoration: none;
|
|
color: #5a6c7d;
|
|
display: flex;
|
|
align-items: center;
|
|
transition: all 0.2s ease;
|
|
padding: 5px 0;
|
|
}
|
|
|
|
.link-item a:hover {
|
|
color: #3498db;
|
|
transform: translateX(5px);
|
|
}
|
|
|
|
.link-item i {
|
|
margin-right: 10px;
|
|
width: 20px;
|
|
text-align: center;
|
|
color: #7f8c8d;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
margin-top: 50px;
|
|
padding: 20px 0;
|
|
color: #95a5a6;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
@media (max-width: 768px) {
|
|
.nav-grid {
|
|
grid-template-columns: 1fr;
|
|
}
|
|
|
|
h1 {
|
|
font-size: 1.8rem;
|
|
}
|
|
|
|
.subtitle {
|
|
font-size: 1rem;
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<div class="container">
|
|
<header>
|
|
<div class="avatar">
|
|
<i class="fas fa-user"></i>
|
|
</div>
|
|
<h1>个人导航</h1>
|
|
<p class="subtitle">简洁高效的个人工作与生活导航页面</p>
|
|
</header>
|
|
|
|
<div class="search-box">
|
|
<input type="text" placeholder="搜索网站或输入网址...">
|
|
<i class="fas fa-search"></i>
|
|
</div>
|
|
|
|
<div class="nav-grid">
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-briefcase"></i>
|
|
</div>
|
|
<h2 class="card-title">工作工具</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-envelope"></i>
|
|
企业邮箱
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-calendar-alt"></i>
|
|
日程管理
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-cloud"></i>
|
|
云盘存储
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-tasks"></i>
|
|
项目管理
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-code"></i>
|
|
</div>
|
|
<h2 class="card-title">开发资源</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-github"></i>
|
|
GitHub
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-code-branch"></i>
|
|
GitLab
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-stack-overflow"></i>
|
|
Stack Overflow
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-book"></i>
|
|
技术文档
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-newspaper"></i>
|
|
</div>
|
|
<h2 class="card-title">资讯阅读</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-rss"></i>
|
|
技术博客
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-globe"></i>
|
|
行业新闻
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-medium"></i>
|
|
Medium
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-book-open"></i>
|
|
电子书籍
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-heart"></i>
|
|
</div>
|
|
<h2 class="card-title">生活娱乐</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-film"></i>
|
|
视频平台
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-music"></i>
|
|
音乐应用
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-shopping-cart"></i>
|
|
在线购物
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-utensils"></i>
|
|
美食推荐
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-share-alt"></i>
|
|
</div>
|
|
<h2 class="card-title">社交网络</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-weixin"></i>
|
|
微信
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-weibo"></i>
|
|
微博
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-linkedin"></i>
|
|
LinkedIn
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fab fa-twitter"></i>
|
|
Twitter
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
|
|
<div class="nav-card">
|
|
<div class="card-header">
|
|
<div class="card-icon">
|
|
<i class="fas fa-cog"></i>
|
|
</div>
|
|
<h2 class="card-title">实用工具</h2>
|
|
</div>
|
|
<ul class="link-list">
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-map-marked-alt"></i>
|
|
地图导航
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-cloud-sun"></i>
|
|
天气预报
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-exchange-alt"></i>
|
|
单位换算
|
|
</a>
|
|
</li>
|
|
<li class="link-item">
|
|
<a href="#">
|
|
<i class="fas fa-language"></i>
|
|
翻译工具
|
|
</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>© 2023 个人导航 | 设计简洁 · 体验高效</p>
|
|
</footer>
|
|
</div>
|
|
|
|
<script>
|
|
// 搜索功能实现
|
|
document.querySelector('.search-box input').addEventListener('keyup', function(e) {
|
|
if (e.key === 'Enter') {
|
|
const query = this.value.trim();
|
|
if (query) {
|
|
// 判断是否是网址
|
|
if (query.includes('.') || query.startsWith('http')) {
|
|
let url = query;
|
|
if (!query.startsWith('http')) {
|
|
url = 'https://' + query;
|
|
}
|
|
window.open(url, '_blank');
|
|
} else {
|
|
// 否则使用搜索引擎搜索
|
|
window.open('https://www.google.com/search?q=' + encodeURIComponent(query), '_blank');
|
|
}
|
|
this.value = '';
|
|
}
|
|
}
|
|
});
|
|
|
|
// 为所有链接添加点击效果
|
|
document.querySelectorAll('.link-item a').forEach(link => {
|
|
link.addEventListener('click', function(e) {
|
|
// 在实际使用中，这里应该替换为实际链接
|
|
e.preventDefault();
|
|
alert('在实际使用中，这里将跳转到相应网站');
|
|
});
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |