客戶至上 (Client-First) — 版本 2.1

時尚指南

客戶至上 (Client-First) 是 Finsweet 創建的一套指南和策略,旨在協助您建立 網頁流程 (Webflow) 網站。

結構類

我們可以在所有或大多數頁面上使用明確且靈活的核心結構。

頁面包裝器
主包裝器
小型 - 容器
中型 - 容器
大型 - 容器
全局內間距
小型 - 全局內間距
中型 - 全局內間距
大型 - 全局內間距
按鈕組

標題

HTML 標籤定義預設的標題樣式。當排版樣式與預設 HTML 標記不符時,使用標題類別。

H1

範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。

氫2

範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。

H3

範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作通常存在的真實文字的佔位符。

H4

範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。範例文字用作通常存在的真實文字的佔位符。

H5
範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字的外觀。
H6
範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字的外觀。範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字的外觀。
H1 標題

範例文字可協助您了解真實文字的外觀。範例文字用作佔位符。

H2 標題

範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。

H3 標題
文字顏色深色

範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作通常存在的真實文字的佔位符。

H4標題

範例文字用作佔位符。範例文字可協助您了解真實文字的外觀。範例文字用作通常存在的真實文字的佔位符。

段落-深色

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。

段落 - 白色

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。

其他 HTML 標籤

HTML 標籤定義預設文字樣式。

所有段落

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。

所有連結
所有連結
所有引用
範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。
所有有序列表
  1. 範例文字用作通常存在的真實文字的佔位符。
  2. 範例文字用作通常存在的真實文字的佔位符。
  3. 範例文字用作通常存在的真實文字的佔位符。
所有無序列表
  • 範例文字用作通常存在的真實文字的佔位符。
  • 範例文字用作通常存在的真實文字的佔位符。
  • 範例文字用作通常存在的真實文字的佔位符。

文字類

當排版樣式與預設 HTML 標記不符時的文字類別。

文字尺寸

文字尺寸 - 大

範例文字用作通常存在的真實文字的佔位符。

文字尺寸 - 中

範例文字用作通常出現在您網站上的真實文字的佔位符。

文字尺寸 - 常規

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。

文字尺寸 - 小

範例文字用作通常出現在您網站上的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。

文字尺寸 - 很小

範例文字用作通常出現在您網站上的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。

文字尺寸 - 17px
範例文字用作通常出現在您網站上的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。

文字樣式

文字樣式 - 刪除線

文字樣式 - 刪除線

文字樣式 - 斜體

文字樣式 - 斜體

文字樣式 - 靜音

文字樣式 - 靜音

文字樣式 - 全部大寫

文字樣式 - 全部大寫

文字樣式 - 全部大寫粗體

文字樣式 - 全大寫粗體

文字樣式 - 不換行

文字樣式 - 不換行

文字樣式 - 2 行
iOS 上的富文本不支援此 CSS 樣式。

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字樣式 - 2 行 的佔位符

文字樣式 - 3 行
iOS 上的富文本不支援此 CSS 樣式。

範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。

文字粗細

文字粗細 - 超粗
文字粗細 - 超粗
文字粗細 - 粗
文字粗細 - 粗
文字粗細 - 半粗體
文字粗細 - 半粗體
文字粗細 - 中等
文字粗細 - 中等
文字粗細 - 正常
文字粗細 - 正常
文字粗細 - 輕
文字粗細 - 輕

文字對齊方式

文字左對齊
文字左對齊
居中對齊
居中對齊
文字居中對齊
文字居中對齊
文字右對齊
文字右對齊

特殊文字

文字樣式 - 突出顯示粗體
文字樣式 - 突出顯示粗體
文字樣式 - 綠色粗體標題
文字樣式 - 綠色粗體標題
文字樣式 - 白色大標題
文字樣式 - 白色大標題
文字樣式 - 大標題
文字樣式 - 大標題
文字樣式 - 灰色間距
文字樣式 - 灰色間距
文字樣式-白色灰色
文字樣式-白色灰色
文字樣式 - CH 正文白色
這是一個展示實例 這是一個展示實例 這是一個展示實例
文字樣式 - CH 粗體白色
這是一個展示實例 這是一個展示實例 這是一個展示實例
文字樣式 - CH 粗體

例子是展示

按鈕

按鈕組合類別系統。

呼籲行動
按鈕文字
呼籲行動 2
按鈕文字
筆記:
呼籲行動 和 呼籲行動 2 不同的是動畫
呼籲行動
紫色
按鈕文字
呼籲行動 2
粉紅色
按鈕文字
呼籲行動
深青色
按鈕文字
呼籲行動
深綠色
按鈕文字
呼籲行動
藍色
按鈕文字
呼籲行動 - 漸變 - 淺紫
按鈕文字
呼籲行動 - 白色 - 無線
按鈕文字
呼籲行動線式
按鈕文字
呼籲行動 - 線型 - 2
按鈕文字

