简单几步搭建属于自己的网页导航页

手把手教你打造个人专属导航页 – 5分钟搞定浏览器主页

简单几步搭建属于自己的网页导航页

大家好，我是33blog的技术博主。今天想分享一个特别实用的小技巧 – 如何快速搭建一个属于自己的网页导航页。作为一个经常需要切换各种工具网站的开发者，我受够了浏览器默认主页那些乱七八糟的推荐内容，于是花了点时间研究了这个方案。

为什么需要自定义导航页？

不知道你们有没有同感，每次打开浏览器，那些默认主页要么广告满天飞，要么推荐一堆用不上的内容。作为一个效率控，我实在受不了这种干扰。后来我发现，其实用最简单的HTML+CSS就能打造一个干净整洁的个人导航页，还能把自己常用的网站都集中放在一起。

最棒的是，这个方案：

完全免费
不需要服务器
可以本地运行
支持多设备同步（配合网盘）

基础HTML结构搭建

我们先从最基础的HTML骨架开始。创建一个新文件，命名为index.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>
        body {
            font-family: 'Arial', sans-serif;
            max-width: 1200px;
            margin: 0 auto;
            padding: 20px;
            background-color: #f5f5f5;
        }
        .container {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
            gap: 15px;
        }
        .site-card {
            background: white;
            padding: 15px;
            border-radius: 8px;
            text-align: center;
            box-shadow: 0 2px 5px rgba(0,0,0,0.1);
            transition: transform 0.2s;
        }
        .site-card:hover {
            transform: translateY(-5px);
        }
    </style>
</head>
<body>
    <h3>我的常用网站</h3>
    <div class="container">
        <!-- 网站卡片会放在这里 -->
    </div>
</body>
</html>

添加常用网站链接

现在我们来填充内容。在.container div中添加你的常用网站，格式如下：

<a href="https://github.com" class="site-card" target="_blank">
    <img src="https://github.githubassets.com/favicons/favicon.png" alt="GitHub">
    <p>GitHub</p>
</a>

<a href="https://stackoverflow.com" class="site-card" target="_blank">
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/Img/favicon.ico" alt="Stack Overflow">
    <p>Stack Overflow</p>
</a>

这里有个小技巧：大部分网站的favicon(网站图标)都可以通过网站域名/favicon.ico获取，或者查看网页源代码中的link rel="icon"标签。

进阶美化技巧

如果你想让导航页更美观，可以尝试这些调整：

/* 添加在style标签内 */
.site-card img {
    width: 48px;
    height: 48px;
    margin-bottom: 10px;
}

/* 暗黑模式支持 */
@media (prefers-color-scheme: dark) {
    body {
        background-color: #222;
        color: #eee;
    }
    .site-card {
        background: #333;
    }
}

/* 分类分组 */
.category {
    margin-top: 30px;
}
.category h2 {
    border-bottom: 2px solid #ddd;
    padding-bottom: 5px;
}