Skillppx logo

Header

提供网页头部与导航设计的完整参考，涵盖响应式、可访问性及实现技巧。

已扫描
适合谁
前端开发人员、UI/UX 设计师
不适合谁
非技术背景用户、无需网页开发的普通用户
国内可用性
需网络配置。可能需要网络配置或第三方服务可访问。
安装难度
新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

openclaw skills install @ckchzh/header
下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

Header — 网页头部与导航设计参考

快速参考技能，用于设计和实现网页头部、导航栏及响应式菜单系统。

何时使用

  • 设计带有主导航的网站头部
  • 实现滚动时固定的粘性/固定头部效果
  • 构建响应式的汉堡菜单和移动端导航
  • 使用正确的 ARIA 角色使头部具备可访问性
  • 根据网站类型选择合适的导航模式

命令

intro

scripts/script.sh intro

头部设计概览 — 目的、构成要素与核心原则。

patterns

scripts/script.sh patterns

导航模式 — 横向导航、大菜单（mega menu）、侧边栏导航、面包屑路径。

sticky

scripts/script.sh sticky

粘性与固定头部技术 — 滚动行为、缩小效果、滚动时显示。

responsive

scripts/script.sh responsive

响应式导航 — 汉堡菜单、滑出式菜单、优先级+模式。

html

scripts/script.sh html

头部的语义化 HTML — 正确的页面地标、ARIA 角色、跳转导航。

css

scripts/script.sh css

头部的 CSS 模式 — Flexbox 布局、下拉菜单、过渡动画。

accessibility

scripts/script.sh accessibility

可访问性 — 键盘导航、焦点管理、屏幕阅读器支持。

examples

scripts/script.sh examples

真实世界的头部案例与实现模式。

help

scripts/script.sh help

version

scripts/script.sh version

配置

变量描述
HEADER_DIR数据目录（默认：~/.header/）

*由 BytesAgain 提供 | bytesagain.com | hello@bytesagain.com*

C
@ckchzh

已收录 5 个 Skill

相关推荐