页面结构
头部
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` 保持标题稳定，而 `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：center 垂直居中位于表头行中的控件。
相关 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请求示例
使较长的下拉菜单在最大高度内滚动。
响应式
断点
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
含义
控件可见但无法使用的 state。
修改方向
禁用的样式通常会降低对比度并移除指针交互。
相关 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 索引控制其放置和分层。
相关 CSS
positiontoprightz-indexbox-shadow请求示例
当语言下拉菜单打开时，关闭站点菜单。
UI 组件
手风琴
Accordion
含义
可以打开或关闭的部分，以显示或隐藏其内容。
修改方向
手风琴通过保持类别默认关闭，从而缩短了较长的菜单。
相关 CSS
aria-expandedheightdisplayoverflow请求示例
为每个菜单类别添加打开和关闭行为。
UI 组件
标签
Tabs
含义
一个控件，用于在不离开页面的情况下切换相关视图。
修改方向
已选择的标签样式必须清楚地显示哪个视图处于活动状态。
相关 CSS
role=tablistdisplayborderbackground请求示例
使活动选项卡背景比非活动选项卡更深。
UI 组件
模态框
Modal
含义
一个聚焦的覆盖面板，出现在页面上方。
修改方向
模态框的宽度、背景和 z-index 控制其对页面的干扰程度。
相关 CSS
dialogposition: fixedinsetz-indexbackdrop请求示例
将模态框居中，并使其宽度小于视口。
UI 组件
提示框
Tooltip
含义
显示在控件附近的小提示，通常在悬停或获得焦点时显示。
修改方向
提示框有助于解释仅使用图标的按钮，而无需添加永久文本。
相关 CSS
positiontitlearia-describedbyz-index请求示例
添加一个工具提示，用于标记菜单图标按钮。
UI 组件
输入
Input
含义
一个字段，用户可以在其中键入文本或值。
修改方向
输入的内边距、边框、占位符颜色和焦点样式会影响舒适度和清晰度。
相关 CSS
inputborderpaddingplaceholder:focus请求示例
使搜索输入具有全宽，并在移动设备上更容易点击。
UI 组件
徽章 / 芯片
Badge / Chip
含义
一个小的圆形标签或过滤器控件。
修改方向
芯片尺寸、半径和活动颜色会影响扫描滤镜的感知效果。
相关 CSS
border-radiuspaddingbackgroundfont-size请求示例
增强活动类别芯片的视觉效果。