自訂樣式
Last updated on 10/29/2024@mrbirddev
介紹
Slidde.co 提供了一種獨特的網頁設計方法,允許您在每個組件中直接使用 CSS 來自訂樣式。與 Webflow 等傳統網站建構器不同,Slidde.co 的特色在於:
- 標準 CSS 使用:
- 實現任何網站樣式。
- 將樣式匯出到任何網站建構器,使其在切換到基於代碼的開發時可重用。
- 預設值:
- 受 Tailwind 等庫的啟發,Slidde.co 提供樣式的預設值,允許您通過滑鼠點擊選擇選項,而不是輸入。
- 清晰結構:
- 即使是複雜的樣式,設置仍然清晰,不會擾亂 DOM 結構。
範例組件:水平導航欄
讓我們以一個複雜的組件——水平導航欄為例,探索五個自訂區域:
- 自訂樣式:整個導航欄的 CSS。
- 容器自訂樣式:左側容器的樣式,通常放置標誌或標題。
- 按鈕自訂樣式:桌面按鈕的樣式。
- 按鈕啟用樣式:啟用的桌面按鈕樣式。
- 切換按鈕自訂樣式:移動端漢堡菜單按鈕的樣式。
您可以在這裡查看完整的導航欄範例 範本。
高級 CSS 語法
Slidde.co 支援高級 CSS 語法以實現更精確的樣式:
- 點分隔符:使用
.
將屬性與修飾符分隔。 - 駝峰式命名:使用駝峰式命名法來命名 CSS 屬性。
範例:
&:hover.color
:懸停時的字體顏色。&:hover.borderColor
:懸停時的邊框顏色。padding
:所有螢幕尺寸的內邊距。md.padding
:大於中等(桌面)螢幕的內邊距。
要為移動端和桌面設置不同的內邊距:padding: .5rem
和 md.padding:2rem
。
標準 CSS 選擇器:
& > img.height
:當前元素內第一層img
元素的高度。&:first-child.color
:針對第一個子元素的::first-child
偽類。&::after.content
:使用::after
偽類來添加額外的元素。
遵循這些指導方針,您可以有效地使用 Slidde.co 精確且輕鬆地設計和自定義您的網頁組件。