顏色

管理重複文字和背景顏色。

文字顏色

文字顏色 - 深青色
深青色文字
文字顏色 - 綠色
綠色文字
文字顏色 - 白色
白色文字
文字顏色 - 紅色
紅色文字
文字顏色 - 金色
金色文字
文字顏色 - 深灰色
文字顏色 - 深灰色
文字顏色 - 淺綠色

範例文字用作佔位符。

白色
白色文字請不要再使用它

背景顏色(最新)

背景色 - 白色
背景顏色 - 北極藍
背景顏色 - 灰色
背景顏色 - 深北極藍
背景顏色 - 深青色
背景顏色 - 深青色

背景顏色(過去的會話)請不要再使用它

北極藍會話
灰色會話
深北極藍會話
深青色會話
梯度會話
白色會話
首頁區段
短期課程 首頁區段
ECOMBC
首頁區段
香港廣播公司

最大寬度

使用最大寬度CSS 屬性將內部內容包含到最大寬度。

最大寬度 - 全
最大寬度全 - 平板電腦
最大寬度 - 全移動肖像
最大寬度 - 全移動橫向
最大寬度 - 特大
最大寬度 - 很大
最大寬度 - 大
最大寬度 - 中
最大寬度 - 小
最大寬度 - 很小
最大寬度 - 特小

內邊距

實用間距系統 - 內邊距類別。 [內邊距方向] + [內邊距大小]。

方向課程

底部內邊距
頂部內邊距
垂直內邊距
水平內邊距
向左內邊距
向右內邊距

尺寸等級

內邊距 - 0
內邊距 - 微小
內邊距 - 特小
內邊距 - 很小
內邊距 - 小
內邊距 - 中等
內邊距 - 大
內邊距 - 很大
內邊距 - 特大
內邊距 - 巨大
內邊距 - 很巨大
內邊距 - 特巨大
內邊距 - 自訂1
內邊距 - 自訂2
內邊距 - 自訂3

邊距

實用間距系統 - 填充類別。 [邊距方向] + [邊距大小]。

方向課程

底部邊距
頂部邊距
垂直邊距
向左邊距
向右邊距
邊距水平

尺寸等級

邊距 - 0
邊距 - 微小
邊距 - 特小
邊距 - 很小
邊距 - 小
邊距 - 中等
邊距 - 大
邊距 - 很大
邊距 - 特大
邊距 - 巨大
邊距 - 很巨大
邊距 - 特巨大
邊距 - 底部 - 20px
邊距 - 底部 - 20px
邊距 - 頂部 - 底部 - 24px

間隔

該項目的統一間隔系統。

間隔 - 微小
間隔 - 特小
間隔 - 很小
間隔 - 小
間隔 - 中等
間隔 - 大
間隔 - 很大
間隔 - 特大
間隔 - 巨大
間隔 - 很巨大
間隔 - 特巨大

圖示

統一圖示大小。 icon-height設定圖示的高度。 icon-1x1設定圖示的高度和寬度。

圖標高度 - 小
圖標高度 - 中
圖標高度 - 大
圖示2
標誌圖示
圖示 - 1x1 - 小
圖示 - 1x1 - 中
圖示 - 1x1 - 大

有用的公用設施系統

我們喜歡在大多數專案中使用實用程式類別來加快建置速度。

隱藏
該元素被隱藏
隱藏平板電腦
隱藏手機肖像
隱藏移動景觀
溢出可見
溢出隱藏
自動溢出
溢出滾動
指針事件自動
指針事件無
間距清潔
居中對齊
z - 索引 - 1
z - 索引 - 2
繼承顏色
長寬比平方
縱橫比肖像
縱橫比景觀
長寬比寬螢幕

網路流元素

應用了客戶端優先類別的本機 Webflow 元素。

表單元件

使用資料夾的表單元件範例

謝謝你!您的提交已收到!
哎呀!提交表單時出現問題。
文本富文本

標題 1

標題 2

標題 3

標題 4

標題 5
標題 6

帶有連結的範例文字被用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您的網站上的外觀。範例文字用作真實文字的佔位符。範例文字用作真實文字的佔位符。範例文字用作真實文字的佔位符。

  • 範例文字用作通常存在的真實文字的佔位符。
  • 範例文字用作通常存在的真實文字的佔位符。
  • 範例文字用作通常存在的真實文字的佔位符。
  1. 範例文字用作通常存在的真實文字的佔位符。
  2. 範例文字用作通常存在的真實文字的佔位符。
  3. 範例文字用作通常存在的真實文字的佔位符。
範例文字用作通常存在的真實文字的佔位符。範例文字可協助您了解真實文字在您網站上的外觀。範例文字用作通常存在的真實文字的佔位符。