Skip to main content
Mellnx
Explore
Topics
Utilities
Explore
Topics
Utilities
Search
Agents
Frontend
Backend
Explore · Visual Dictionary
Frontend 图解词典
看懂页面怎么立起来:盒子、圆角、状态、布局、层级与弹窗——每个概念一句话讲透,顺手带走一段能直接粘贴的 prompt。
Box Model
图解
盒子模型 · 盒模型
页面上每个元素都是一个"套了三层包装的盒子":内容、内边距、边框、外边距。
点击查看详解 →
Border Radius
图解
圆角 · 圆角半径
把方盒子的直角"削圆"的属性,一个数字就能决定界面是硬朗还是柔和。
点击查看详解 →
Interaction States
图解
交互状态 · 悬停焦点态
同一个按钮在不同时刻的"表情":平时、悬停、按下、聚焦、禁用,各有一套样子。
点击查看详解 →
Flexbox & Grid
图解
弹性布局 · 网格布局
CSS 两大布局系统:Flex 管一排或一列的分配,Grid 管横竖交织的棋盘。
点击查看详解 →
Z-index
图解
层级 · 堆叠顺序
控制元素谁盖住谁的"楼层号"——但只在一栋楼里比大小,跨楼无效。
点击查看详解 →
Responsive Design
图解
响应式 · 自适应布局
同一套页面,在手机、平板、电脑上都自动排成合适的样子。
点击查看详解 →
Modal Dialog
图解
模态框 · 弹窗
盖在页面上的"前台接待窗":事情不办完,后面的页面就先不动。
点击查看详解 →
Tooltip & Toast
图解
气泡提示 · 浮动通知
两种轻量提示:Tooltip 是贴着元素的"小纸条",Toast 是角落里滑出来"报个信就走"的通知条。
点击查看详解 →
content
132×64
padding
content 内容
padding 内边距
border 边框
margin 外边距
overflow: hidden
直角
小圆角
中圆角
全圆
保存更改
default 平时
hover 悬停
active 按下
focus 聚焦
disabled 禁用
1
2
3
4
5
Flex 弹性
Grid 网格
z: 10
卡片甲
z: 20
卡片乙
z: 30
卡片丙
mellnx.example/explore
卡片 1
卡片 2
卡片 3
卡片 4
卡片 5
卡片 6
375
768
1440
页面内容
暂时不可用
幕布 overlay · 挡住点击
确认要删除吗?
取消
确认
静态终态标注:半透明幕布盖住整页并挡住点击,居中面板接管当前事务——确认、取消或 Esc,事情办完页面才交还给你。
复制链接
点击复制地址
Tooltip · 贴着目标浮起
已复制 · 3s 后走
Toast · 角落滑入报信
静态终态标注:Tooltip 小纸条贴着按钮浮起、移开即散;Toast 从角落滑入报个信就走——两者都报信不打断。