胶囊导航必须用包裹且独立于，多个导航需分别加aria-label区分；禁混logo等非导航内容；CSS用position: sticky实现顶部固定，胶囊圆角应设为height一半的像素值并配合inline-flex布局。

胶囊导航必须用

包裹，不能塞进

里

是唯一被规范定义为“导航链接集合”的语义元素，屏幕阅读器靠它识别可跳转地标。把胶囊菜单硬塞进

或用

替代，会导致读屏器只读出“页眉”或“一个区域”，用户根本不知道这是能跳转的导航。
多个导航（比如主导航 + 用户快捷入口）要各自独立，分别加 aria-label，例如：

和

。
别在

里混放 logo、搜索框、头像——这些属于

的职责，混在一起会破坏 JS 定位逻辑和可访问性树。

顶部固定用 position: sticky，不是 fixed

position: sticky 是当前最省心的选择：它不脱离文档流、自动占位、滚动到临界点才吸附，Chrome 56+、Firefox 59+、Safari 15.4+ 都支持。只有两种情况才退回到 fixed：需要兼容 IE，或必须让菜单“焊死”在视口顶边（哪怕内容不满一屏也要压住下面所有元素）。
用 fixed 必须手动给 body 加 padding-top，值等于菜单高度（比如 60px），否则正文第一段会被盖住；而 sticky 只要写 top: 0，浏览器自己管占位。
常见错误：.header { position: fixed; top: 0; } 之后没加 body { padding-top: 60px; }，结果左侧菜单或首段文字被截掉顶部。

胶囊形状靠 display: inline-flex + height + border-radius 匹配

胶囊感核心在左右两端圆角等于高度一半，例如 height: 32px → border-radius: 16px。直接给 加 border-radius: 50% 常失败，原因有三：

• 默认是行内元素，border-radius 对垂直方向渲染不可控（尤其 Safari）
• 没设 display: inline-block 或 display: flex，导致 height 和 line-height 不参与盒模型计算
• 没配 box-sizing: border-box，padding 会撑大实际宽高，让 border-radius: 50% 算错基准

正确做法是：

DeepBI DHTML 页面生成器

生成可在 deepbi 沙箱 iframe 内运行或作为独立文件运行的交互式 HTML 页面，使用 `window.deepbi` JS SDK 实现数据查询、空间管理、文件浏览及用户操作。当用户提出以下需求时启用该能力： - 创建 KPI 仪表盘、数据表格、文件浏览器、成员列表、管理页面； - 明确要求“转成 dhtml”、“转译成 HTML”、“把 XX 页面转成……”、“控制台页面”、“管理后台”、“DeepBI 页面迁移”； - 提及位于 `apps/console/src/featur

下载

• 设为 display: inline-flex，再加 align-items: center 和明确 height
• border-radius 写成具体像素值（如 16px），别用 50% —— 后者在某些缩放比或字体加载延迟时容易失准
• 用 padding 控制内边距，而不是固定宽高，让文字自然撑开容器更健壮

Flex 布局对齐时，justify-content: space-between 容易视觉失衡

视觉上要让胶囊按钮横向铺开、等宽、居中对齐，但 justify-content: space-between 在当前页标签文字略长时，会导致两端留白不均。改用 space-around 或 center 更稳。
禁止给容器设 white-space: nowrap —— 移动端会强制横向滚动；正确做法是设 flex-wrap: wrap，再配合媒体查询控制换行阈值。
每个胶囊按钮必须设 flex: 1 或明确宽度，否则 Safari 在 flex 容器中可能压缩文本导致截断。
小屏下收汉堡菜单时，别用 display: none 切换 —— 它不支持 transition；应改用 max-height 和 opacity 控制过渡，同时保持 visibility 或 height 的渐变逻辑。

胶囊导航最难调的其实是 Safari 下的圆角渲染和焦点热区对齐，这两个地方一旦忽略，键盘用户和高缩放比用户就会卡住。

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！