CSS DEVELOPMENT LAB · V1.0.0

20 个 CSS 独立实战实验

从真实 Web 开发场景出发，系统学习页面布局、内容组件、交互组件、滚动视觉与现代 CSS。点击任意项目，将在新标签页打开独立实验。

20独立实验

5知识模块

0构建依赖

01

CSS DEVELOPMENT LAB

Part 1 · 页面布局

Responsive Navigation

响应式导航

多级菜单、移动端 Drawer、响应式导航结构

Responsive Hero

响应式 Hero

Grid 两栏、clamp、图片与文字自适应

Responsive Card Grid

响应式卡片网格

auto-fit、minmax、1fr 与自动列布局

Alternating Content Sections

交错图文布局

Grid、nth-child 与桌面/移动端视觉顺序

02

CSS DEVELOPMENT LAB

Part 2 · 内容组件

Equal Height Product Cards

等高产品卡片

Grid + Flex、等高布局、按钮底部对齐

Responsive Images / object-fit

响应式图片

aspect-ratio、cover、contain、object-position

Text Overflow / Long Content

文本溢出与长内容

ellipsis、line-clamp、长 URL 与 min-width:0

Responsive Table

响应式表格

横向滚动、Sticky Header 与首列固定

03

CSS DEVELOPMENT LAB

Part 3 · 交互组件

Accordion

手风琴

CSS Grid 高度动画、单项展开与 ARIA

Tabs

选项卡

Tabs 状态、键盘导航与移动端横向滚动

Modal / Lightbox

弹窗与灯箱

dialog、Top Layer、backdrop 与内部滚动

Drawer / Offcanvas

侧滑抽屉

fixed、translateX、遮罩与内部独立滚动

04

CSS DEVELOPMENT LAB

Part 4 · 滚动与视觉

Sticky Layout

Sticky 布局

Sticky Header、Sidebar、滚动容器与失效排查

CSS Scroll Snap

横向吸附滚动

Scroll Snap、移动端横向卡片与 Gallery

Hover Image Cards

Hover 图片卡片

Overlay、scale、Focus 与触控设备兼容

Tooltip / Dropdown

浮层与下拉定位

relative/absolute、层级与 Anchor Positioning

05

CSS DEVELOPMENT LAB

Part 5 · 现代 CSS

Container Queries

容器查询

container-type、@container 与组件级响应式

Fluid Responsive Design

流体响应式

clamp、min、max 与连续尺度系统

Cascade & @layer

层叠与分层管理

Specificity、Cascade、@layer 与 CSS 架构

Dark Mode & Design Tokens

深色模式与设计令牌

CSS Variables、Design Tokens 与主题切换

没有找到匹配的实验，请尝试其他关键词。