佈局基礎
Last updated on 12/2/2024@mrbirddev
slidde 網頁的結構
Slidde.co 使用一個簡單的四層結構:
頁面
(全域樣式)
幻燈片
(內容分段)
容器
(響應式寬度,多列)
內聯元素
(特定內容)
...
內聯元素
(特定內容)
...
...
...
頁面
頁面 層位於頂部,用於設置全域樣式,如字體、顏色和連結樣式,因為 CSS 屬性是可繼承的。
您可以選擇使用 CSS 變數 來使您的模板更易於使用。
如果您無法直接選擇 頁面 元素,請使用工具欄中的 選擇頁面 選項。
哈希部分 功能可以模擬多頁面網站。查看此示例:Demo Link
幻燈片
幻燈片 是 頁面 下的第一級元素,用於分段內容。
- 簡單的頁面,如 "link in bio" 頁面,可能只有一個 Slide。
- 複雜的登陸頁面可能包括多個部分,如 #header, #hero, #works, #contact, #footer。
錨點 ID (HTML ID) 本質上是一個 HTML ID。根據 幻燈片 內的內容命名它們,以便使用類似 “#ID” 的鏈接輕鬆導航。了解更多關於跳過鏈接。
要從最終網站中隱藏 幻燈片 但保留它們,請檢查 隱藏 屬性。這類似於 PowerPoint 的隱藏幻燈片,也可用於教程。
粘性 功能用於浮動導航欄或其他元素。查看示例:Sticky Demo
容器
容器 管理響應式寬度和多列顯示。
- 移動和桌面寬度通常不同。使用 寬度 屬性在 容器 中實現跨設備的自適應寬度。
- 列定義了容器中的列數。您可以設置像 x/12 這樣的寬度(例如,兩個 6/12 列,每個佔 50% 寬度)。
每個列還可以有水平和垂直對齊設置。
其他
其他元素是內聯元素,可以放置在容器內。
通過遵循這種結構化的方法,您可以輕鬆使用 Slidde.co 創建視覺上吸引人的響應式網頁。