---
order: 2
category:
  zh-CN: 设计指引
  en-US: Guide
title: 
  zh-CN: 页头与页尾
  en-US: Header and Footer
---

页头承载的是品牌信息与整个网站的结构信息，明确的告知我们网站里最主要的几块内容。

页尾则是一个网站的落款，提供的相关的产品信息、友情链接与版权信息。

## 顶部页头导航

顶部导航高度为 64px, 主要展示 logo、基本导航内容、用户相关信息。 我们提供了三种示例供调选：

### 基本型页头导航

<img class="preview-img" align="right" alt="基本型页头导航" description="" src="https://gw.alipayobjects.com/zos/rmsportal/mbmfZSnXKIPOUBhfQQIs.png">

由 logo 与基本导航内容组成。

### 用户信息页头导航

<img class="preview-img" align="right" alt="用户信息页头导航" description="" src="https://gw.alipayobjects.com/zos/rmsportal/joIcEcNcOorilRaACobU.png">

如果有登录信息或其它信息需要在导航展现时，我们可以在导航基本内容右侧添加其它信息。

### 单 logo 页头

<img class="preview-img" align="right" alt="单 logo 页头" description="" src="https://gw.alipayobjects.com/zos/rmsportal/arCBcBBCQEgsEGSCsKfs.png">

如果不需要导航时，我们建议将背景设为透明，将 logo 融入首屏里。此处只展示类型。

## 页脚

Footer（页脚）作为展示页中也非常重要的一部分，在页面的最底部，包含的信息内容为：实用导航，语言选择，社交链接，帮助和支持，版权和隐私声明等。

### 单版权信息

<img class="preview-img" align="right" alt="单版权信息" description="" src="https://gw.alipayobjects.com/zos/rmsportal/SMzRpciAJCazFxVEazLO.png">

页尾不需要任何信息内容时。

### 内容较少

<img class="preview-img" align="right" alt="内容较少" description="" src="https://gw.alipayobjects.com/zos/rmsportal/pjXwqSImebEPYqQrXnBH.png">

页尾内容比较少时。


### 内容较多

<img class="preview-img" align="right" alt="内容较多" description="" src="https://gw.alipayobjects.com/zos/rmsportal/YyhadUOedrCfjGRCmfqP.png">

页尾内容比较多时。