别小看一个只有两个入口的 HTML 跳转页。前几天帮朋友做一个内部工具分发入口需求特别直白“给我来个页面左边放新版工具右边放说明书用户点一下就能跳过去。”听起来五分钟能搞定真做起来才发现从布局适配到跳转方式每一处都有讲究。这篇文章就围绕“双板块最简界面”这个场景把一整套可复用的分发页方案拆开讲清楚包括为什么选双板块、HTML 结构怎么写、CSS 怎么排版、跳转逻辑怎么处理以及上线后最容易踩的几个坑。适合刚学 HTML 的人直接照抄也适合老手快速拿去做内部导航页。1. 双板块分发页到底解决什么问题1.1 一个页面管住两个出口所谓双板块用大白话说就是页面上一左一右放两个区块每个区块对应一个跳转目标。用户打开这个页面后不需要思考看到左边标题是“正式版入口”右边标题是“文档中心”点谁进谁。这种页面最大的价值是降低使用者的选择成本。实际场景里我见过不少反面案例有人把一堆链接堆在一个页面上七八个入口排成一列用户到了以后第一反应是“我该点哪个”反而不知道该做什么。双板块设计的精妙之处就是强制做减法。页面只回答两个问题去这里或者去那里。没有第三个选项决策路径短了转化率自然高。从这个角度看双板块分发页并不是“功能少”而是“目的明确”。它天然适合那些只有两个主要出口的业务场景比如测试版和正式版、主站和文档站、国内访问和海外访问、下载入口和在线预览入口等。1.2 适合用双板块跳转页的典型场景我梳理了几个最常见的双板块分发场景基本覆盖了大多数人做这种页面的真实动机。应用场景左板块右板块跳转策略产品升级分流新版页面旧版页面直接展示用户自己选资源下载中心高速下载备用下载点击后新窗口打开文档分发在线文档下载 PDF根据用户行为决定开发者导航项目主页GitHub 仓库全部外链新窗口活动落地页手机端报名电脑端入口用 JS 检测 UA 自动跳从表格能看出来不同场景的跳转策略并不完全一样。有的需要让用户主动选择有的则希望访问者打开页面后自动判断并跳转。后一种情况表面看是“跳转”本质上其实是“分流”双板块在这里可以充当一个可视化的备选方案自动规则失效时用户还可以手动点入口。1.3 为什么是“最简”而不是“最炫”标题里强调“最简界面”这是有意为之。很多人做导航页容易犯一个毛病加背景图、加特效动画、加粒子效果结果页面打开慢不说还把核心入口给淹没了。分发页的核心价值是跳转效率不是视觉表演。极简设计能保证三个东西加载速度快、维护成本低、交互不容易出 bug。我自己的经验是这种页面越简洁越稳。有一次我做一个双板块页面加了几个 CSS 动画和自定义字体结果在旧版浏览器上字体加载失败整个页面布局乱了用户根本找不到按钮。后来我一咬牙把样式砍到只剩基础布局和文字颜色页面从一百多行缩到五十行反而再没出过问题。记住分发页不是官网首页功能单一本身就是优点。2. 方案设计布局选型和关键技术决策2.1 最简方案的三个核心要求动手写代码之前先把标准定下来。我给自己定的要求是三条。第一零外部依赖。页面不引任何 CDN 上的 JavaScript 库、字体库或样式库。原因很简单外部依赖意味着外部风险CDN 一旦抽风页面就白屏了。纯 HTML CSS 就能完成的跳转页没必要引入 jQuery 之类的重量级选手。第二所有代码都放在一个 HTML 文件里。内联 CSS 虽然看起来“不专业”但对于这种极简分发页来说单文件便于部署和维护。你可以在服务器上随时改也可以下载到本地双击就能看效果甚至可以直接用 data:text/html 协议在浏览器地址栏里预览名副其实的“单文件应用”。第三跳转行为清晰可控。哪些链接需要新窗口打开哪些链接需要当前页面跳转必须在书写时就想清楚不能依赖用户右键选择。这一点看起来简单实际做的时候很多新手会翻车后面我会专门讲。2.2 双板块布局Flex 还是 Grid实现双板块布局主流方案无非两种Flex 布局和 Grid 布局。很多文章把这两者说得玄乎其实对于双板块来说选哪个都行关键在于你在不在乎以后扩展。Flex 布局的写法更直观把父容器设为display: flex两个子元素自动排成一行每个板块用flex: 1平分宽度然后加一个gap控制间距。这是最经典的双栏方案。Grid 布局则更像画格子用grid-template-columns: 1fr 1fr定义两列语义上更清晰。我自己更倾向于在“极简双板块”里用 Flex因为代码更少心智负担更低。如果以后要扩展到三个、四个板块改 Grid 也不迟。但必须说清楚两种方案在最终效果上几乎没有差异选择哪个属于个人习惯问题不用迷信哪个更“高级”。2.3 卡片式点击区域让整块都能跳双板块页面的美观度很大程度上取决于“可点击区域”的设计。新手经常犯的错误是把文字做成链接用户必须精准地把鼠标移到那一行字上才能点击体验很差。正确的做法是把整个板块设计成一张大卡片卡片内部包含标题、描述文字、跳转箭头等元素然后把a标签包在整个卡片外面或者通过 CSS 把链接区域撑满整块卡片。这样用户不管点卡片的哪个位置都能触发跳转点错区域的概率大幅下降。实现这个效果有两种思路。第一种是把a标签直接作为卡片的父容器里面放div之类的块级元素。从 HTML 规范角度讲块级元素嵌套在a里面其实是合法的只要别把另一个可点击元素放进a里就行。第二种是用 CSS 的::after伪元素撑开链接区域代码稍微复杂一点但结构更干净。我平时优先用第一种简单粗暴直接有效。3. 手把手实现一个双板块跳转页3.1 先搭一个干净的 HTML 骨架直接上代码先把完整文件贴出来后面逐段讲解。下面这个页面是我常用的模板我把两个板块分别设为“新平台入口”和“旧版文档”实际使用时替换文字和链接地址就行。!DOCTYPE html html langzh-CN head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title双板块分发导航/title style * { margin: 0; padding: 0; box-sizing: border-box; } body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; font-family: PingFang SC, Microsoft YaHei, sans-serif; background: #f2f4f7; } .container { width: 100%; max-width: 860px; } .page-title { text-align: center; font-size: 28px; font-weight: 600; color: #1f2329; margin-bottom: 8px; } .page-subtitle { text-align: center; font-size: 15px; color: #8a919f; margin-bottom: 36px; } .card-wrapper { display: flex; gap: 24px; } .card-link { flex: 1; display: block; text-decoration: none; border-radius: 12px; background: #ffffff; box-shadow: 0 2px 8px rgba(31, 35, 41, 0.08); padding: 32px 28px; transition: transform 0.15s ease, box-shadow 0.15s ease; } .card-link:hover { transform: translateY(-3px); box-shadow: 0 6px 20px rgba(31, 35, 41, 0.12); } .card-link:active { transform: translateY(0); } .card-link h2 { font-size: 20px; color: #1f2329; margin-bottom: 10px; } .card-link p { font-size: 14px; color: #646a73; line-height: 1.6; } .card-badge { display: inline-block; margin-top: 18px; font-size: 13px; color: #ffffff; background: #1677ff; border-radius: 6px; padding: 5px 14px; } .card-badge.green { background: #00b578; } media (max-width: 600px) { .card-wrapper { flex-direction: column; } } /style /head body div classcontainer h1 classpage-title请选择访问入口/h1 p classpage-subtitle根据你的需要点击下方对应卡片跳转/p div classcard-wrapper a classcard-link hrefhttps://example.com/new target_blank relnoopener noreferrer h2新平台入口/h2 p最新版本功能持续更新推荐优先使用。/p span classcard-badge前往新版/span /a a classcard-link hrefhttps://example.com/docs target_blank relnoopener noreferrer h2旧版文档/h2 p历史版本说明与兼容性注意事项无法访问新版时使用。/p span classcard-badge green查看文档/span /a /div /div /body /html这段代码直接保存为index.html双击打开就能看到效果。页面整体分为四个层次body 负责居中container 控制最大宽度card-wrapper 决定两栏排列card-link 是真正可点击的卡片区域。思路非常线性哪怕刚接触 HTML 的人也能一眼看懂。3.2 CSS 布局的细节与换行处理重点看.card-wrapper这块。我给它设置display: flex和gap: 24px两个卡片之间就有了固定间距。每个.card-link设置flex: 1意味着两个卡片平分剩余宽度无论容器多宽它们都保持 1:1 的比例。这种写法比手动指定百分比要灵活很多以后如果你想做成三板块只需要在 wrapper 里再加一个同结构卡片仍然能自动均分。卡片内部用padding撑出呼吸空间避免文字直接顶到边缘。border-radius: 12px做出圆角配合浅色背景和轻微阴影让卡片在白色背景下有悬浮的层次感但不至于太重。过渡动画只用transform和box-shadow这两个属性对性能非常友好不会引起大面积重排用户鼠标悬停时卡片会轻轻上浮交互反馈明确但不浮夸。这里有一个很多人会忽略的小细节我特意给.card-link设置了display: block。因为a标签默认是行内元素设置成块级之后它才能占满父容器的宽度。如果不加这一句卡片区域宽度会坍缩成内容的宽度点击区域会缩成一团整个双板块布局就废了。3.3 跳转逻辑什么时候用新窗口这次代码里两个链接都用了target_blank和relnoopener noreferrer含义是在新标签页中打开并且不把当前页面的 window.opener 引用传给新页面。这个组合是外链跳转的标准配置安全性和体验都比较平衡用户读取完新页面后还能回到分发页继续选另一个入口。不过“全部新窗口打开”并不是万能答案。有些场景需要当前页面跳转比如你希望用户不要开太多标签页有些场景需要自动跳转比如检测到手机端后直接进入移动版页面。下面列出常见跳转方式的适用情况。target_blank适合分发多个外部站点让用户保留原有入口页面不带 target 的普通链接适合站内页面之间的跳转比如表单提交后的重定向window.location.href赋值适合在 JavaScript 逻辑判断后手动指定跳转目标meta http-equivrefresh适合纯 HTML 静态页面的几秒延迟跳转例如“5 秒后自动进入新版本”用上一段说的meta refresh做自动跳转只需要在head里加一行meta http-equivrefresh content5;urlhttps://example.com表示 5 秒后跳转到指定地址。这种古老但有效的做法在一些紧急页面升级场景下依然能看到比如原域名要停用需要把旧地址自动导流到新地址中间用一个过渡页提示用户。虽然实现简单但对用户体验有影响如果时间充裕还是建议用 JS 写一套带倒计时按钮的过渡页用户至少能取消自动跳转。3.4 用 JavaScript 实现按条件跳转如果你的分发逻辑不是静态的而是要根据设备、域名、时间段等因素决定跳转目标光靠a标签就不够了。这时候需要给页面加一点 JavaScript。下面用手机端和电脑端自动分流做个例子。思路很简单在页面加载时用navigator.userAgent判断是不是移动设备如果是就把左板块的链接换成移动版地址或者直接触发跳转。script document.addEventListener(DOMContentLoaded, function () { var isMobile /Android|iPhone|iPad|iPod/i.test(navigator.userAgent); var leftLink document.querySelector(.card-link); if (isMobile) { leftLink.href https://example.com/mobile; } }); /script这段代码用DOMContentLoaded事件保证页面结构先加载完再修改链接地址。navigator.userAgent检测不能做到 100% 准确但对绝大多数场景已经够用。如果你希望做得更严谨可以把移动端判定也加上navigator.maxTouchPoints或屏幕宽度判断。但注意User-Agent 可以被用户在浏览器开发工具里伪装真正的“自动跳转”永远只能作为分流的一个辅助手段不能作为唯一依据。4. 从样板到上线文件组织与部署4.1 单文件还是多文件前面强调单文件便于维护但严格来说把 CSS 放在style标签里、把 JS 放在script标签里适合代码量极小的场景。一旦页面里要调整的样式变多或者需要复用的交互逻辑超过几十行还是拆成分离文件更科学。我的建议是代码总量少于 200 行时用单文件超过之后拆成index.html、style.css、script.js三个文件职责更清晰。拆分后有两点要注意。第一link relstylesheet hrefstyle.css和script srcscript.js/script的路径要正确如果用相对路径页面文件和资源文件在同一级目录下可以省略前导斜杠。第二JS 文件最好放在/body前面或者使用defer属性否则脚本加载时页面 DOM 还没解析完可能出现找不到元素的问题。双板块页面本来就简单别让一个小坑浪费大量排查时间。4.2 部署从本地到服务器只需三步做完的 HTML 文件只是一个静态资源要给别人访问必须部署到 Web 服务器上。整个流程非常轻量走一遍就能记住。第一步准备一个可访问的服务器或静态托管服务。如果只是临时演示可以用各类对象存储的静态网站托管或者用轻量级 Web 服务器软件把index.html放到网站的根目录下。第二步确认域名和路径。比如你绑定的是example.com那么访问https://example.com/index.html和https://example.com/效果一致大多数服务器配置里默认首页就是index.html。第三步在服务器上测试两个跳转链接是否可达至少要在 PC 端和手机端各验证一次因为移动端网络环境和桌面端差别很大。有的朋友可能已经看到线上网址和新域名的映射方式比如“访问每日正常更新跳转新域名”这类需求本质上就是在新的index.html里配置跳转链接。域名换了页面模板不变把两个链接地址改一下就行。这种场景下双板块页面的价值体现得最充分分发页本身可以长期不动只要链接目标更新即可。4.3 如果页面不想让用户直接看到内容只想纯跳转有一种更极端的场景不想让用户在这个页面上停留打开页面后直接进入目标站。这时候你就需要“自动跳转”而不是“点击跳转”。两个常见方案一个是前面提到的meta refresh延迟刷新另一个是 JavaScript 立即跳转。script window.location.replace(https://example.com/new); /script注意这里用的是location.replace而不是location.href。区别在于replace会用新地址替换浏览器历史记录里的当前页用户无法通过“后退”按钮回到你这个跳转页而location.href赋值的方式会保留当前页历史用户按返回键会看到一堆中间跳转记录。对于那种“紧急升级旧地址永久作废”的场景用replace更干净减少用户来回折腾的概率。5. 双板块跳转页的常见坑和排查技巧5.1 点击整块卡片没反应只有文字能点这是出现率最高的问题症状是移动鼠标到卡片空白处光标没有变成手指点下去也没反应。原因是a标签没有被撑开或者内部元素存在叠放问题。解决办法优先检查.card-link是否设置了display: block和flex: 1再检查某个内部元素是否设置了pointer-events: none或更高层级的z-index遮住了链接。另外一个常见原因是把a标签和div的层级写反了比如外层是div内层是a并且div只包住了文字区域没包住整个卡片。修复方式也很简单把a调整为最外层或者给div加上onclicklocation.href...。不过后一种方式要兼顾可访问性键盘用户没法通过 Tab 聚焦能不用尽量不用。5.2 自动跳转造成死循环自动跳转如果写得不小心非常容易造成循环跳转。比如页面 A 用 JS 跳到页面 B页面 B 又因为某种规则跳回页面 A浏览器会在两个页面之间反复刷新最后停在一个空白错误页上。排查思路很简单打开浏览器开发者工具切到 Network 面板看跳转链条里出现了哪些请求。如果是 A 和 B 两个地址反复交替出现八成是跳转逻辑的正则或条件判断写反了。我见过不少愚蠢的案例不是if (isNew) location.href /new写错而是正则匹配的范围太大连/new自身也命中了跳转条件。解决方法是加一个排除判断明确要求在目标地址上不执行跳转逻辑。5.3 修改 HTML 文件后浏览器还是旧页面静态页面最磨人的问题就是缓存。HTML 文件更新了用户浏览器却还在用旧的缓存版本。如果你自己测试时发现改了代码没生效可以先试试强制刷新Windows 下按Ctrl F5Mac 下按Command Shift R这会忽略本地缓存重新拉取页面。如果是部署到线上最好的办法是修改文件名或在链接上加版本参数比如index.html?v20250610。当你给新版页面分发时新链接带上版本号就不会出现用户访问到旧版跳转页的问题。另外服务器端给 HTML 配置短缓存策略也有效比如设成no-cache让页面每次都回源验证虽然流量成本增加但对分发页这种低频场景来说体验优先。5.4 VSCode 里无法跳转链接或函数在编辑器环境下很多人会遇到“点击链接无法跳转”的情况。如果你用的是 VSCode并且希望在编辑器中直接 Ctrl 点击某个网址或文件路径就打开通常需要确认两件事。第一链接必须是完整的 URL比如https://example.comVSCode 才能识别成可跳转链接相对路径如docs/index.html则需要按住 Ctrl 再点击并且在当前项目文件夹内。第二VSCode 需要重新扫描工作区索引尤其是刚克隆下来的项目如果右下角提示“正在初始化重新扫描工作区”等它扫完就能跳转了。这个现象和我们的网页本身没有任何关系纯粹是编辑器的工作机制问题。遇到时不用慌不是代码写错了。6. 再看两个值得保留的细节习惯双板块页面虽然简单但有两个习惯我建议养成。第一个永远给每个链接写上描述性文字不要光秃秃一个标题。描述文字不仅能帮助用户理解入口内容也对搜索引擎更友好别人在搜索时更容易找到你的分发页。第二个给链接加上relnoopener noreferrer。这行属性对用户不可见但能防止新页面通过window.opener反向操作原页面是一种低成本的安全加固。noopener阻止新页面访问原来页面的 window 对象noreferrer额外隐藏来源地址在外链分发场景下值得视情况配置。另外如果你想让这个分发页在微信等 App 的内置浏览器里也能正常跳转可能要留意第三方平台的“外链拦截”机制。普通网页跳转没有问题但部分 App 会拦截未备案或无白名单的外部链接并弹出一个中间确认页。面对这种限制纯 HTML 是无法绕开的需要结合平台提供的跳转能力或域名校验方案处理。这部分涉及各家的业务规则我今天就不展开了你在实际部署时如果碰到单独查对应平台的“网页跳转开放能力”说明即可。就项目本身来说一个双板块 HTML 分发页从写到上线半小时完全能跑通。最容易被低估的不是代码量而是“跳转策略”的提前规划。链接开新窗口还是当前页跳、自动跳转是否要保留备选入口、移动端和桌面端的入口是否一致这些问题在动手前想清楚后面能替你省下大量改版时间。我自己后来甚至把这套模板用在了多个项目的导航页上核心代码几乎没改只换了标题和链接。如果你也需要一个轻量分发入口直接复制这份代码换掉 URL 就能用。