编程
搜索页面修改时常用的 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.