Initial commit
This commit is contained in:
Zuoling Rong
344
index.html
Normal file
344
index.html
Normal file
@@ -0,0 +1,344 @@
|
||||
<!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="style.css">
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
|
||||
</head>
|
||||
<body class="loading">
|
||||
<div class="layout">
|
||||
<!-- 左侧导航 -->
|
||||
<nav class="sidebar">
|
||||
<div class="logo">
|
||||
<h1>导航站</h1>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<a href="#" class="nav-item active" data-page="home">
|
||||
<i class="fas fa-home"></i>
|
||||
<span>首页</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="projects">
|
||||
<i class="fas fa-project-diagram"></i>
|
||||
<span>项目</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="articles">
|
||||
<i class="fas fa-book"></i>
|
||||
<span>文章</span>
|
||||
</a>
|
||||
<a href="#" class="nav-item" data-page="friends">
|
||||
<i class="fas fa-users"></i>
|
||||
<span>朋友</span>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="nav-section">
|
||||
<div class="section-title">在线账号</div>
|
||||
<a href="https://github.com" class="nav-item" target="_blank">
|
||||
<i class="fab fa-github"></i>
|
||||
<span>GitHub</span>
|
||||
</a>
|
||||
<a href="https://t.me" class="nav-item" target="_blank">
|
||||
<i class="fab fa-telegram"></i>
|
||||
<span>Telegram</span>
|
||||
</a>
|
||||
<a href="https://twitter.com" class="nav-item" target="_blank">
|
||||
<i class="fab fa-twitter"></i>
|
||||
<span>Twitter</span>
|
||||
</a>
|
||||
<a href="https://steam.com" class="nav-item" target="_blank">
|
||||
<i class="fab fa-steam"></i>
|
||||
<span>Steam</span>
|
||||
</a>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<!-- 右侧内容区 -->
|
||||
<main class="content">
|
||||
<div class="search-box">
|
||||
<input type="text" id="search" placeholder="搜索...">
|
||||
<i class="fas fa-search"></i>
|
||||
</div>
|
||||
|
||||
<!-- 首页 -->
|
||||
<div class="page active" id="home">
|
||||
<div class="welcome-section">
|
||||
<h2>Hello,</h2>
|
||||
<h3>Welcome to My Navigation</h3>
|
||||
<p class="subtitle">Front-end Developer / Open Source Enthusiast / Blogger</p>
|
||||
</div>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-star"></i> 常用网站</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="https://www.google.com" class="site-card">
|
||||
<i class="fab fa-google"></i>
|
||||
<h3>Google</h3>
|
||||
<p>全球最大的搜索引擎</p>
|
||||
</a>
|
||||
<a href="https://www.github.com" class="site-card">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3>GitHub</h3>
|
||||
<p>代码托管平台</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-graduation-cap"></i> 学习资源</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="https://www.bilibili.com" class="site-card">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
<h3>哔哩哔哩</h3>
|
||||
<p>视频学习平台</p>
|
||||
</a>
|
||||
<a href="https://www.zhihu.com" class="site-card">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
<h3>知乎</h3>
|
||||
<p>问答社区</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 项目页 -->
|
||||
<div class="page" id="projects">
|
||||
<div class="welcome-section">
|
||||
<h2>我的项目</h2>
|
||||
<p class="subtitle">这里展示了我的一些个人项目和开源贡献</p>
|
||||
</div>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-code"></i> 个人项目</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-compass"></i>
|
||||
<h3>个人导航站</h3>
|
||||
<p>一个简洁美观的个人导航页面</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-tasks"></i>
|
||||
<h3>Todo List</h3>
|
||||
<p>基于Vue3的待办事项管理器</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-blog"></i>
|
||||
<h3>个人博客</h3>
|
||||
<p>使用Hexo搭建的技术博客</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-code-branch"></i> 开源贡献</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3>Project A</h3>
|
||||
<p>开源项目贡献</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3>Project B</h3>
|
||||
<p>开源项目贡献</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 文章页 -->
|
||||
<div class="page" id="articles">
|
||||
<div class="welcome-section">
|
||||
<h2>技术文章</h2>
|
||||
<p class="subtitle">分享我的技术文章和学习笔记</p>
|
||||
</div>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-pen"></i> 最新文章</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-vuejs"></i>
|
||||
<h3>Vue3最佳实践</h3>
|
||||
<p>Vue3组合式API的使用技巧</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-js"></i>
|
||||
<h3>JavaScript进阶</h3>
|
||||
<p>JavaScript高级特性解析</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-git-alt"></i>
|
||||
<h3>Git使用技巧</h3>
|
||||
<p>Git常用命令和工作流</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-docker"></i>
|
||||
<h3>Docker入门</h3>
|
||||
<p>Docker基础知识和实践</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-book"></i> 学习笔记</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-react"></i>
|
||||
<h3>React Hooks</h3>
|
||||
<p>React Hooks最佳实践</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-node-js"></i>
|
||||
<h3>Node.js实战</h3>
|
||||
<p>Node.js服务端开发笔记</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-css3"></i>
|
||||
<h3>CSS技巧</h3>
|
||||
<p>CSS常用技巧总结</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-database"></i>
|
||||
<h3>数据库设计</h3>
|
||||
<p>数据库架构和优化笔记</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-code"></i> 源码解析</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-vuejs"></i>
|
||||
<h3>Vue源码解析</h3>
|
||||
<p>Vue.js核心原理解析</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fab fa-react"></i>
|
||||
<h3>React原理</h3>
|
||||
<p>React核心机制解析</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 朋友页 -->
|
||||
<div class="page" id="friends">
|
||||
<div class="welcome-section">
|
||||
<h2>友情链接</h2>
|
||||
<p class="subtitle">优秀的博主和朋友们</p>
|
||||
</div>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-user-friends"></i> 技术博主</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-code"></i>
|
||||
<h3>小明的博客</h3>
|
||||
<p>全栈开发工程师，分享技术心得</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-paint-brush"></i>
|
||||
<h3>小红的前端</h3>
|
||||
<p>专注前端开发与设计</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-server"></i>
|
||||
<h3>小张的后端</h3>
|
||||
<p>分享后端开发经验</p>
|
||||
</a>
|
||||
<a href="#" class="site-card">
|
||||
<i class="fas fa-mobile-alt"></i>
|
||||
<h3>小李的移动端</h3>
|
||||
<p>移动应用开发专家</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-laptop-code"></i> 技术社区</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="https://github.com" class="site-card">
|
||||
<i class="fab fa-github"></i>
|
||||
<h3>GitHub</h3>
|
||||
<p>开源代码托管平台</p>
|
||||
</a>
|
||||
<a href="https://stackoverflow.com" class="site-card">
|
||||
<i class="fab fa-stack-overflow"></i>
|
||||
<h3>Stack Overflow</h3>
|
||||
<p>程序员问答社区</p>
|
||||
</a>
|
||||
<a href="https://juejin.cn" class="site-card">
|
||||
<i class="fas fa-book"></i>
|
||||
<h3>掘金</h3>
|
||||
<p>高质量技术社区</p>
|
||||
</a>
|
||||
<a href="https://v2ex.com" class="site-card">
|
||||
<i class="fas fa-comments"></i>
|
||||
<h3>V2EX</h3>
|
||||
<p>创意工作者社区</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<section class="category">
|
||||
<h2><i class="fas fa-coffee"></i> 休闲娱乐</h2>
|
||||
<div class="sites-grid">
|
||||
<a href="https://www.bilibili.com" class="site-card">
|
||||
<i class="fas fa-play-circle"></i>
|
||||
<h3>哔哩哔哩</h3>
|
||||
<p>视频弹幕网站</p>
|
||||
</a>
|
||||
<a href="https://www.zhihu.com" class="site-card">
|
||||
<i class="fas fa-question-circle"></i>
|
||||
<h3>知乎</h3>
|
||||
<p>问答社区</p>
|
||||
</a>
|
||||
<a href="https://www.douban.com" class="site-card">
|
||||
<i class="fas fa-film"></i>
|
||||
<h3>豆瓣</h3>
|
||||
<p>文艺生活社区</p>
|
||||
</a>
|
||||
<a href="https://music.163.com" class="site-card">
|
||||
<i class="fas fa-music"></i>
|
||||
<h3>网易云音乐</h3>
|
||||
<p>音乐平台</p>
|
||||
</a>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
|
||||
<!-- 搜索结果页 -->
|
||||
<div class="page" id="search-results">
|
||||
<div class="welcome-section">
|
||||
<h2>搜索结果</h2>
|
||||
<p class="subtitle">在所有页面中找到的匹配项</p>
|
||||
</div>
|
||||
|
||||
<section class="category search-section" data-section="home" style="display: none;">
|
||||
<h2><i class="fas fa-home"></i> 首页匹配项</h2>
|
||||
<div class="sites-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="category search-section" data-section="projects" style="display: none;">
|
||||
<h2><i class="fas fa-project-diagram"></i> 项目匹配项</h2>
|
||||
<div class="sites-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="category search-section" data-section="articles" style="display: none;">
|
||||
<h2><i class="fas fa-book"></i> 文章匹配项</h2>
|
||||
<div class="sites-grid"></div>
|
||||
</section>
|
||||
|
||||
<section class="category search-section" data-section="friends" style="display: none;">
|
||||
<h2><i class="fas fa-users"></i> 朋友匹配项</h2>
|
||||
<div class="sites-grid"></div>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
<script src="script.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user