程式設計
搜尋頁面修改時常用的 header、button、spacing、hover、responsive 等 CSS 與 UI 術語。
63 個項目
頁面結構
Header
The top area of a page, usually holding the site title, navigation, theme controls, language controls, and menu button.
Changing header padding, height, border, or position changes how tall and fixed the top area feels.
A taller header can reduce the visible content area, especially on mobile.
headerpaddingheightpositionborder-bottomMake the mobile header title smaller while keeping the header height the same.
頁面結構
Footer
The bottom area of a page, often used for links, legal text, contact information, or small navigation.
Footer padding and border changes affect the amount of breathing room and the separation from the content above.
footerpaddingborder-topmargin-topAdd more top padding to the footer so it does not feel attached to the content.
頁面結構
Section
A large content area that groups related content such as a hero, tools list, reference cards, or article block.
Section padding changes the vertical rhythm of the page. Background changes make the section feel separate.
sectionpadding-blockborder-topbackgroundReduce the vertical padding of the tools section on mobile.
頁面結構
Container
An inner wrapper that keeps page content from stretching too wide on large screens.
Increasing max-width makes content wider. Increasing side padding keeps content away from screen edges.
max-widthmargin-inlinepadding-inlineMake the main container a little narrower on desktop.
頁面結構
Card
A framed block that presents one repeated item, such as a tool, reference entry, or result.
Card padding, border, radius, and shadow control how dense or prominent each item feels.
borderborder-radiuspaddingbackgroundbox-shadowMake the reference cards more compact by reducing their padding.
頁面結構
Panel
A framed working area, usually holding controls, inputs, settings, or output.
Panel spacing and layout changes affect how easy repeated tool use feels.
borderbackgroundpaddingdisplayAlign the panel controls in one row on desktop and stack them on mobile.
頁面結構
Navigation
A group of links or buttons used to move between major pages or categories.
Gap, alignment, and visibility rules change how the navigation behaves on desktop and mobile.
navdisplaygapalign-itemsHide the navigation links on small screens and keep the menu button visible.
頁面結構
Menu
A list of links or actions that opens from a button.
Position, width, and z-index decide where the menu opens and whether it appears above other content.
If the menu is placed in normal document flow, it can push the whole page down.
positionrighttopz-indexwidthMake the menu open as a floating panel aligned to the right.
頁面結構
Sidebar
A vertical area at the left or right side of the page, often used for navigation or filters.
Sidebar width and responsive rules decide whether it stays visible, collapses, or moves below content.
asidewidthpositiongrid-template-columnsMove the filter sidebar below the content on mobile.
頁面結構
Hero
The first large section of a page that introduces the main purpose or action.
Hero padding, title size, and layout affect the first impression and how much content fits in the first viewport.
paddingbackgroundmin-heightgridReduce the hero title size on mobile so the action buttons stay visible.
間距與尺寸
Padding
Space inside an element, between the border and the content.
Increasing padding-top adds more space above the content inside the element.
More padding usually increases the visible size of the element.
paddingpadding-toppadding-rightpadding-bottompadding-leftIncrease the top padding of the header slightly.
間距與尺寸
Margin
Space outside an element, between it and neighboring elements.
Increasing margin-bottom pushes the next element farther down.
marginmargin-topmargin-rightmargin-bottommargin-leftAdd more margin between the hero section and the tools list.
間距與尺寸
Gap
The space between items inside a flex or grid layout.
Increasing gap spreads sibling items apart without adding extra space around the whole group.
gaprow-gapcolumn-gapReduce the gap between the theme button, language button, and menu button.
間距與尺寸
Width
The horizontal size of an element.
A fixed width keeps the element stable. max-width lets it shrink on small screens.
widthmin-widthmax-widthMake the menu panel width match its longest item.
間距與尺寸
Height
The vertical size of an element.
Fixed height can keep a header stable. max-height with overflow can keep dropdowns from becoming too tall.
heightmin-heightmax-heightKeep the header height stable while making the title smaller.
間距與尺寸
Max width
The largest width an element is allowed to reach.
Lowering max-width makes text lines shorter and panels narrower on large screens.
max-widthwidthSet a max-width on the dropdown so it does not cover too much of the page.
間距與尺寸
Top / Right / Bottom / Left
Position offsets used with positioned elements.
right: 0 aligns a floating panel to the right edge of its positioned parent.
toprightbottomleftinsetAlign the open menu panel to the right side of the header controls.
文字
Font size
The size of text.
Reducing font-size helps long labels fit in tight spaces such as mobile headers.
font-sizetext-smtext-lgMake the mobile site title smaller but keep it on one line.
文字
Font weight
How thick or bold the text appears.
Increasing font-weight makes labels more prominent without changing their size.
font-weightfont-boldfont-semiboldMake the category labels a little bolder.
文字
Line height
The vertical space each line of text occupies.
Increasing line-height makes paragraphs easier to read. Reducing it makes compact UI labels tighter.
line-heightleadingIncrease the paragraph line-height in the hero description.
文字
Letter spacing
The space between individual letters.
Small positive spacing can help uppercase labels feel clearer. Too much spacing can make Korean text awkward.
letter-spacingtrackingRemove negative letter spacing from compact buttons.
文字
Text align
The horizontal alignment of text inside its container.
Right-aligned menu text can make a floating menu feel attached to the right edge.
text-alignRight-align the menu item text inside the menu panel.
文字
Wrap / No wrap
Whether long text can move to the next line or must stay on one line.
No-wrap keeps a header stable, while wrapping can show more text but usually increases height.
white-spaceword-breakoverflow-wrapKeep the mobile title on one line and truncate the overflow.
文字
Truncate / Ellipsis
A way to cut off overflowing single-line text and show dots.
Truncation prevents layout breakage when labels are longer than expected.
overflowtext-overflowwhite-spaceTruncate the site title on very small screens.
色彩與背景
Color
The color of text or icons.
Changing color affects readability and visual priority.
colorMake the selected language text visible in dark mode.
色彩與背景
Background
The color or image behind an element's content.
Background changes can separate panels, highlight active states, or improve contrast.
backgroundbackground-colorUse a darker background for the selected language item in dark mode.
色彩與背景
Opacity
How transparent an element is.
Lower opacity makes elements quieter, but it can reduce readability.
opacityrgbacolor-mixMake disabled controls look dimmer without making the text unreadable.
色彩與背景
Gradient
A smooth transition between two or more colors.
Subtle gradients can add depth, but strong gradients can make tools feel less practical.
linear-gradientradial-gradientbackground-imageKeep the hero background subtle and avoid a strong gradient.
色彩與背景
Accent color
A repeated highlight color used for labels, active states, or important actions.
Changing the accent color changes the page's visual identity and emphasis.
colorbackgroundborder-coloraccent-colorUse the same green accent for category labels and active chips.
色彩與背景
Contrast
The difference between foreground and background colors.
Higher contrast improves readability, especially in dark mode and on mobile screens.
colorbackground-colorIncrease the contrast of dropdown items in dark mode.
邊框與形狀
Border
A line around an element.
Border width and color control how strongly a box or button is separated from the background.
borderborder-colorborder-widthborder-styleMake the menu panel border slightly darker in dark mode.
邊框與形狀
Border radius
How rounded the corners of a box or button are.
A small radius feels practical and compact. A large radius feels softer and more playful.
border-radiusKeep cards at an 8px border radius.
邊框與形狀
Box shadow
A shadow around an element that makes it feel raised above the page.
Stronger shadows make floating menus or modals feel layered. Too much shadow can feel heavy.
box-shadowAdd a subtle shadow to the floating menu panel.
邊框與形狀
Outline
A line shown around an element, often when it is focused by keyboard navigation.
A clear outline helps keyboard users know which control is active.
outlineoutline-offset:focus-visibleKeep a visible focus outline on icon buttons.
邊框與形狀
Divider
A line used to separate sections or groups.
A divider can make category boundaries clearer without adding much visual weight.
border-topborder-bottomhrAdd subtle dividers between menu categories.
版面與位置
Display
The basic layout mode of an element.
display: none hides an element. flex and grid arrange child items.
displaydisplay: nonedisplay: flexdisplay: gridHide the desktop navigation on mobile screens.
版面與位置
Flex
A layout method for arranging items in a row or column.
flex-direction: column stacks items vertically. flex-wrap allows items to move to the next line.
display: flexflex-directionflex-wrapgapKeep the header controls in a flex row.
版面與位置
Grid
A layout method for arranging content in rows and columns.
Changing grid columns controls how many cards appear per row.
display: gridgrid-template-columnsgrid-columngapShow four tool cards per row on wide desktop screens.
版面與位置
Align items
How items are aligned on the cross axis inside flex or grid.
align-items: center vertically centers controls in a header row.
align-itemsplace-itemsVertically center the title and header buttons.
版面與位置
Justify content
How items are distributed on the main axis inside flex or grid.
justify-content: space-between pushes groups to opposite sides.
justify-contentjustify-itemsmargin-left: autoKeep the title on the left and controls on the right.
版面與位置
Position
How an element is placed in relation to the page or another element.
position: absolute lets a dropdown float without pushing the page layout down.
positionrelativeabsolutefixedstickyMake the menu panel absolute so it does not push the page down.
版面與位置
Z-index
The stacking order of positioned elements.
A higher z-index can place dropdowns above page content.
z-index only works predictably when positioning and stacking contexts are considered.
z-indexpositionRaise the language dropdown above the menu panel.
版面與位置
Overflow
What happens when content is larger than its container.
overflow-y: auto allows a long menu to scroll instead of extending beyond the screen.
overflowoverflow-xoverflow-ymax-heightMake long dropdown menus scroll inside a max-height.
響應式
Breakpoint
A screen width where the layout changes.
Changing a breakpoint decides whether tablets behave more like mobile or desktop.
@mediasmmdlgxlTreat tablets as desktop for the top navigation.
響應式
Mobile
Styles intended for small phone-sized screens.
Mobile styles often reduce font size, stack columns, and keep controls touch-friendly.
@mediamax-widthsmOn mobile, stack the cards in one column.
響應式
Desktop
Styles intended for wider laptop or desktop screens.
Desktop styles can use more columns, horizontal navigation, and wider content containers.
@mediamin-widthlgxlOn desktop, keep the category navigation visible in the header.
響應式
Viewport
The visible area of the browser or device screen.
Viewport units make sizes relative to the visible screen.
vwvh100vw100vhLimit the menu width to the viewport so it does not overflow on phones.
響應式
Responsive
A design that adjusts to different screen sizes.
Responsive rules can make the same component horizontal on desktop and vertical on mobile.
@mediaclampmin()max()Make the controls responsive without changing their order.
互動狀態
Hover
The state when a mouse pointer is over an element.
Hover styles can change background, text color, border, or shadow to show that an item is interactive.
Touch devices do not have reliable hover behavior, so important actions should also work by click or tap.
:hoverbackgroundcolortransitionAdd a background color change when hovering over menu items.
互動狀態
Active
The short state while a button or link is being pressed.
Active styles can make buttons feel tactile with a small color or position change.
:activetransformbackgroundAdd a slight pressed effect to toolbar buttons.
互動狀態
Focus
The state when an input, button, or link is currently selected for keyboard or typing.
Focus styles make keyboard navigation visible and accessible.
:focus:focus-visibleoutlineMake the search input focus ring match the accent color.
互動狀態
Disabled
A state where a control is visible but cannot be used.
Disabled styles often reduce contrast and remove pointer interaction.
:disabledopacitycursorpointer-eventsMake disabled buttons visibly inactive but still readable.
互動狀態
Selected
The state of the currently chosen item in a list, tab group, or menu.
Selected styles usually need stronger background or text color than normal items.
aria-currentdata-statebackgroundcolorMake the selected category chip clearly different from the others.
互動狀態
Open / Closed
Whether a dropdown, menu, or accordion panel is currently visible.
Open and closed states need clear indicators such as plus/minus icons or arrow rotation.
aria-expandeddisplayheightvisibilityKeep all menu categories closed by default.
UI 元件
Button
A control that performs an action when clicked or tapped.
Button padding, border, color, and states determine how easy and important it feels.
buttonpaddingborderbackgroundcursorMake the primary action button more prominent than the secondary button.
UI 元件
Icon button
A button represented mainly by an icon instead of text.
Stable width and height prevent icon buttons from shifting as states change.
buttonwidthheightaria-labeldisplay: gridKeep the menu icon button square and aligned with the language button.
UI 元件
Dropdown
A floating list that appears after pressing a button or select control.
Dropdown position, width, max-height, and z-index control placement and layering.
positiontoprightz-indexbox-shadowWhen the language dropdown opens, close the site menu.
UI 元件
Accordion
A section that can be opened or closed to show or hide its content.
Accordions make long menus shorter by keeping categories closed until needed.
aria-expandedheightdisplayoverflowAdd open and close behavior to each menu category.
UI 元件
Tabs
A control for switching between related views without leaving the page.
Selected tab styling must clearly show which view is active.
role=tablistdisplayborderbackgroundMake the active tab background darker than inactive tabs.
UI 元件
Modal
A focused overlay panel that appears above the page.
Modal width, backdrop, and z-index control how strongly it interrupts the page.
dialogposition: fixedinsetz-indexbackdropCenter the modal and keep it narrower than the viewport.
UI 元件
Tooltip
A small hint shown near a control, often on hover or focus.
Tooltips help explain icon-only buttons without adding permanent text.
positiontitlearia-describedbyz-indexAdd a tooltip that labels the menu icon button.
UI 元件
Input
A field where the user types text or values.
Input padding, border, placeholder color, and focus style affect comfort and clarity.
inputborderpaddingplaceholder:focusMake the search input full width and easier to tap on mobile.
UI 元件
Badge / Chip
A small rounded label or filter control.
Chip size, radius, and active color affect how scannable filters feel.
border-radiuspaddingbackgroundfont-sizeMake active category chips visually stronger.