顶部导航布局Top Nav
页面结构把主要导航放在顶部，内容铺在下方
顶部导航布局适合官网、社区和内容网站，品牌、入口和主要操作都集中在页面上方。长页面可以让导航吸顶；移动端则要把入口收进清楚可关闭的菜单。
内容区居中限宽 1080~1200px
什么时候用
- 顶栏三件套：左放 logo，中间导航，右侧一个主操作◆ logo产品 · 文档 · 定价免费试用
- 内容区居中限宽：max-width 1080~1200px，两侧留白max-width: 1120px · margin: 0 auto
- 长页面顶栏吸顶：position: sticky，滚多远都在手边顶栏 · position: sticky
- 主操作只有一个：右上角放全站最重要的那个按钮新建项目
什么时候不用
- 顶栏塞十几个入口挤成两行 → 只留核心，其余收进 下拉菜单 Dropdown首页产品方案文档博客定价关于招聘活动
- 宽屏下内容拉满整屏，一行两百字看到串行
- 入口全做成按钮，顶栏像工具栏 → 导航交给 导航菜单 Menu仪表盘项目任务文件成员日程报表消息设置回收站
- 顶栏和正文用同一个底色，分不清哪是导航
组成结构 · Anatomy
内容区页脚 · 版权与次要链接
1顶栏Headerlogo、导航、主操作都住在这，可吸顶
2内容区Main页面主体，居中限宽，两侧留白
3页脚Footer版权、备案、次要链接的收纳处
常见变体 · Variants
静态顶栏Static
页面一屏看完，不用吸顶
吸顶顶栏Sticky
长页面，导航要随手可得
双层顶栏Stacked
导航多到一层放不下时用
典型使用场景
内容站与博客
产品官网
文档站
营销落地页