纯静态HTML导航主页从零实现：网格布局、深色主题与搜索框

1. 为什么值得亲手做一个导航主页浏览器默认的新标签页要么是搜索框加几个常用站点图标要么是厂商塞满的资讯流。用久了会发现两个问题一是信息密度太低真正每天要点的就那么七八个站却要在一堆推荐内容里找二是视觉上完全不受自己控制想换个配色、换个布局都做不到。导航主页这个东西本质上就是把你每天高频访问的入口从浏览器给什么用什么变成自己需要什么就放什么。我最早动手做导航页是因为同时要用到几套不同的工具站——文档、代码托管、设计素材、内部后台、几个常看的行业社区。每次开新标签页都要重新敲地址或者翻历史记录一天下来光这个动作就浪费不少时间。后来花了一个周末写了个纯静态的 HTML 导航页把所有入口按用途分组摆上去配了个深色背景加毛玻璃卡片用到现在快两年了中间只改过几次链接。这篇文章适合三类人看完全没写过网页但想拥有一个自己专属主页的新手写过一点 HTML 但不知道从哪下手做完整页面的朋友以及已经会写但想看看别人怎么组织代码、怎么处理细节的老手。我会从整体设计思路讲到具体实现把配色、布局、图标、搜索框、响应式这些环节全部拆开代码可以直接抄也可以按自己的需求改。全程只需要一个文本编辑器和浏览器不需要装任何框架、不需要服务器、不需要联网构建。提示导航主页的核心价值是减少一次点击和一次思考任何让页面变复杂、加载变慢的设计都要慎重考虑是否值得加。2. 整体设计思路与方案选型2.1 单文件还是多文件先想清楚维护成本做导航页第一个要决定的事是把它写成一个 HTML 文件还是拆成 HTML CSS JS 三个文件。这两种做法各有适用场景我两种都用过说说实际感受。单文件的好处是极致简单。整个页面就一个.html样式写在style标签里脚本写在script标签里拷到任何地方都能直接双击打开。换电脑、发给朋友、丢进网盘备份都不会出现样式丢了的情况。缺点是文件会越来越长改一个颜色可能要往下翻几百行而且浏览器每次都要重新解析全部内容。多文件的好处是结构清晰样式归样式、逻辑归逻辑改配色只动 CSS加功能只动 JS。缺点是部署时要注意路径如果放到某个子目录下相对路径写错就会白屏。另外本地直接双击打开时某些浏览器对本地文件的脚本加载有额外限制虽然纯静态页面一般不受影响但心里要有数。我的建议是这样如果你只是想要一个能用的导航页链接不超过三十个直接写单文件省心。如果你打算长期维护、经常调整布局、甚至想加天气、时钟、待办这类动态模块那就拆成三个文件后期改动会舒服很多。本文的示例代码以单文件为主方便你直接复制运行但结构上会按样式区、结构区、脚本区清晰分段你想拆的时候照着切就行。2.2 布局方案为什么选网格而不是浮动早些年做导航页很多人用float或者inline-block来排列卡片。这两种方式在卡片高度不一致的时候会出现错位还得手动清除浮动维护起来很烦。现在做这类一堆等宽卡片整齐排列的布局最合适的是 CSS Grid。Grid 的核心优势是它能用一行代码定义每行放几个、间距多少而且卡片高度自动对齐不需要计算宽度百分比。比如grid-template-columns: repeat(auto-fill, minmax(220px, 1fr))这一句意思是每列最小 220 像素能塞几列塞几列剩下的空间平均分。这样在宽屏上自动变成四五列窄屏上自动变成一两列完全不用写媒体查询。这就是我选 Grid 而不是 Flex 换行的原因——Flex 换行虽然也能做但最后一行如果不满对齐方式会比较别扭Grid 处理得更干净。至于卡片内部用 Flex 做横向排列图标在左、文字在右是最顺手的因为 Flex 处理一维排列 垂直居中非常直接。所以最终的方案是外层 Grid 管整体排布卡片内部 Flex 管内容对齐各司其职。2.3 配色与视觉深色为主降低长时间注视的疲劳导航页是每天要看好多次的页面配色不能太刺眼。我试过纯白背景白天还行晚上开新标签页那一下白光很晃眼。后来改成深灰背景不是纯黑纯黑配白字对比过强看久了眼睛累卡片用比背景稍亮一点的灰文字用接近白但不纯白的浅灰整体柔和很多。具体色值上背景我用#1a1d23这类偏蓝的深灰卡片用#242830主文字#e8eaed次要文字#9aa0a6。这几个值不是随便定的它们之间的对比度大致落在 WCAG 建议的可读区间内既保证看得清又不会像纯黑白那样刺眼。强调色我选了一个偏青的蓝#4a9eff用在悬停边框和搜索框聚焦上数量控制得很少避免页面花哨。如果你喜欢浅色把背景换成#f5f6f8、卡片#ffffff、文字#202124就行结构完全不用动。这就是把颜色抽成 CSS 变量的意义——改主题只改变量不碰布局。2.4 图标方案不引入图标库用文字和 SVG图标是导航页的视觉重点但也是最容易把页面搞重的地方。引入一整套图标字体或者图标库动辄几百 KB为了几个图标不值得。我的做法是两条路一是用站点名称的首字母或首字配一个带背景色的圆角方块简单直接永远不会加载失败二是对少数几个特别常用的站手写内联 SVG体积小、清晰、可控。内联 SVG 的好处是它本身就是 HTML 的一部分不需要额外请求颜色可以用currentColor跟随文字颜色变化悬停时自动变色。缺点是每个图标都要写一段 path 数据稍微麻烦。折中方案是常用的五六个站用 SVG其余全部用首字母方块。这样页面既有个性又不会臃肿。注意不要用外链图片当图标。一旦那个图床挂了或者网络不通你的导航页就会出现一排裂图非常难看。首字母方块和内联 SVG 都没有这个风险。3. 核心细节解析与实操要点3.1 页面骨架从 doctype 到 viewport 一个都不能少一个规范的 HTML 页面开头这几行是基础中的基础但恰恰是新手最容易漏的地方。完整的头部应该是这样!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的导航/title /head body !-- 页面内容 -- /body /html逐行说下为什么。!DOCTYPE html告诉浏览器用标准模式渲染不加这行浏览器会进入怪异模式盒模型计算方式都不一样布局会莫名其妙错位。langzh-CN声明页面语言是简体中文影响的是屏幕阅读器的发音和浏览器翻译功能的判断对中文页面来说加上更规范。charsetUTF-8必须放在 head 最前面它决定浏览器用什么编码解析页面如果这行靠后或者缺失中文可能变成乱码。viewport这行是移动端适配的关键没有它手机浏览器会按桌面宽度渲染再缩小字小得看不清。这几行看着简单但我见过太多人从网上抄代码时把 charset 那行漏掉结果本地打开正常、传到别的地方就乱码排查半天。养成习惯新建 HTML 文件先把这五行敲上。3.2 CSS 变量把主题色集中管理前面提到配色要能一键切换靠的就是 CSS 自定义属性也就是常说的 CSS 变量。写法是在:root里定义全局都能引用:root { --bg: #1a1d23; --card: #242830; --card-hover: #2d323c; --text: #e8eaed; --text-dim: #9aa0a6; --accent: #4a9eff; --radius: 12px; --gap: 16px; }用的时候写background: var(--bg);。这样定义的好处一是改主题只改这一处二是变量名本身有语义--text-dim一看就知道是次要文字比记#9aa0a6这种色值友好得多。我后来给页面加了个浅色主题切换就是靠 JS 改:root上的这几个变量值布局代码一行没动。变量命名我建议用用途而不是颜色比如叫--accent而不是--blue。因为哪天你把强调色从蓝改成紫叫--blue就名不副实了叫--accent则永远成立。3.3 网格布局一行代码搞定响应式排列前面说的 Grid 核心那行展开讲一下参数怎么调.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); }minmax(220px, 1fr)里的 220px 是每列的最小宽度。这个值怎么定取决于你卡片里放什么。如果卡片是图标 两三个字的站名180px 就够如果站名比较长或者你想放一行描述那就得 240px 以上。我的经验是先在浏览器里把窗口拖窄看卡片里的文字什么时候开始换行或者被截断那个临界宽度往上加 20px 就是合适的 minmax 值。auto-fill和auto-fit的区别也值得说一句。auto-fill是有多少列位置就填多少列哪怕空着auto-fit是把空列折叠掉让现有卡片撑满。对于导航页这种卡片数量固定的场景两者视觉上差别不大但如果你卡片很少比如只有三个auto-fit会让它们拉得很宽auto-fill则保持正常宽度靠左排列。我个人偏好auto-fill因为卡片宽度更稳定。3.4 卡片悬停用 transform 而不是改尺寸卡片悬停效果是提升质感的关键细节。很多人第一反应是悬停时改width或者padding但这样会触发浏览器重新计算布局导致周围卡片跟着抖动体验很差。正确做法是用transform和box-shadow这两个属性由 GPU 处理不触发重排.card { background: var(--card); border-radius: var(--radius); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .card:hover { transform: translateY(-3px); background: var(--card-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); }translateY(-3px)让卡片轻微上浮配合阴影加深产生被抬起来的感觉。位移量控制在 2 到 4 像素之间太小看不出来太大显得浮夸。transition的时间 0.2 秒左右最舒服太快显得生硬太慢显得拖沓。这几个数值是我反复调出来的你可以直接用也可以微调。提示transition里明确写出要过渡的属性比写all更可控。写all时任何属性变化都会触发过渡有时候会出现意料之外的动画。3.5 搜索框让导航页真正能用起来纯链接的导航页有个短板遇到没收录的站还是得去地址栏敲。加一个搜索框就能解决——输入关键词回车直接跳到搜索引擎结果页。实现很简单一个表单指向搜索引擎的查询地址form classsearch actionhttps://www.example.com/search methodGET target_blank input typetext nameq placeholder搜索或输入网址 autocompleteoff /form关键在nameq这个参数名要和搜索引擎约定的查询参数一致回车后浏览器会自动拼成.../search?q关键词。target_blank让结果在新标签打开不覆盖你的导航页。autocompleteoff关掉浏览器的历史下拉避免遮挡。如果你想让搜索框更聪明比如输入的是网址就直接跳转、是关键词就搜索那需要加一点 JS 判断。逻辑是监听回车取输入值用正则判断它像不像网址含点号且没有空格是就location.href跳过去不是就提交给搜索引擎。这段逻辑十几行就能写完后面实操部分会给完整代码。4. 完整实操过程与核心代码实现4.1 从零开始文件创建与基础结构打开任意文本编辑器VS Code、Sublime、甚至系统自带的记事本都行新建文件另存为index.html注意编码选 UTF-8。然后按下面的结构把骨架搭起来。我习惯把样式、结构、脚本分成三大块中间用注释隔开方便定位!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title我的导航/title style /* 样式区 */ /style /head body !-- 结构区 -- script /* 脚本区 */ /script /body /html这个顺序有讲究style放在 head 里浏览器解析到它时页面还没开始渲染不会出现先看到无样式内容再突然变样的闪烁。script放在 body 末尾是因为脚本里往往要操作页面元素如果放在 head 里执行时元素还没解析出来会报错找不到节点。放末尾就天然保证了 DOM 已经就绪。4.2 样式区完整代码与逐段说明把下面这段填进style里。我按功能分了段每段前面有注释:root { --bg: #1a1d23; --card: #242830; --card-hover: #2d323c; --text: #e8eaed; --text-dim: #9aa0a6; --accent: #4a9eff; --radius: 12px; --gap: 16px; } * { margin: 0; padding: 0; box-sizing: border-box; } body { background: var(--bg); color: var(--text); font-family: -apple-system, Segoe UI, Microsoft YaHei, sans-serif; min-height: 100vh; padding: 40px 24px; } .wrap { max-width: 1100px; margin: 0 auto; } .title { font-size: 22px; font-weight: 600; margin-bottom: 24px; color: var(--text); } .search { margin-bottom: 32px; } .search input { width: 100%; padding: 14px 18px; font-size: 15px; color: var(--text); background: var(--card); border: 1px solid transparent; border-radius: var(--radius); outline: none; transition: border-color 0.2s ease, background 0.2s ease; } .search input:focus { border-color: var(--accent); background: var(--card-hover); } .search input::placeholder { color: var(--text-dim); } .group-title { font-size: 13px; color: var(--text-dim); margin: 28px 0 12px; letter-spacing: 1px; } .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: var(--gap); } .card { display: flex; align-items: center; gap: 12px; padding: 14px 16px; background: var(--card); border-radius: var(--radius); text-decoration: none; color: var(--text); transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease; } .card:hover { transform: translateY(-3px); background: var(--card-hover); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.3); } .icon { width: 36px; height: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 9px; font-size: 16px; font-weight: 600; color: #fff; } .card-text { display: flex; flex-direction: column; overflow: hidden; } .card-name { font-size: 14px; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .card-desc { font-size: 12px; color: var(--text-dim); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }逐段解释几个关键点。* { box-sizing: border-box; }这行让元素的 padding 和 border 算进宽度里否则你设了width: 100%再加 padding元素就会溢出容器。这是几乎所有现代项目的标配一定要加。font-family里我把系统字体放在最前面-apple-system对应苹果设备Segoe UI对应 WindowsMicrosoft YaHei是中文回退。这样在各类设备上都能用上系统自带的好看字体不需要加载网络字体页面秒开。.card-text上的overflow: hidden配合子元素的text-overflow: ellipsis实现文字过长时显示省略号。white-space: nowrap禁止换行三者缺一不可。这个细节很重要否则站名一长卡片高度就被撑开整行卡片参差不齐。4.3 结构区分组组织你的链接结构部分我建议按用途分组比如常用工具开发资源学习平台娱乐休闲。分组不仅看着整齐找东西也快。每组一个标题下面一个网格div classwrap h1 classtitle我的导航/h1 form classsearch idsearchForm input typetext idsearchInput placeholder搜索或输入网址回车打开 autocompleteoff /form div classgroup-title常用工具/div div classgrid a classcard hrefhttps://example.com target_blank relnoopener span classicon stylebackground:#4a9eff邮/span span classcard-text span classcard-name邮箱/span span classcard-desc收发邮件/span /span /a !-- 更多卡片 -- /div div classgroup-title开发资源/div div classgrid !-- 卡片 -- /div /div每个卡片是一个a标签直接可点。target_blank让链接在新标签打开relnoopener是安全实践防止新页面通过window.opener操作你的原页面虽然对纯静态导航页威胁不大但养成习惯没坏处。图标那个span用内联style设背景色是因为每个站的品牌色不同写进 CSS 类里反而麻烦。首字取站名第一个字比如邮箱取邮代码托管取代。如果站名是英文取首字母大写。这个方案的好处是零依赖永远不会加载失败。4.4 脚本区搜索框的智能判断前面说的输入网址直接跳、输入关键词去搜索的逻辑完整实现如下(function () { var form document.getElementById(searchForm); var input document.getElementById(searchInput); var engine https://www.example.com/search?q; form.addEventListener(submit, function (e) { var val input.value.trim(); if (!val) { e.preventDefault(); return; } var isUrl /^(https?:\/\/)?[\w-](\.[\w-])([\/\w\-._~:?#\[\]!$()*,;]*)?$/.test(val); if (isUrl) { e.preventDefault(); if (!/^https?:\/\//.test(val)) val https:// val; window.open(val, _blank); } }); })();逻辑拆开看。先取输入值并去掉首尾空格空值直接拦掉不提交。然后用正则判断它像不像网址允许可选的http(s)://前缀中间是字母数字连字符 点 字母数字连字符这种域名结构后面可以跟路径和参数。如果匹配就阻止表单默认提交手动补上协议头用window.open新标签打开。如果不匹配就放行让表单按action提交给搜索引擎。这个正则不是完美的比如hello.world这种带点的普通词会被误判成网址。但实际使用中带点的搜索词很少见误判概率低而且就算误判了用户看到跳转不对退回来重新搜一下也不麻烦。追求完美可以用更复杂的判断但我觉得没必要简单够用就好。外面包一层(function(){ ... })()是立即执行函数作用是隔离变量作用域避免和页面其他脚本的变量名冲突。虽然单文件导航页一般没这个问题但养成习惯写独立脚本时都包一层。4.5 响应式微调小屏上的几个细节Grid 的auto-fill已经处理了大部分响应式需求但小屏上还有几个细节要调。一是页面内边距桌面端40px 24px在手机上太宽浪费空间可以用媒体查询收窄media (max-width: 600px) { body { padding: 24px 16px; } .title { font-size: 19px; } .grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); } .card-desc { display: none; } }小屏上把每列最小宽度降到 150px能多塞一列隐藏卡片描述文字只留站名避免文字挤成一团。这些调整都是基于小屏空间宝贵优先保证核心信息的原则。二是点击区域。手机上手指比鼠标指针粗卡片高度不能太矮。我给的padding: 14px 16px加上图标 36px 高整体卡片高度在 64px 左右手指点起来很舒服。如果你把 padding 调小到 8px卡片变矮误触率会上升不建议。5. 常见问题与排查技巧实录5.1 页面打开是白屏或者样式全丢这是新手最常见的问题原因通常有三个。第一CSS 写在单独的.css文件里但link的href路径写错了。排查方法是在浏览器按 F12 打开开发者工具看 Console 面板有没有红色的 404 报错有的话就是路径问题。相对路径style.css表示和 HTML 同目录./css/style.css表示子目录../style.css表示上级目录对照实际文件位置改。第二style标签写在了/head外面或者标签没闭合。HTML 对标签闭合比较宽容但样式标签位置错了浏览器可能不解析。检查方法是看源码里style和/style是否成对是否在 head 内。第三文件保存时编码不是 UTF-8导致中文乱码连带影响解析。用编辑器另存为时明确选 UTF-8不要选ANSI或者GBK。5.2 中文显示成乱码乱码几乎都是编码不一致导致的。页面声明了charsetUTF-8但文件实际保存成了 GBK浏览器按 UTF-8 解析 GBK 字节就乱了。解决办法是用编辑器重新以 UTF-8 保存。VS Code 右下角能看到当前编码点一下可以切换并保存。记事本的话另存为对话框底部有编码选项选 UTF-8。还有一种情况是文件本身没问题但通过某种方式传输后编码变了。纯静态页面直接本地打开一般不会但如果经过某些工具处理要注意保持编码。5.3 卡片悬停时周围卡片抖动前面提过这是因为悬停时改了会触发重排的属性比如width、margin、padding、border-width。检查你的:hover规则把所有影响布局的属性换成transform和box-shadow。如果确实需要改边框用outline代替border因为outline不占布局空间。或者用box-shadow模拟边框效果比如box-shadow: 0 0 0 2px var(--accent)视觉上就是一圈边框但不影响布局。5.4 移动端点击链接有延迟或高亮移动端浏览器为了判断用户是单击还是双击缩放会给点击加约 300ms 延迟。现代浏览器加了 viewport 声明后基本消除了这个延迟所以确保你的meta nameviewport写对了。另外点击时出现的灰色高亮块可以用-webkit-tap-highlight-color: transparent;去掉让点击反馈更干净。不过完全去掉高亮会让用户失去点击反馈我建议保留或者用:active状态自己做一个更精致的反馈。5.5 常见问题速查表现象可能原因排查方向白屏无内容HTML 结构错误或文件未保存看源码是否完整重新保存样式全丢CSS 路径错误或 style 标签未闭合F12 看 Console 报错中文乱码文件编码与声明不一致统一改为 UTF-8悬停抖动hover 改了布局属性改用 transform 和 box-shadow移动端字太小缺 viewport 声明补上 meta viewport图标裂图用了外链图片且失效改用首字母或内联 SVG搜索不跳转表单 name 或 action 写错核对搜索引擎参数名提示遇到问题先开 F12Console 面板的红色报错和 Elements 面板的实时样式能解决八成以上的前端问题。不要靠猜。5.6 几个我踩过的坑第一个坑是图标颜色。早期我用固定的十六进制色值给每个图标设背景后来想换主题发现图标颜色和整体不搭但一个个改太麻烦。后来改成用一组预设的柔和色从里面挑整体协调多了。建议你也准备五六个协调的色值图标背景从里面选不要每个都随手取色。第二个坑是链接失效。导航页用久了有些站改域名或者关停链接就 404 了。我现在的习惯是每季度过一遍把不用的删掉把改域名的更新。可以在卡片上加个title属性写备注比如2024 年改过域名方便自己回忆。第三个坑是过度设计。我一度给卡片加了渐变边框、发光效果、入场动画看着很炫但每次开新标签页都要等动画播完才能点反而变慢了。后来全部砍掉只保留悬停上浮。导航页的第一要务是快任何拖慢它的设计都要让路。6. 进阶玩法与个性化扩展6.1 加一个实时时钟和问候语导航页顶部放个时钟根据时间显示早上好下午好是个成本很低但很有温度的小功能。实现就是几行 JSfunction updateClock() { var now new Date(); var h now.getHours(); var m String(now.getMinutes()).padStart(2, 0); var greet h 6 ? 凌晨好 : h 12 ? 早上好 : h 18 ? 下午好 : 晚上好; document.getElementById(clock).textContent greet 现在是 h : m; } updateClock(); setInterval(updateClock, 1000 * 30);padStart(2, 0)保证分钟永远是两位比如 9 点 5 分显示成 09:05 而不是 9:5。setInterval每 30 秒更新一次就够了不需要每秒刷新省点性能。这个模块放在标题下方视觉上很自然。6.2 主题切换深色浅色一键换前面把颜色都抽成了 CSS 变量切换主题就变得很简单。定义两套变量用>:root[data-themelight] { --bg: #f5f6f8; --card: #ffffff; --card-hover: #f0f1f3; --text: #202124; --text-dim: #5f6368; }然后在 JS 里切换document.documentElement.dataset.theme的值在light和空之间来回切。配合localStorage记住用户选择下次打开还是上次的主题。这个功能加起来不到二十行代码但体验提升明显尤其是白天晚上切换使用的人。6.3 用 localStorage 记住常用站点如果你想让导航页更聪明可以记录每个卡片的点击次数把点得最多的几个自动排到最前面。实现思路是给每个卡片一个唯一标识点击时在localStorage里累加计数页面加载时读取计数并重新排序。这个功能有点复杂涉及 DOM 操作和排序算法新手可以先跳过等熟悉了基础再尝试。不过要提醒一句自动排序有个副作用卡片位置会变肌肉记忆就失效了。你本来闭着眼都能点到的位置突然换了个站反而更慢。所以这个功能是否值得加取决于你的使用习惯。我试过一段时间最后还是改回了固定顺序因为固定位置带来的效率提升比常用在前更大。6.4 部署与备份让导航页随时可用纯静态页面部署极其简单。最省事的方式是直接把index.html放在本地某个固定目录浏览器里把它设为书签或者主页。想在任何设备都能访问可以放到静态托管服务上上传一个文件就完事不需要服务器和数据库。备份方面我建议把 HTML 文件放进网盘同步目录或者用 Git 管理。用 Git 的好处是每次改动都有记录改坏了能回退。我自己的导航页就放在一个私有仓库里改完提交一下换电脑 clone 下来就能用。注意如果导航页里包含内部系统地址或者个人信息不要放到公开的托管服务上。纯本地使用或者放私有仓库更稳妥。6.5 性能上的几个小优化导航页虽然简单但既然每天要开很多次性能还是值得抠一下。第一不要引入任何外部 CSS 框架和 JS 库Bootstrap、jQuery 这些对导航页来说是杀鸡用牛刀白白增加几百 KB 的加载。第二图标用内联 SVG 或首字母避免图片请求。第三如果卡片很多超过一百个可以考虑给a加loadinglazy不过纯文字卡片一般不需要。实测下来一个优化到位的单文件导航页体积可以控制在 20KB 以内本地打开几乎是瞬间显示没有任何等待感。这就是纯静态方案的优势也是我一直推荐它的原因。6.6 关于好看的一点个人看法最后聊聊审美。导航页的好看和海报、落地页的好看不是一回事。海报可以追求视觉冲击导航页追求的是耐看和高效。一个每天看几十次的页面任何强烈的视觉元素都会很快变成干扰。所以我的原则是配色克制动效轻微留白充足信息层级清晰。宁可朴素不要花哨。我见过一些导航页做得像艺术品渐变、粒子、3D 卡片全上第一眼惊艳用一周就烦了。反倒是那些看起来平平无奇、但布局规整、颜色舒服的页面能用很久。这个道理和很多工具类产品一样功能性的东西稳定和高效永远排在炫酷前面。如果你刚开始做建议先做一个最简版本——深色背景、网格卡片、一个搜索框用上一周感受一下哪里不顺手再针对性地改。不要一上来就追求完美导航页是给自己用的用得舒服比看起来漂亮重要得多。我自己这个页面改了两年到现在还在微调每次改都是因为实际使用中发现了新的不便而不是因为看腻了想换风格。这种用出来的需求驱动的迭代比凭空想象的设计靠谱得多。