页头 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,与页面其他区块对齐 |
| Logo | h-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-3,max-lg:hidden |
| 移动端菜单 | data-cb-disclosure 控制,面板加 data-cb-disclosure-autoclose 点击链接后自动收起 |
页面内锚点跳转时,被页头遮挡的区块加 scroll-mt-16。
与 v2 的差异
| v2 现状 | 规范 |
|---|---|
| 移动端单独渲染一份语言切换 | 同一份语言切换在所有宽度共用 |
菜单按钮 aria-label 随状态切换「打开 / 关闭菜单」 | 固定「菜单」,状态由 aria-expanded 表达(读屏会读「已展开」) |
| 导航无焦点样式 | 加 focus-visible 焦点环 |