頁面結構
標題
Header
意思
頁面的頂部區域，通常包含網站標題、導航、主題控制、語言控制和菜單按鈕。
修改方向
變更標題的內邊距、高度、邊框或位置，會改變頂部區域的高度和固定程度。
注意
較高的標題可能會減少可見的內容區域，尤其是在移動設備上。
相關 CSS
headerpaddingheightpositionborder-bottom請求範例
使行動裝置上的標題文字變小，同時保持標題的高度不變。
程式設計
頁面修改用的 CSS 編輯術語
搜尋頁面修改時常用的頁首、按鈕、間距、滑鼠懸停與響應式設計等 CSS 與 UI 術語。
63 個項目
頁面結構
頁尾
Footer
意思
頁面的底部區域，通常用於連結、法律文本、聯絡資訊或小型導航。
修改方向
頁尾的內邊距和邊框變化會影響留白空間以及與上方內容的間距。
相關 CSS
footerpaddingborder-topmargin-top請求範例
為頁腳添加更多的頂部填充，使其不會感覺緊貼內容。
頁面結構
區段
Section
意思
一個大型內容區域，用於組合相關內容，例如標題、工具列表、參考卡或文章塊。
修改方向
區段內邊距會改變頁面的垂直節奏。 背景變化會使區段感覺更獨立。
相關 CSS
sectionpadding-blockborder-topbackground請求範例
減少行動裝置上工具區域的垂直邊距。
頁面結構
容器
Container
意思
一個內部包裝器，可防止頁面內容在大型屏幕上過度擴展。
修改方向
增加最大寬度可以使內容更寬；增加側邊內邊距可以使內容遠離螢幕邊緣。
相關 CSS
max-widthmargin-inlinepadding-inline請求範例
在桌面版上，使主要容器稍微縮小。
頁面結構
卡片
Card
意思
一個框架塊，呈現一個重複的項目，例如工具、參考條目或結果。
修改方向
卡片的內邊距、邊框、圓角和陰影控制每個項目的密度或突出程度。
相關 CSS
borderborder-radiuspaddingbackgroundbox-shadow請求範例
透過減少其內邊距，使參考卡片更加緊湊。
頁面結構
面板
Panel
意思
一個框架工作區域，通常包含控件、輸入、設置或輸出。
修改方向
面板間距和佈局的變化會影響重複使用工具的便利性。
相關 CSS
borderbackgroundpaddingdisplay請求範例
在桌面環境中，將面板控件排列在同一行；在移動設備上，將其堆疊。
頁面結構
導覽
Navigation
意思
一組鏈接或按鈕，用於在主要頁面或類別之間切換。
修改方向
間隙、對齊和可見性規則會改變導航在桌面和移動設備上的行為。
相關 CSS
navdisplaygapalign-items請求範例
在小屏幕上隱藏導航鏈接，並保持菜單按鈕可見。
頁面結構
選單
Menu
意思
一個從按鈕打開的鏈接或操作列表。
修改方向
位置、寬度和 z-index 決定菜單的打開位置以及它是否會出現在其他內容之上。
注意
如果菜單放置在正常的文檔流中，它可能會將整個頁面向下推。
相關 CSS
positionrighttopz-indexwidth請求範例
使選單以浮動面板的形式開啟，並對齊到右側。
頁面結構
側邊欄
Sidebar
意思
一個位於頁面左側或右側的垂直區域，通常用於導航或過濾。
修改方向
側邊欄的寬度和響應規則決定其是否保持可見、折疊或移到內容下方。
相關 CSS
asidewidthpositiongrid-template-columns請求範例
在行動裝置上，將篩選側邊欄移動到內容下方。
頁面結構
英雄
Hero
意思
页面中较大的部分，用于介绍主要目的或操作。
修改方向
英雄區域的內邊距、標題大小和佈局會影響第一印象以及有多少內容可以顯示在第一個視窗中。
相關 CSS
paddingbackgroundmin-heightgrid請求範例
在行動裝置上減少主要標題的大小，以便動作按鈕保持可見。
間距與尺寸
填充
Padding
意思
元素內部的空間，位於邊框和內容之間。
修改方向
增加頂部內邊距可以為元素內部的內容增加更多的空間。
注意
更多的內邊距通常會增加元素的視覺大小。
相關 CSS
paddingpadding-toppadding-rightpadding-bottompadding-left請求範例
稍微增加標題的頂部內邊距。
間距與尺寸
邊距
Margin
意思
元素外部的空間，位於它與相鄰元素之間。
修改方向
增加底邊距會將下一個元素推得更遠。
相關 CSS
marginmargin-topmargin-rightmargin-bottommargin-left請求範例
在主要部分和工具列表之間添加更多的邊距。
間距與尺寸
間隙
Gap
意思
flex 或 grid 佈局中項目之間的間距。
修改方向
增加間距可以使兄弟元素彼此分隔，而不會在整個組件周圍添加額外的空間。
相關 CSS
gaprow-gapcolumn-gap請求範例
減少主題按鈕、語言按鈕和菜單按鈕之間的間距。
間距與尺寸
寬度
Width
意思
元素的水平尺寸。
修改方向
固定寬度可以使元素保持穩定。 `max-width` 允許它在小螢幕上縮小。
相關 CSS
widthmin-widthmax-width請求範例
使選單面板的寬度與其最長的項目相符。
間距與尺寸
高度
Height
意思
元素的垂直大小。
修改方向
固定高度可以保持標題穩定。 max-height 加上 overflow 可以防止下拉選單變得太高。
相關 CSS
heightmin-heightmax-height請求範例
在縮小標題大小的同時，保持標題的高度穩定。
間距與尺寸
最大寬度
Max width
意思
元素允许达到的最大宽度。
修改方向
降低 max-width 可以使文本行更短，並且在大型螢幕上使面板更窄。
相關 CSS
max-widthwidth請求範例
在下拉式選單上設定最大寬度，以避免其覆蓋太多頁面。
間距與尺寸
上/右/下/左
Top / Right / Bottom / Left
意思
與定位元素一起使用的位置偏移量。
修改方向
right：0 將浮動面板對齊到其定位父元素的右邊緣。
相關 CSS
toprightbottomleftinset請求範例
將打開的菜單面板與標題控件的右側對齊。
文字
字體大小
Font size
意思
文本的大小。
修改方向
減少字體大小，有助於較長的標籤適應手機標題等狹小空間。
相關 CSS
font-sizetext-smtext-lg請求範例
使行動裝置上的網站標題變小，但保持在同一行。
文字
字體粗細
Font weight
意思
文本的粗細程度。
修改方向
增加字體粗細，可以使標籤更突出，而不會改變其大小。
相關 CSS
font-weightfont-boldfont-semibold請求範例
使類別標籤稍微加粗。
文字
行高
Line height
意思
每行文本所佔的垂直空間。
修改方向
增加行高可以使段落更容易閱讀；減少行高可以使緊湊的 UI 標籤更清晰。
相關 CSS
line-heightleading請求範例
增加「英雄描述」段落的行高。
文字
字間距
Letter spacing
意思
個別字母之間的間距。
修改方向
較小的間距可以使大寫標籤更清晰。 過多的間距可能會使韓文文本顯得不自然。
相關 CSS
letter-spacingtracking請求範例
從緊湊按鈕中移除負數字母間距。
文字
對齊方式
Text align
意思
文本在其容器内的水平对齐方式。
修改方向
將選單文字右對齊，可以使浮動選單感覺與右邊緣對齊。
相關 CSS
text-align請求範例
將選單項目文字右對齊，並放置在選單面板內。
文字
換行 / 不換行
Wrap / No wrap
意思
長文本是否可以換行，或者必須保持在同一行。
修改方向
No-wrap 保持標題穩定，而換行可以顯示更多文字，但通常會增加高度。
相關 CSS
white-spaceword-breakoverflow-wrap請求範例
保持移動設備上的標題在一行內，並截斷溢出的內容。
文字
截斷 / 省略號
Truncate / Ellipsis
意思
一種用於截斷溢出的單行文本並顯示點的方法。
修改方向
截斷可以防止佈局崩潰，當標籤比預期更長時。
相關 CSS
overflowtext-overflowwhite-space請求範例
在非常小的螢幕上，截斷網站標題。
色彩與背景
顏色
Color
意思
文本或圖標的顏色。
修改方向
變更顏色會影響可讀性和視覺優先順序。
相關 CSS
color請求範例
在深色模式下，使選取的語言文字可見。
色彩與背景
背景
Background
意思
元素內容背後的顏色或圖像。
修改方向
背景變化可以分隔面板、突出顯示活動狀態或提高對比度。
相關 CSS
backgroundbackground-color請求範例
對於深色模式中，使用較暗的背景顏色來表示所選的語言項目。
色彩與背景
透明度
Opacity
意思
元素的透明度。
修改方向
降低不透明度可以使元素更加低調，但可能會降低可讀性。
相關 CSS
opacityrgbacolor-mix請求範例
使停用的控件看起來較暗，但不要使文本難以閱讀。
色彩與背景
梯度
Gradient
意思
兩個或多個顏色之間的平滑過渡。
修改方向
較為柔和的漸層可以增加深度，但過於強烈的漸層可能會使工具感覺不夠實用。
相關 CSS
linear-gradientradial-gradientbackground-image請求範例
保持英雄背景的細緻，避免強烈的漸變。
色彩與背景
輔助顏色
Accent color
意思
一種重複的突出顯示顏色，用於標籤、活動狀態或重要操作。
修改方向
變更重點顏色會改變頁面的視覺風格和重點。
相關 CSS
colorbackgroundborder-coloraccent-color請求範例
對於類別標籤和活動按鈕，請使用相同的綠色強調色。
色彩與背景
對比
Contrast
意思
前景色和背景色之间的差异。
修改方向
更高的對比度可以提高可讀性，尤其是在深色模式和移動設備屏幕上。
相關 CSS
colorbackground-color請求範例
增加深色模式下下拉項目的對比度。
邊框與形狀
邊框
Border
意思
一個元素周圍的邊框。
修改方向
邊框寬度和顏色控制方塊或按鈕與背景的分隔程度。
相關 CSS
borderborder-colorborder-widthborder-style請求範例
在深色模式下，使選單面板的邊框稍微變暗。
邊框與形狀
邊框半徑
Border radius
意思
矩形或按鈕的邊角圓滑程度。
修改方向
較小的半徑感覺更實用和緊湊。 較大的半徑感覺更柔和和更有趣。
相關 CSS
border-radius請求範例
保持卡片的邊框半徑為 8px。
邊框與形狀
邊框陰影
Box shadow
意思
一個元素周圍的陰影，使其看起來高於頁面。
修改方向
強烈的陰影可以使浮動菜單或彈出視窗感覺分層。 過多的陰影可能會顯得沉重。
相關 CSS
box-shadow請求範例
為浮動菜單面板添加一個微妙的陰影。
邊框與形狀
大綱
Outline
意思
一個顯示在元素周圍的線條，通常在鍵盤導航時將其置於焦點狀態。
修改方向
一個清晰的輪廓可以幫助鍵盤用戶了解哪個控件處於活動狀態。
相關 CSS
outlineoutline-offset:focus-visible請求範例
保持圖示按鈕的明顯焦點外框。
邊框與形狀
分隔符
Divider
意思
一條用於分隔部分或組的線。
修改方向
分隔線可以使類別邊界更清晰，而不會增加太多的視覺重量。
相關 CSS
border-topborder-bottomhr請求範例
在菜單類別之間添加微妙的分隔線。
版面與位置
顯示
Display
意思
元素的基礎佈局模式。
修改方向
display：none 隱藏元素。 flex 和 grid 安排子項目。
相關 CSS
displaydisplay: nonedisplay: flexdisplay: grid請求範例
在移動設備屏幕上隱藏桌面導航。
版面與位置
彈性
Flex
意思
一種用於在行或列中排列項目的佈局方法。
修改方向
flex-direction：column 垂直堆疊項目。 flex-wrap 允許項目移動到下一行。
相關 CSS
display: flexflex-directionflex-wrapgap請求範例
將標題控制項放在 flex 行中。
版面與位置
網格
Grid
意思
一種用於在行和列中排列內容的佈局方法。
修改方向
變更網格欄可以控制每行顯示的卡片數量。
相關 CSS
display: gridgrid-template-columnsgrid-columngap請求範例
在寬桌面螢幕上，每行顯示四個工具卡。
版面與位置
對齊項目
Align items
意思
項目在 flex 或 grid 中的交叉軸上的對齊方式。
修改方向
align-items：垂直居中將控制項置中於標題列。
相關 CSS
align-itemsplace-items請求範例
將標題和標題按鈕垂直居中。
版面與位置
內容驗證
Justify content
意思
項目在 flex 或 grid 中的主軸上的分佈方式。
修改方向
justify-content：space-between 將組推到相對的兩側。
相關 CSS
justify-contentjustify-itemsmargin-left: auto請求範例
保持標題在左側，控制項在右側。
版面與位置
位置
Position
意思
元素在頁面或另一個元素中的相對位置。
修改方向
position：absolute 允許下拉選單懸浮，而不會將頁面佈局向下推。
相關 CSS
positionrelativeabsolutefixedsticky請求範例
使選單面板絕對定位，以防止其將頁面向下推。
版面與位置
Z 索引
Z-index
意思
定位元素的堆疊順序。
修改方向
較高的 z-index 值可以將下拉菜單放置在頁面內容之上。
注意
z-index 只有在考慮定位和堆疊上下文時，才會表現出可預測的行為。
相關 CSS
z-indexposition請求範例
將語言下拉菜單移到菜單面板上方。
版面與位置
溢位
Overflow
意思
當內容大於其容器時，會發生什麼？
修改方向
overflow-y：auto 允許較長的菜單滾動，而不是超出螢幕。
相關 CSS
overflowoverflow-xoverflow-ymax-height請求範例
使較長的下拉式選單在 max-height 內滾動。
響應式
中斷點
Breakpoint
意思
佈局發生變化的螢幕寬度。
修改方向
變更斷點可以決定平板電腦的行為更像是手機還是桌面設備。
相關 CSS
@mediasmmdlgxl請求範例
將平板電腦視為桌面，用於頂部導航欄。
響應式
行動裝置
Mobile
意思
適用於小型手機螢幕的樣式。
修改方向
行動裝置樣式通常會縮小字體大小、堆疊欄位，並保持觸控友好的控制。
相關 CSS
@mediamax-widthsm請求範例
在行動裝置上，將卡片堆疊在單一欄中。
響應式
桌面
Desktop
意思
適用於較寬的筆記型電腦或桌面螢幕的樣式。
修改方向
桌面樣式可以使用更多欄位、水平導航以及更寬的內容容器。
相關 CSS
@mediamin-widthlgxl請求範例
在桌面端，請保持類別導航在標題欄中可見。
響應式
視窗
Viewport
意思
瀏覽器或設備螢幕的可見區域。
修改方向
視窗單位使尺寸相對可見螢幕。
相關 CSS
vwvh100vw100vh請求範例
限制菜單的寬度，使其不超過視窗，以防止在手機上溢出。
響應式
響應式
Responsive
意思
一種可以適應不同螢幕尺寸的設計。
修改方向
響應式規則可以使相同的組件在桌面環境中水平顯示，而在移動設備上垂直顯示。
相關 CSS
@mediaclampmin()max()請求範例
使控制項具有響應性，但不要改變其順序。
互動狀態
懸停
Hover
意思
滑鼠指標懸停在元素上的狀態。
修改方向
懸停樣式可以更改背景、文本顏色、邊框或陰影，以顯示某個項目是可交互的。
注意
觸控設備沒有可靠的懸停行為，因此重要的操作也應該通過點擊或點擊來實現。
相關 CSS
:hoverbackgroundcolortransition請求範例
當懸停在菜單項目上時，添加背景顏色變化。
互動狀態
啟用
Active
意思
按鈕或連結被按下時的短暫狀態。
修改方向
啟用樣式可以使按鈕具有觸覺效果，只需稍微改變顏色或位置。
相關 CSS
:activetransformbackground請求範例
為工具欄按鈕添加一個微妙的按下效果。
互動狀態
焦點
Focus
意思
輸入、按鈕或連結當前被選中以進行鍵盤輸入或打字的狀態。
修改方向
焦點樣式使鍵盤導航可見且易於訪問。
相關 CSS
:focus:focus-visibleoutline請求範例
使搜尋輸入框的焦點環與強調顏色相符。
互動狀態
禁用
Disabled
意思
一種控制可見但不可使用的狀態。
修改方向
禁用的樣式通常會降低對比度並移除指標互動。
相關 CSS
:disabledopacitycursorpointer-events請求範例
使停用的按鈕在視覺上顯示為非活動狀態，但仍可讀。
互動狀態
已選擇
Selected
意思
列表中、標籤組或菜單中當前選擇的項目的狀態。
修改方向
已選擇的樣式通常需要比正常項目更強的背景或文字顏色。
相關 CSS
aria-currentdata-statebackgroundcolor請求範例
使選取的類別標籤與其他標籤明顯不同。
互動狀態
開啟 / 關閉
Open / Closed
意思
下拉選單、菜單或手風琴面板目前是否可見。
修改方向
開啟和關閉狀態需要清晰的指示器，例如加號/減號圖示或箭頭旋轉。
相關 CSS
aria-expandeddisplayheightvisibility請求範例
預設情況下，保持所有菜單類別關閉。
UI 元件
按鈕
Button
意思
一個控制元件，在點擊或點擊時執行某個動作。
修改方向
按鈕的內邊距、邊框、顏色和狀態決定了其易用性和重要性。
相關 CSS
buttonpaddingborderbackgroundcursor請求範例
使主要動作按鈕比次要按鈕更突出。
UI 元件
圖示按鈕
Icon button
意思
一個主要由圖標表示的按鈕，而不是文本。
修改方向
穩定的寬度和高度可防止圖標按鈕在狀態更改時發生位移。
相關 CSS
buttonwidthheightaria-labeldisplay: grid請求範例
保持菜單圖示按鈕為正方形，並與語言按鈕對齊。
UI 元件
下拉選單
Dropdown
意思
一個浮動列表，在按下按鈕或選擇控件時出現。
修改方向
下拉選單的位置、寬度、最大高度和 z-index 控制其放置和分層。
相關 CSS
positiontoprightz-indexbox-shadow請求範例
當語言下拉選單打開時，關閉網站選單。
UI 元件
手風琴
Accordion
意思
一個可以打開或關閉的部分，以顯示或隱藏其內容。
修改方向
手風琴通過保持類別關閉，直到需要時，可以縮短較長的菜單。
相關 CSS
aria-expandedheightdisplayoverflow請求範例
為每個菜單類別添加打開和關閉的功能。
UI 元件
標籤
Tabs
意思
一個控制元件，用於在不離開頁面的情況下，在相關視圖之間切換。
修改方向
已選擇的標籤樣式必須清楚顯示哪個視圖是活動狀態。
相關 CSS
role=tablistdisplayborderbackground請求範例
使活躍的標籤背景比非活躍標籤更深。
UI 元件
彈出式視窗
Modal
意思
一個焦點覆蓋面板，出現在頁面上方。
修改方向
彈出式視窗的寬度、背景和 z-index 控制其對頁面的干擾程度。
相關 CSS
dialogposition: fixedinsetz-indexbackdrop請求範例
將模態居中，並使其寬度小於視窗。
UI 元件
工具提示 (Tooltip)
Tooltip
意思
一個顯示在控制附近的小提示，通常在滑鼠懸停或焦點時顯示。
修改方向
工具提示有助於在不添加永久文字的情況下解釋僅使用圖示的按鈕。
相關 CSS
positiontitlearia-describedbyz-index請求範例
添加一個工具提示，用於標記菜單圖標按鈕。
UI 元件
輸入
Input
意思
一個用戶可以輸入文本或值的字段。
修改方向
輸入的內邊距、邊框、佔位符顏色和焦點樣式會影響舒適度和清晰度。
相關 CSS
inputborderpaddingplaceholder:focus請求範例
使搜尋輸入框的寬度為滿寬，並使其在行動裝置上更容易點擊。
UI 元件
徽章 / 標籤
Badge / Chip
意思
一個小的圓角標籤或過濾控制。
修改方向
晶片尺寸、半徑和主動顏色會影響掃描濾鏡的感覺。
相關 CSS
border-radiuspaddingbackgroundfont-size請求範例
使活躍的類別按鈕在視覺上更突出。