Skip to content

页头 Header

吸顶页头:Logo、主导航、持牌信息、语言切换、联系按钮。lg(1024px)以下收起为菜单按钮。

examples/header/default.html

预览提示

切换到「手机」宽度,点击右侧菜单按钮查看移动端导航。

英文页面

英文导航文案普遍比中文长 2–3 倍。v2 的处理方式:导航间距在 xl 以下收紧为 gap-6、持牌信息只在 xl 以上显示。

examples/header/english.html

结构要点

部分类名 / 做法
容器sticky top-0 z-50 border-b bg-background/95 backdrop-blur,高 64px(h-16
内容宽度mx-auto max-w-7xl px-4 sm:px-6 lg:px-8,与页面其他区块对齐
Logoh-9 sm:h-10 w-auto,链接带 aria-label
主导航hidden lg:flex gap-6 xl:gap-8,链接见链接 · 导航链接
持牌信息hidden xl:flex,代码用 font-mono font-semibold text-navy
联系按钮小号主要按钮 h-9 px-3max-lg:hidden
移动端菜单data-cb-disclosure 控制,面板加 data-cb-disclosure-autoclose 点击链接后自动收起

页面内锚点跳转时,被页头遮挡的区块加 scroll-mt-16

与 v2 的差异

v2 现状规范
移动端单独渲染一份语言切换同一份语言切换在所有宽度共用
菜单按钮 aria-label 随状态切换「打开 / 关闭菜单」固定「菜单」,状态由 aria-expanded 表达(读屏会读「已展开」)
导航无焦点样式focus-visible 焦点环