Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
改變元素在不同狀態下的外觀和行為,為其增加互動性。
您會於本文章學習到:
在不同的狀態下為元素設計樣式
為鏈接元素的當前狀態設計樣式
理解樣式從哪裡繼承
當您從選擇器的狀態下拉菜單中選擇一個狀態時,綠色的狀態類會出現在選擇器字段的末尾。這表示您正在為元素設計該狀態的樣式。
無論處於什麽狀態,所做的改變將在畫布上可見,直到取消選擇或以其他方式離開該狀態。
從下拉菜單中選擇您要設計的狀態。 在樣式面板上所做的任何改變都會為所選的狀態保存。
None 無狀態 無狀態是元素的默認狀態。
若您選擇了另一個狀態並對其進行了樣式設計,您可以透過從狀態下拉菜單中選擇 "None"來返回到默認狀態的樣式。
Hover 懸停狀態 鼠標指針懸停在元素上時的狀態。 在大多數觸摸設備上是不可能懸停的,所以在為較小的斷點設計時要注意這點。
Pressed 被按下的狀態 點擊元素時顯示的狀態。 這個狀態繼承了懸停狀態的樣式,因為按壓狀態實際上是懸停狀態的一個狀態。
Focused 焦點狀態 您可以關注某些交互式元素,比如按鈕和鏈接,而不透過使用鍵盤來激活它們。用鼠標或指針設備點擊交互式元素,既能聚焦又能激活它們。這種狀態模擬了用鍵盤或鼠標或手指點擊互動元素時的聚焦。
Focused (keyboard) 焦點(鍵盤)狀態 和聚焦狀態樣,這個狀態模擬的是當壹個交互式元素被聚焦但不壹定被激活的時候(例如,通過用妳的鍵盤對該元素做標簽)。請註意,當聚焦時,它總是適用於文本輸入字段,不管它們是以何種方式聚焦的(例如,用鼠標、鍵盤等)。
為了使網站對那些依靠鍵盤導航的訪問者更方便,重要的是要對這種狀態進行風格化處理,使互動元素的位置在頁面上很明顯。我們建議在互動元素上設置一個輪廓,因為它不會影響元素的布局。
Visited 被訪問的狀態 被訪問的鏈接的狀態。這個狀態繼承了無狀態的樣式。
對於被訪問的狀態,您只能對文本顏色、背景顏色和邊框顏色進行設計。背景顏色只有在它已經被設置在不同的狀態下才會出現。
占位符 這個狀態將在表單字段的狀態下拉菜單中可用。它允許妳將占位符文本的樣式與輸入的文本分開,後者繼承了默認狀態的排版樣式。
對於占位符文本,您可以設計排版、背景和陰影。
勾選的狀態 對於在元素設置中啟用了自定義樣式的表單復選框和單選按鈕,這個狀態將在狀態下拉菜單中可用。它允許您對復選框或單選按鈕的檢查狀態進行樣式設計。
鏈接元素也有一個當前狀態。在當前狀態上添加自定義樣式時,它將反映妳的鏈接元素在用戶處於該狀態時的樣子。
當前狀態(選擇器中的綠色標簽) 當鏈接元素被鏈接到當前頁面、章節或標簽時,當前狀態會自動添加到所有鏈接標簽或所選鏈接元素的類中。
選擇一個鏈接的當前狀態 要訪問任何鏈接塊、文本鏈接、按鈕、導航鏈接的當前狀態。
選擇鏈接元素,按D鍵打開鏈接設置
選擇頁面選項,從下拉菜單中選擇當前頁面(如果鏈接在主頁上,就選擇主頁)。
按S鍵,進入樣式面板。如果已經給鏈接應用了一個類別,那麽在選擇器領域,綠色的當前狀態已經激活。如果沒有,點擊選擇器,從打開的下拉菜單中選擇"所有鏈接"標簽。當前的狀態也將被應用到該標簽。
您也可以在鏈接設置中選擇頁面部分的選項。當妳滾動到頁面的那個部分時,當前狀態將出現在該元素的選擇器區域。這對於在妳滾動時固定的按鈕或鏈接的樣式設計很有用。
對當前狀態進行造型後,可以更新鏈接設置,將妳的按鈕和鏈接元素鏈接到任何其他頁面或頁面部分。
選擇一個標簽的當前狀態 您可以選擇對當前標簽的樣式與普通標簽不同,以區分活動和非活動標簽。例如可以編輯字體顏色和背景顏色,使其與正常標簽不同。
選擇活動的標簽鏈接
給它分配一個類別。當前狀態會自動出現。
樣式離開
當前狀態指標顯示在選擇器中時,為鏈接的默認狀態設計樣式 想對默認狀態進行造型時,有幾種方法可以移除當前狀態。最快的方法是在繼承菜單中選擇默認的基類。
另外,您可以在元素設置面板中暫時刪除鏈接設置,對鏈接的類進行樣式化,然後重新配置鏈接設置。如果不想刪除鏈接設置,可以複製鏈接元素,在複製的元素上刪除鏈接設置,編輯類,完成後再刪除複製的元素。
所有的狀態都從"None 無"狀態繼承樣式。您可以通過點擊選擇器字段上方的繼承指示器來了解樣式是從哪裏繼承的。
在為一個狀態添加樣式後,狀態菜單的下拉圖標會變成藍色。當打開狀態下拉菜單時,您會看到藍色的圓圈,表示該狀態下有本地樣式。
在 Webflow Designer 中找到學習的最基本方法。
WebFlow https://webflow.com/ 註冊後,即可以進入 WebFlow 的控制台。
點擊下方的「 New Site 」按鈕,就可以創建項目了。免費帳號可以創建 2 個 Project。
整體來說 WebFlow 的介面上,可以修改HTML,更新CSS,做交互,甚至動畫。其 WebFlow 介面包括了三大部分:介面控制台(左側)、細節調整(右側)、畫布(中央)。
顯示您的工作何時被保存 - 用灰色省略號 (...) 表示。Webflow 會自己自動儲存專案,當自動儲存時,用綠色複選標記表示。若使用 Mac 中按 CMD+S 或在 Windows 中按 CTRL+S 來手動保存項目。單擊此圖標不會保存您的專案。
最上面的4個圖型按鈕非常直觀:桌面電腦(包括筆記本)、平板、手機橫屏、手機豎屏。當你點擊相應的圖標后,就可以預覽相應的尺寸內容。這邊要注意的是,要從桌面電腦(星星)的地方去調整作品,Webflow有一個最棒的功能是他可以自動先幫你調整所需的大小。當然每個尺寸都必須要去調整一次才會更完美!
設計介面中主要有 4 個主要面板:
CSS面板設置 — 快捷鍵:S 使您可以訪問可用於選擇元素的所有 CSS 屬性。您只需在相應的字段中輸 入這些值,即可立即在畫布上查看應用於您的元素的樣式。
HTML元素管理 (D) — 快捷鍵:D 使您可以訪問可用於選擇HTML元素的各種設置。
CSS管理 — 快捷鍵:G 顯示您在項目中創建或編輯的類、組合類和標籤的完整列表。這是重命名甚 至清理任何不再使用的樣式的快速方法。了解更多。
動畫管理 — 快捷鍵:H 允許您創建動畫並將它們應用於所選元素。
按鈕欄顯示所選元素的層次結構。您可以看到它的位置,在哪些其他父元素中,您甚至可以通過單擊此麵包屑欄中的標籤來選擇任何父元素。
以上這些都會是你最常使用的幾個板塊。
自定義您的元素相對於他們自己的位置,相對於父級或同級元素,或相對於窗口的位置。
Static positioning
Relative positioning
Absolute positioning
Fixed positioning
Sticky positioning
位置屬性決定了元素在頁面上的位置。
設置位置後,您可以對頂部、底部、左側和右側的屬性進行調整。
每個元素在默認情況下都有一個靜態的位置,該元素會堅持在文檔流中,且按照它們的堆疊順序出現。 如果沒有添加樣式,它們不會重疊,不同的元素也不會有不同的默認值。 將元素設置為靜態的唯一原因是為了移除應用於它的位置。
Relative元素是相對於其正常位置的。沒有添加其他定位屬性(上、左、下或右)的相對設置,將不會受到影響。 設置一個相對元素的頂部、右側、底部和左側屬性將使它遠離正常位置。其他內容不會調整以適應該元素留下的任何間隙。
一個具有相對位置的元素可以與其他元素重疊,而不影響它們的位置或中斷正常的文檔流程。
它引入了對該元素的z-index的使用。這對靜態元素是不起作用的。即使您不設置z-index值,這個元素仍然會出現在它重疊的任何其他靜態元素的上面。Z-index對任何沒有設置為靜態的元素都是可用的。
它限制了絕對定位的子元素。任何作為相對元素的子元素,或除靜態以外的任何位置的元素,都可以在該元素中進行絕對定位。
位置不受其他元素的影響,也不影響其他元素的位置。
默認情況下,該元素的位置是相對於主體元素的,但如果父元素被設置為靜態以外的任何元素,您可以將任何Absolute元素定位在該元素內。
使用定位屬性top、left、bottom和right來設置位置--這些值將是相對於設置為靜態以外的下一個父元素的。
固定元素的位置是相對於視口或瀏覽器窗口的。
當您向下滾動頁面時,固定元素會保持固定的位置。這種位置設置通常用於固定導航。
元素將根據瀏覽者的滾動位置,在相對和固定的位置之間交替進行。
Sticky positioning元素是相對於文檔流的,直到達到一個定義的滾動位置。在這一點上,它將切換到其父元素的固定元素的行為。一旦元素到達其父元素的底部,它將停止滾動。
您必須為頂部、底部、左側或右側指定至少一個位置值,Sticky positioning才能發揮作用。如果任何父元素有設置高度或溢出設置為隱藏、滾動或自動,則Sticky positioning可能無法正常工作。
調整顯示屬性來決定一個元素的基本布局行為。
位於樣式面板中的顯示設置,控制一個元素的布局行為和該元素周圍的內容。
您可以在這裡控制元素之間的顯示方式--它們是堆疊在一起還是並排排列。
在樣式面板的布局部分,顯示設置包括六個顯示選項。這六個選項依序分別是
Block
Flexbox
Grid
Inline block
Inline
Display none
Block是大多數元素的默認顯示設置。
每個元素在一個新的行上開始,並承接其父元素的全部寬度,除非設定了自定義寬度。
不管它的寬度如何,每個元素都會把下一個元素推到一個新行上。
具有Flexbox的元素,水平或垂直地排列子元素。
樣式面板中的布局部分還包括選擇Flexbox時的方向、對齊和子句的設置。 您可以自定義子元素如何堆疊、何時包裹以及如何在flexbox內對齊。
Flexbox的對齊設置被設定為拉伸。五個對齊設置是置頂、置中、置底、拉伸和基線。 創建一個Flexbox的容器時,所有子元素都可以在設置中添加和覆蓋布局。
您可以自定義子元素在Grid組件中的定位、對齊和分布方式:容器、單個單元格、單元格組或軌道。
編輯Grid面板包括列和行的間隙大小的輸入字段,方向選項和添加列和行的部分。還有一個帶有加號圖標的"區域"部分,用於添加一個新的區域。 透過網格布局,你可以指定列和行之間的間隙,也可以使用FR單元來創建完全流動的網格布局。
當選擇一個Grid容器的子元素時,網格子單元設置會出現在樣式面板的頂部。這些設置允許你覆蓋網格容器的對齊和調整的設置。
Inline block是並排堆疊的,其寬度由裡面的內容決定。
當內容碰到父元素的邊界時,裡面的元素也會被包起來。在樣式面板中,你可以對內嵌塊元素應用特定的寬度、高度、填充和邊距設置。
H1元素選擇Inline block。
四個標題元素都在同一行。
在左邊的尺寸面板上調整H1標題的寬度。
標題元素在同一容器中被包裹成自己的行,並往下移一行。
Inline是任何文本內容的默認顯示設置。
您可以透過改變一個Inline元素的外距和內距來改變它的布局,但不能改變它的寬度和高度。
完全隱藏一個元素。
設置為Display: none的元素不會被瀏覽器渲染,這對於改變內容在移動設備上的顯示方式很方便。
Selector (選擇器)
Layout (布局)
Spacing (空間)
Size (尺寸)
Position (位置)
Typography (字體)
Background (背景)
Borders (邊框)
Effects (效果)
應用過濾器、不透明度、變換和其他效果來增強元素的互動性。
混合模式
不透明性
輪廓
盒狀陰影
二維和三維變換
濾鏡
背景濾鏡
光標
Webflow中的混合模式為元素提供了各種不同的方式,使其與下面的其他元素混合(或重疊),而這些都不需要自定義代碼。
Webflow為您處理混合模式的CSS屬性,並允許您設定元素的內容將如何與該元素的父級內容和元素的背景混合。
總共有16種混合模式,這些模式分組包括:
• 默認模式(正常) • 變暗模式(變暗、相乘和燒色) • 變亮模式(變亮、屏幕和顏色閃避) • 對比模式(疊加、柔光和硬光) • 比較模式(差異和排除) • 複合模式(色相、飽和度、顏色和光亮度)
設定一個元素及其子元素的透明度水平,可以在效果設置中改變不透明度。您可以透過在輸入框中輸入一個值或者拖動不透明度滑塊到想要的值來改變不透明度。
輪廓是為了幫助網站訪問者在您的設計中進行導航,使訪問者清楚地知道他們正在與特定的元素進行互動。 如果使用者再次按下鍵盤上的Tab鍵,輪廓就會出現在下一個新關注的元素周圍。
在輪廓設置中,有以下控制:
樣式:實線、虛線或點線
寬度:輪廓的厚度,這個值可以使用單位下拉列表中的任何CSS單位
偏移:輪廓與元素的邊緣或邊界之間的空間大小,這個值可以使用單位下拉列表中的任何CSS單位
顏色:輪廓的顏色
重要提示 如果想刪除輪廓樣式並恢復到默認的瀏覽器設置,為它選擇"無"可能很誘人,但請記住,這不會刪除任何其他已經設置的屬性(例如,寬度、偏移量或顏色),而且有可能會使輪廓完全消失。
盒狀陰影在元素的矩形邊界之外或之內添加造型。
盒狀陰影可以用來為按鈕、部分、div塊或項目中的任何其他元素添加焦點或深度。
您可以在樣式面板中為大多數效果添加多個層,例如可以為元素添加多個盒狀陰影並疊加。
在效果設置中,可以透過選擇眼睛圖標來切換每一層的可見性,選擇垃圾桶圖標來刪除每個層。要改變每個效果的順序,只需選擇想重新排序的層並拖移到想要的順序號即可。
在盒子陰影設置中,有以下控制:
類型:在元素的邊界內或邊界外應用陰影
角度:改變箱體陰影的方向
距離:在設定的角度指定的方向上將陰影移近或移遠
模糊:影響陰影模糊的集中程度
尺寸:指定陰影相對於它所在元素的邊界的分布情況
顏色:改變陰影的顏色和不透明度
從 "樣式"面板>"效果">"二維和三維變換"中添加變換,以操縱元素的外觀和在不同狀態下的位置,如懸停。
有4種類型的變換:
移動
縮放
旋轉
傾斜
點擊二維和三維變換旁邊的省略號,進入變換設置,調整變換原點、背面可見度、自我視角和兒童視角。
與堆疊效果類似,可以添加一種以上的變換類型,而不會丟失之前的任何設定。使用加號圖標來添加一個額外的變換。
濾鏡對元素應用獨特的視覺效果,也可以用來創建懸停狀態的變化。 您可以在圖像、背景視頻或任何其他元素上添加濾鏡,改變整個元素的外觀,包括其子元素。
要添加一個濾鏡,使用添加選單,在下拉選單中選擇任何一個濾鏡的效果。
模糊:模糊元素的內容
亮度:指定0到200%之間的亮度量
對比度:指定0到200%之間的對比度
色調旋轉:轉移圖像或元素的顏色/色調。值的單位是度。0或360的值會使它恢復到原來的色調。
飽和度:顏色的強度
灰階:將所有顏色轉換為灰階
顛倒:顛倒元素中的所有顏色
Sepia:給圖像復古的淡黃色外觀
您添加或調整的任何濾鏡將在畫布上預覽,您也可以為元素添加多個濾鏡,並在濾鏡設置中切換它們的可見性和順序。
給任何元素添加背景濾鏡,可以讓元素邊界內的透明區域應用濾鏡效果(如模糊、色移、對比等)。元素後面任何透明區域可見的東西都會受到背景濾鏡的影響。
您也可以對一個元素應用多個背景濾鏡,將背景濾鏡分層並組合在一起,以創造各種視覺效果。
注意 因為背景濾鏡適用於元素後面的所有東西,必須使元素、元素的部分或其背景至少部分透明才能看到這個效果。
總共有8個背景濾鏡,這些濾鏡的分組包括:
一般(模糊)
顏色調整(亮度、對比度、色調旋轉和飽和度)
色彩效果(灰階、反轉和棕褐色)
使用正確的光標對於向用戶表明他們在瀏覽頁面時將會發生什麽很重要,但使用與結果不匹配的光標會導致混亂或不作為。
默認的光標值是自動。它將為特定的元素類型呈現默認的光標,這是由瀏覽器的默認設置所指定的。例如懸停在連結上會顯示指針光標,而懸停在文本上會顯示文本光標。
在大多數情況下,最好是保持這個默認設置,讓瀏覽器選擇正確的光標,也就是說您可以通過改變樣式面板中的光標值來覆蓋瀏覽器對某個元素的默認光標。
設定元素的背景讓您控制外觀和可讀性。在樣式面板的 "背景"部分,您可以為大多數元素添加背景圖像、漸變或顏色(視頻和圖像等媒體元素除外)。
背景顏色
背景圖片
漸層
顏色疊加
背景視頻
透過輸入顏色值(十六進制\rgba\顏色名稱)或使用取色器選擇顏色,您可以在任何元素上設置一個背景顏色,除了圖像和視頻。
一旦設置了Body (All pages)的背景,您添加的任何元素都會默認為這個背景樣式。而且不僅可以對背景顏色進行修改,還可以對任何樣式屬性進行修改。
您可以用2種方式為Body (All pages)標簽設置樣式。
選擇Body元素,從樣式面板的選擇器字段下拉選擇Body (All pages)標簽
選擇任何元素,從繼承菜單中選擇Body (All pages)標簽--所有元素都繼承Body (All pages)標簽的樣式。
大多數元素默認透明背景。有些元素有默認的背景顏色,則可以透過元素上設置的背景顏色來覆蓋。
在風格面板的背景部分,添加背景圖片的菜單。
滾動到樣式面板中的背景
點擊選擇圖像,從資產面板中選擇一個圖像。
勾選@2x(將圖像寬度設置為其原始尺寸的一半,以便在HiDPI設備上清晰地呈現出來)。
在樣式面板的背景部分添加背景圖像的菜單中,尺寸選項被突出顯示。 要指定背景圖像的大小,可以使用自定義尺寸或預設之一。
自定義:決定了背景圖像的寬度和高度,可以使用百分比值。設置背景圖像的比例大於元素,使用高於100%的任何百分比。
Cover:將圖像縮放以填充並覆蓋整個元素的背景,覆蓋任何設定的寬度和高度。圖像可能會被修剪,這取決於元素的長寬比、屏幕尺寸和圖像的情況。
Contain:縮放背景圖像,使其包含在元素內。這個值也覆蓋了任何設定的寬度和高度。
默認情況下,背景圖像在垂直和水平方向上都會重復。 您可以選擇水平、垂直或完全不重複背景。
您可以在背景設置中選擇滾動時背景圖像的行為。
不固定:圖像隨著頁面的滾動而滾動 固定:圖像在滾動時保持原位
漸層可以單獨使用,也可以在現有的背景顏色或圖像上使用。
線性漸變
2. 徑向漸變
您可以在任何背景上添加一個顏色覆蓋。使用顏色選擇器來選擇顏色,然後設定不透明度值。
添加和堆疊多個背景圖像、梯度和顏色覆蓋,以創建分層效果。要重新排列背景圖層,把鼠標懸停在圖層上,點擊左邊的虛線垂直線。
點擊眼睛圖標來切換圖層的可見性。要刪除任何層,點擊垃圾桶的 "刪除 "圖標。
背景視頻是無聲的、循環的視頻,作為內容的特定部分的背景。這些視頻有助於吸引網站訪問者和抓住注意力。
把背景視頻放到畫布上時,您會被提示上傳視頻。
背景視頻有三個默認的設置。循環視頻,自動播放視頻,以及播放/暫停按鈕。
循環視頻 啟用時,背景視頻會連續循環播放。
自動播放視頻 啟用時,背景視頻在頁面加載時就開始播放。
播放/暫停按鈕 在背景視頻上提供一個內置的播放/暫停按鈕,您的網站訪問者可以用它來開始和停止視頻。
背景視頻接受小於30MB的視頻文件,格式如下:webm, mp4, mov, ogg。
背景視頻文件名不應包括空格或特殊字符(破折號除外),視頻應針對網絡進行優化以獲得最佳性能。
雙擊視頻或進入設置面板來打開背景視頻設置。
通過選擇元素並按回車鍵來訪問背景視頻設置。壹旦設置窗口打開,點擊替換視頻來上傳和轉碼壹個新視頻。
定義一個元素的大小,設置最小和最大的寬度和高度值,並隱藏溢出元素邊界的內容。
在響應式網頁設計中,寬度和高度屬性的大小基於裡面的內容,但可以更具體地使用一些來定義。
在本課中,我們將介紹這些:
自動調整尺寸
像素
百分比
Ems
Rems
基於視窗的單位
小數點單位
字符單位
最小和最大尺寸
溢出
默認情況下,元素的大小是根據裡面的內容自動決定的。
像素值可以與圖像和其他有指定像素值的元素按比例縮放。
百分比指的是元素在父元素裡所佔的比例大小。
當您想在一個有文字的元素上設置比例填充時,Ems就很實用。
每個瀏覽器都有一個默認的字體大小,通常為16px。 Ems查看它們的父元素並按比例調整字體大小。
假設一個字體是16像素: 1個em是16像素 2個ems=32像素 1.5個ems=24像素
您也可以在一個段落的父元素上設置字體大小,比如Div:
選擇父元素
在樣式面板中的"排版"下,改變字體大小(例如:20像素)。
當父元素為20像素時: 1個em=20像素 2個ems=40像素 3個ems=60像素
Rems是相對於HTML字體大小而言的。
Rem的計算方法是將Rem值乘以HTML字體大小(它依循瀏覽器的字體大小,除非您在代碼中手動改變它),這樣做的好處是尊重用戶的瀏覽器偏好。
VW是對瀏覽器視窗寬度的測量,根據視口的寬度按比例進行縮放。
小數單位(fr)在任何設置為網格的地方都可以使用。 如果有一個4列的網格,每一列默認為1fr--1fr等於1/4的網格。 如果您增加了一列,每個fr就等於1/5。您可以改變這些值(例如,將第一列設置為2fr)。小數單位會自動縮放事物--一切都會自動計算,包括列的間隙。
字符單位非常適用於確定段落或標題的大小,以限制人們每行所需閱讀的字符數。
例如一個段落的最大寬度為60ch,那麽它就會採用選定的字體(該段落的字體),並將該段落的邊界設置為等於60個零的寬度。
當您試圖限制字符數時,CH讓您在文本元素上設置寬度(基於字體的零字符寬度。)
如果把元素的寬度設置為50%,它就會占用其父元素內50%的空間。 當調整視窗大小時,該元素就會相應地縮小。
如果在元素上設定了最小(如200px)和最大(如500px)的寬度,它就會保持50%的寬度,並且在視窗收縮和擴展時保持在最小(200像素)和最大(500像素)的寬度之內。
提示 使用最小值來刪除元素的任何明確的高度,而將最小高度設置為100vh。現在妳的部分不會短於視口高度的100%。 如果想把元素的高度設置為800像素,把它設置為最小高度意味著它將是800像素高,同時尊重其內容的寬度(如果需要,它可以變得更高)。
假如您不希望一個段落的寬度超過60個左右的字符,可以選擇段落標簽,設定最大寬度(例如,60ch),則現在的默認值將自動限制在60個字符的段落(不管是什麽字體的60個零)。
當元素上設置了寬度和高度,但沒有足夠的空間容納裡面的內容時,溢出就會自動發生。默認情況下,溢出的文本是可見的。 選擇元素並點擊進入樣式面板>尺寸>溢出,您會看到第一個圖標,可見(眼睛)圖標,被默認選中,這意味著溢出的文本默認為可見。
Hide:隱藏夾住(隱藏)元素邊界外的內容。
Scroll:取決於操作系統和瀏覽器,可以顯示滾動條,方便使用者可以滾動瀏覽Div塊的內容。
Auto:允許使用者滾動(只有在有足夠的內容溢出的情況下才能這樣做)。