---
description: 整合站內所有功能，包含了網頁導覽、版權宣告、連絡資訊、行動裝置應用等...。
---

# 頁尾 Footer

![](https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-Lp2wGc7aAUsRFsWNP9L%2F-Lp2wIkrDtqOw1z1nUHO%2Ffooter_banner.png?alt=media\&token=82fb9f16-a0b8-43cb-8f62-8f557fc17a96)

### 電腦版與平板

使用**巨型選單** (Big Footer) 的方式來呈現，在資訊架構較為複雜多樣的情況下，採用**巨型選單**可以有效陳列出所有的網頁選項，不僅在操作與瀏覽上方便許多，也可以附帶「網站地圖」之展現功能，猶如一個小型的資訊中心。

在最底部安插了「QR Code」之圖像來提供行動裝置掃描，進而提升欲由行動裝置操作瀏覽之使用者的效率瀏覽便利性。

### 手機版

在手機版本取消了選單與 QR Code 的顯示，為了簡化行動裝置的操作與需要思考的動作，選單統一會由「頁首」來提供操作，而 QR Code 在行動裝置並無太大實質效益，進而取消顯示。

![](https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-LqEiaZZphJ36EWai1vz%2F-LqEie_VBMGMLWsKOemc%2Ffooter_image.jpg?alt=media\&token=e685a11a-6533-469e-8adf-f4fcaeba6d93)

以下為頁尾參考設定值：

```css
footer{ backgroung-color:#eee; padding:40px;}
Lv01_menu{ color:#005798; font-size:16px;}
Lv02_menu{ color:#333; font-size:14px;}
Lv03_menu{ color:#333; font-size:14px;}
footer_button{ background:rgb(0,87,152); background:-moz-linear-gradient(left, rgba(0,87,152,1) 0%, rgba(47,164,219,1) 100%); background:-webkit-linear-gradient(left, rgba(0,87,152,1) 0%,rgba(47,164,219,1) 100%); background:linear-gradient(to right, rgba(0,87,152,1) 0%,rgba(47,164,219,1) 100%);}
footer_buttn_word{ font-size:12px; color:#fff;}
```

以下為頁尾 HTML / CSS ：

{% file src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-Ltd0FI_BcQsxEs8a1j0%2F-Ltd70Q0TtUA4WseOWqf%2Ffooter.html?alt=media&token=6cb4ff86-341b-48ea-8133-48ed3f679a5a" %}
footer.html - 下載
{% endfile %}

{% file src="https://637533841-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Loxp1jRO6hQiR0OZSzm%2F-Ltd0FI_BcQsxEs8a1j0%2F-Ltd76PtBAD5uxcnOm63%2Ffooter.css?alt=media&token=0b41ba6b-4ced-4e11-b0e8-525900cdc373" %}
footer.css - 下載
{% endfile %}
