W3.CSS 参考
W3.CSS 类
容器类
| 类 | 定义 | |
|---|---|---|
| w3-container | HTML 容器，左右内边距为 16px | 试一试 |
| 用作标题 | 试一试 | |
| 用作页脚 | 试一试 | |
| w3-panel | HTML 容器，左右内边距为 16px，上下外边距为 16px | 试一试 |
| 用于显示注释 | 试一试 | |
| 用于显示引言 | 试一试 | |
| w3-badge | 圆形徽章 | 试一试 |
| w3-tag | 矩形标签 | 试一试 |
| w3-ul | 无序列表 | 试一试 |
| w3-display-container | w3-display-*类的容器（允许定位容器内的元素） | 试一试 |
| w3-block | 可用于定义任何元素全宽的类 | 试一试 |
| w3-code | 代码容器 | 试一试 |
| w3-codespan | 内联代码容器（用于代码片段） | 试一试 |
| w3-content | 固定尺寸居中内容的容器 | 试一试 |
| w3-auto | 响应式尺寸居中内容的容器 | 试一试 |
| w3-stretch | 移除左右外边距的类（尤其适用于拉伸带内边距的行 (w3-row-padding)） | 试一试 |
表格类
| 类 | 定义 | |
|---|---|---|
| w3-table | HTML 表格的容器 | 试一试 |
| w3-striped | 条纹表格 | 试一试 |
| w3-border | 带边框的表格 | 试一试 |
| w3-bordered | 带边框线 | 试一试 |
| w3-centered | 居中表格 | 试一试 |
| w3-hoverable | 鼠标悬停表格 | 试一试 |
| w3-table-all | 所有属性设置 | 试一试 |
| 带有 w3-striped、w3-border 和 w3-bordered | 试一试 | |
| 带有彩色表头 | 试一试 | |
| 带有 w3-responsive | 试一试 | |
| 带有 w3-tiny | 试一试 | |
| 带有 w3-small | 试一试 | |
| 带有 w3-large | 试一试 | |
| 带有 w3-xlarge | 试一试 | |
| 带有 w3-xxlarge | 试一试 | |
| 带有 w3-xxxlarge | 试一试 | |
| 带有颜色 | 试一试 | |
| 带有 w3-jumbo | 试一试 | |
| w3-responsive | 创建响应式表格 | 试一试 |
卡片类
| 类 | 定义 | |
|---|---|---|
| w3-card | 同 w3-card-2 | 试一试 |
| w3-card-2 | 任何 HTML 内容的容器（2px 边框阴影） | 试一试 |
| w3-card-4 | 任何 HTML 内容的容器（4px 边框阴影） | 试一试 |
响应式类
| 类 | 定义 | |
|---|---|---|
| w3-row | 流式响应式内容单行的容器 | 试一试 |
| w3-row-padding | 所有列都有默认内边距的行 | 试一试 |
| w3-auto | 响应式尺寸居中内容的容器 | 试一试 |
| w3-stretch | 移除左右外边距的类 | 试一试 |
| w3-half | 半屏（1/2）列容器 | 试一试 |
| w3-third | 三分之一屏（1/3）列容器 | 试一试 |
| w3-twothird | 三分之二屏（2/3）列容器 | 试一试 |
| w3-quarter | 四分之一屏（1/4）列容器 | 试一试 |
| w3-threequarter | 四分之三分屏（3/4）列容器 | 试一试 |
| w3-col | 任何 HTML 内容的列容器 | 试一试 |
| w3-rest | 占据剩余列宽 | 试一试 |
| l1 - l12 | 大屏幕的响应式尺寸 | 试一试 |
| m1 - m12 | 中等屏幕的响应式尺寸 | 试一试 |
| s1 - s12 | 小屏幕的响应式尺寸 | 试一试 |
| w3-hide-small | 在小屏幕（小于 601px）上隐藏内容 | 试一试 |
| w3-hide-medium | 在中等屏幕上隐藏内容 | 试一试 |
| w3-hide-large | 在大屏幕（大于 992px）上隐藏内容 | 试一试 |
| w3-image | 响应式图片 | 试一试 |
| w3-mobile | 为任何元素添加移动优先的响应式。 在移动设备上将元素显示为块级元素。 |
试一试 |
布局类
| 类 | 定义 | |
|---|---|---|
| w3-cell-row | 布局列（单元格）的容器。 | 试一试 |
| w3-cell | 布局列（单元格）。 | 试一试 |
| w3-cell-top | 将内容对齐到列（单元格）的顶部。 | 试一试 |
| w3-cell-middle | 将内容对齐到列（单元格）的垂直中间。 | 试一试 |
| w3-cell-bottom | 将内容对齐到列（单元格）的底部。 | 试一试 |
条类 - 导航
| 类 | 定义 | |
|---|---|---|
| w3-bar | 横向条 | 试一试 |
| w3-bar-block | 纵向条 | 试一试 |
| w3-bar-item | 为条目提供通用样式 | 试一试 |
| w3-sidebar | 侧边栏 | 试一试 |
| 侧边栏可以包含所有类型的内容 | 试一试 | |
| 覆盖主内容的侧边栏 | 试一试 | |
| 覆盖所有主内容的侧边栏 | 试一试 | |
| 将主内容向右移动的侧边栏 | 试一试 | |
| 带覆盖背景的侧边栏 | 试一试 | |
| 右侧的侧边栏 | 试一试 | |
| w3-collapse | 与 w3-sidebar 一起使用，创建完全自动响应式的侧边导航。要使此类生效，页面内容必须包含在“w3-main”类中 | 试一试 |
| w3-main | 使用 w3-collapse 类创建响应式侧边导航时，页面内容的容器 | 试一试 |
| 完全自动的右侧响应式侧边导航 | 试一试 |
下拉菜单类
| w3-dropdown-click | 可点击的下拉菜单元素 | 试一试 |
| w3-dropdown-hover | 可悬停的下拉菜单元素 | 试一试 |
| 可悬停的下拉菜单元素（在 w3-bar 中使用） | 试一试 | |
| 可悬停的下拉菜单元素（在 w3-bar-block 中使用） | 试一试 | |
| 可悬停的下拉菜单元素（在 w3-sidebar 中使用） | 试一试 |
按钮类
| 类 | 定义 | |
|---|---|---|
| w3-button | 矩形按钮，悬停时有灰色背景色 | 试一试 |
| w3-btn | 矩形按钮，悬停时有阴影 | 试一试 |
| w3-circle | 可用于创建圆形按钮 | 试一试 |
| w3-ripple | 带涟漪效果的矩形按钮 | 试一试 |
| 带涟漪效果的圆形浮动按钮 | 试一试 | |
| w3-bar | 可用于将元素（如按钮）分组到水平条中 | 试一试 |
| w3-block | 可用于定义全宽 w3-button 的类 | 试一试 |
| 全宽 w3-btn | 试一试 | |
| 全宽圆形按钮 | 试一试 |
输入类
| 类 | 定义 | |
|---|---|---|
| w3-input | 输入元素 | 试一试 |
| 卡片式输入表单 | 试一试 | |
| 输入元素（顶部标签） | 试一试 | |
| 输入元素（底部标签） | 试一试 | |
| w3-check | 复选框输入类型 | 试一试 |
| w3-radio | 单选框输入类型 | 试一试 |
| w3-select | 输入选择元素 | 试一试 |
| w3-animate-input | 将输入的宽度动画化至 100% | 试一试 |
模态框类
| 类 | 定义 | |
|---|---|---|
| w3-modal | 模态框容器 | 试一试 |
| w3-modal-content | 模态框弹出元素 | 试一试 |
| w3-tooltip | 工具提示元素 | 试一试 |
| w3-text | 工具提示文本 | 试一试 |
动画类
| 类 | 定义 | |
|---|---|---|
| w3-animate-top | 将元素从顶部 -300px 动画到 0px | 试一试 |
| w3-animate-left | 将元素从左侧 -300px 动画到 0px | 试一试 |
| w3-animate-bottom | 将元素从底部 -300px 动画到 0px | 试一试 |
| w3-animate-right | 将元素从右侧 -300px 动画到 0px | 试一试 |
| w3-animate-opacity | 将元素的透明度从 0 动画到 1 | 试一试 |
| w3-animate-zoom | 将元素的大小从 0% 动画到 100% | 试一试 |
| w3-animate-fading | 将元素的透明度从 0 动画到 1，再从 1 动画到 0（淡入淡出） | 试一试 |
| w3-spin | 使图标旋转 360 度 | 试一试 |
| 使任何元素旋转 360 度 | 试一试 | |
| w3-animate-input | 将输入字段的宽度动画化至 100% | 试一试 |
字体和文本类
| 类 | 定义 | |
|---|---|---|
| w3-tiny | 指定字体大小为 10 像素 | 试一试 |
| w3-small | 指定字体大小为 12 像素 | 试一试 |
| w3-large | 指定字体大小为 18 像素 | 试一试 |
| w3-xlarge | 指定字体大小为 24 像素 | 试一试 |
| w3-xxlarge | 指定字体大小为 32 像素 | 试一试 |
| w3-xxxlarge | 指定字体大小为 48 像素 | 试一试 |
| w3-jumbo | 指定字体大小为 64 像素 | 试一试 |
| w3-wide | 指定更宽的文本 | 试一试 |
| w3-serif | 将字体更改为衬线体 | 试一试 |
| w3-sans-serif | 将字体更改为无衬线体 | 试一试 |
| w3-cursive | 将字体更改为手写体 | 试一试 |
| w3-monospace | 将字体更改为等宽字体 | 试一试 |
显示类
| 类 | 定义 | |
|---|---|---|
| w3-center | 居中内容 | 试一试 |
| w3-left | 将元素浮动到左侧 (float: left) | 试一试 |
| w3-right | 将元素浮动到右侧 (float: right) | 试一试 |
| w3-left-align | 左对齐文本 | 试一试 |
| w3-right-align | 右对齐文本 | 试一试 |
| w3-justify | 两端对齐文本 | 试一试 |
| w3-block | 可用于定义任何元素全宽的类 | 试一试 |
| w3-circle | 圆形内容 | 试一试 |
| w3-hide | 隐藏内容 (display:none) | 试一试 |
| w3-show | 显示内容 (display:block) | 试一试 |
| w3-show-block | w3-show 的别名 (display:block) | 试一试 |
| w3-show-inline-block | 将内容显示为内联块 (display:inline-block) | 试一试 |
| w3-top | 固定页面顶部的元素 | 试一试 |
| w3-bottom | 固定页面底部的元素 | 试一试 |
| w3-display-container | w3-display-类的容器 (position: relative) | 试一试 |
| w3-display-topleft | 将内容显示在 w3-display-容器的左上角 | 试一试 |
| w3-display-topright | 将内容显示在 w3-display-容器的右上角 | 试一试 |
| w3-display-bottomleft | 将内容显示在 w3-display-容器的左下角 | 试一试 |
| w3-display-bottomright | 将内容显示在 w3-display-容器的右下角 | 试一试 |
| w3-display-left | 将内容显示在 w3-display-容器的左侧（中间偏左） | 试一试 |
| w3-display-right | 将内容显示在 w3-display-容器的右侧（中间偏右） | 试一试 |
| w3-display-middle | 将内容显示在 w3-display-容器的中间（居中） | 试一试 |
| w3-display-topmiddle | 将内容显示在 w3-display-容器的顶部中间 | 试一试 |
| w3-display-bottommiddle | 将内容显示在 w3-display-容器的底部中间 | 试一试 |
| w3-display-position | 将内容显示在 w3-display-容器中的指定位置 | 试一试 |
| w3-display-hover | 在 w3-display-容器内显示悬停内容 | 试一试 |
效果类
| 类 | 定义 | |
|---|---|---|
| w3-opacity | 为元素添加不透明度/透明度（opacity: 0.6） | 试一试 |
| 为文本添加不透明度/透明度 | 试一试 | |
| w3-opacity-off | 关闭不透明度/透明度（opacity: 1） | 试一试 |
| w3-opacity-min | 为元素添加不透明度/透明度（opacity: 0.75） | 试一试 |
| w3-opacity-max | 为元素添加不透明度/透明度（opacity: 0.25） | 试一试 |
| w3-grayscale-min | 为元素添加灰度效果（grayscale: 50%） | 试一试 |
| w3-grayscale | 为元素添加灰度效果（grayscale: 75%） | 试一试 |
| w3-grayscale-max | 为元素添加灰度效果（grayscale: 100%） | 试一试 |
| w3-sepia-min | 为元素添加棕褐色效果（sepia: 50%） | 试一试 |
| w3-sepia | 为元素添加棕褐色效果（sepia: 75%） | 试一试 |
| w3-sepia-max | 为元素添加棕褐色效果（sepia: 100%） | 试一试 |
| w3-overlay | 创建覆盖效果 | 试一试 |
背景颜色类
| 类 | 定义 | |
|---|---|---|
| w3-red | 背景颜色红色 | 试一试 |
| w3-pink | 背景颜色粉色 | 试一试 |
| w3-purple | 背景颜色紫色 | 试一试 |
| w3-deep-purple | 背景颜色深紫色 | 试一试 |
| w3-indigo | 背景颜色靛蓝色 | 试一试 |
| w3-blue | 背景颜色蓝色 | 试一试 |
| w3-light-blue | 背景颜色浅蓝色 | 试一试 |
| w3-cyan | 背景颜色青色 | 试一试 |
| w3-aqua | 背景颜色水绿色 | 试一试 |
| w3-teal | 背景颜色青绿色 | 试一试 |
| w3-green | 背景颜色绿色 | 试一试 |
| w3-light-green | 背景颜色浅绿色 | 试一试 |
| w3-lime | 背景颜色亮绿色 | 试一试 |
| w3-sand | 背景颜色沙色 | 试一试 |
| w3-khaki | 背景颜色卡其色 | 试一试 |
| w3-yellow | 背景颜色黄色 | 试一试 |
| w3-amber | 背景颜色琥珀色 | 试一试 |
| w3-orange | 背景颜色橙色 | 试一试 |
| w3-deep-orange | 背景颜色深橙色 | 试一试 |
| w3-blue-grey | 背景颜色蓝灰色 | 试一试 |
| w3-brown | 背景颜色棕色 | 试一试 |
| w3-light-grey | 背景颜色浅灰色 | 试一试 |
| w3-grey | 背景颜色灰色 | 试一试 |
| w3-dark-grey | 背景颜色深灰色 | 试一试 |
| w3-black | 背景颜色黑色 | 试一试 |
| w3-pale-red | 背景颜色淡红色 | 试一试 |
| w3-pale-yellow | 背景颜色淡黄色 | 试一试 |
| w3-pale-green | 背景颜色淡绿色 | 试一试 |
| w3-pale-blue | 背景颜色淡蓝色 | 试一试 |
| w3-transparent | 透明背景颜色 |
悬停颜色类
上面的颜色也可以用作悬停类
| 类 | 定义 | |
|---|---|---|
| w3-hover-white | 悬停颜色白色 | 试一试 |
| w3-hover-black | 悬停颜色黑色 | 试一试 |
| w3-hover-red | 悬停颜色红色 | 试一试 |
| w3-hover-blue | 悬停颜色蓝色 | 试一试 |
| w3-hover-green | 悬停颜色绿色 | 试一试 |
| w3-hover-aqua | 悬停颜色水绿色 | 试一试 |
| w3-hover-orange | 悬停颜色橙色 | 试一试 |
| w3-hover-grey | 悬停颜色灰色 | 试一试 |
| w3-hover-pale-green | 悬停颜色淡绿色 | 试一试 |
文本颜色类
| 类 | 定义 | |
|---|---|---|
| w3-text-red | 文本颜色红色 | 试一试 |
| w3-text-green | 文本颜色绿色 | 试一试 |
| w3-text-blue | 文本颜色蓝色 | 试一试 |
| w3-text-yellow | 文本颜色黄色 | 试一试 |
| w3-text-light-grey | 文本颜色浅灰色 | 试一试 |
| w3-text-grey | 文本颜色灰色 | 试一试 |
| w3-text-dark-grey | 文本颜色深灰色 | 试一试 |
| w3-text-black | 文本颜色黑色 | 试一试 |
| w3-text-white | 文本颜色白色 | 试一试 |
| w3-text-pink | 文本颜色粉色 | 试一试 |
| w3-text-purple | 文本颜色紫色 | 试一试 |
| w3-text-teal | 文本颜色青绿色 | 试一试 |
| w3-text-light-green | 文本颜色浅绿色 | 试一试 |
| w3-text-lime | 文本颜色亮绿色 | 试一试 |
| w3-text-deep-purple | 文本颜色深紫色 | 试一试 |
| w3-text-indigo | 文本颜色靛蓝色 | 试一试 |
| w3-text-light-blue | 文本颜色浅蓝色 | 试一试 |
| w3-text-blue-grey | 文本颜色蓝灰色 | 试一试 |
| w3-text-cyan | 文本颜色青色 | 试一试 |
| w3-text-aqua | 文本颜色水绿色 | 试一试 |
| w3-text-amber | 文本颜色琥珀色 | 试一试 |
| w3-text-orange | 文本颜色橙色 | 试一试 |
| w3-text-deep-orange | 文本颜色深橙色 | 试一试 |
| w3-text-sand | 文本颜色沙色 | 试一试 |
| w3-text-khaki | 文本颜色卡其色 | 试一试 |
| w3-text-brown | 文本颜色棕色 | 试一试 |
悬停文本类
上面的文本类也可以用作悬停类
| 类 | 定义 | |
|---|---|---|
| w3-hover-text-red | 悬停文本颜色红色 | 试一试 |
| w3-hover-text-green | 悬停文本颜色绿色 | 试一试 |
| w3-hover-text-blue | 悬停文本颜色蓝色 | 试一试 |
| w3-hover-text-yellow | 悬停文本颜色黄色 | 试一试 |
其他悬停类
| 类 | 定义 | |
|---|---|---|
| w3-hover-border-color | 悬停边框颜色 | 试一试 |
| w3-hover-opacity | 悬停时为元素添加透明度（opacity: 0.6） | 试一试 |
| w3-hover-opacity-off | 悬停时移除元素的透明度（100% 透明度） | 试一试 |
| w3-hover-shadow | 悬停时为元素添加阴影 | 试一试 |
| w3-hover-grayscale | 为元素添加黑白（100% 灰度）效果 | 试一试 |
| w3-hover-sepia | 悬停时为元素添加棕褐色效果 | 试一试 |
| w3-hover-none | 移除元素的悬停效果 | 试一试 |
圆角类
| 类 | 定义 | |
|---|---|---|
| w3-round | 元素圆角（border-radius）4px | 试一试 |
| w3-round-small | 元素圆角（border-radius）2px | 试一试 |
| w3-round-medium | 元素圆角（border-radius）4px | 试一试 |
| w3-round-large | 元素圆角（border-radius）8px | 试一试 |
| w3-round-xlarge | 元素圆角（border-radius）16px | 试一试 |
| w3-round-xxlarge | 元素圆角（border-radius）32px | 试一试 |
内边距类
| 类 | 定义 | |
|---|---|---|
| w3-padding-small | 上下内边距 4px，左右内边距 8px。 | 试一试 |
| w3-padding | 上下内边距 8px，左右内边距 16px。 | 试一试 |
| w3-padding-large | 上下内边距 12px，左右内边距 24px。 | 试一试 |
| w3-padding-16 | 上下内边距 16px | 试一试 |
| w3-padding-24 | 上下内边距 24px | 试一试 |
| w3-padding-32 | 上下内边距 32px | 试一试 |
| w3-padding-48 | 上下内边距 48px | 试一试 |
| w3-padding-64 | 上下内边距 64px | 试一试 |
| w3-padding-top-64 | 顶部内边距 64px | 试一试 |
| w3-padding-top-48 | 顶部内边距 48px | 试一试 |
| w3-padding-top-32 | 顶部内边距 32px | 试一试 |
| w3-padding-top-24 | 顶部内边距 24px | 试一试 |
外边距类
| 类 | 定义 | |
|---|---|---|
| w3-margin | 为元素添加 16px 外边距 | 试一试 |
| w3-margin-top | 为元素添加 16px 顶部外边距 | 试一试 |
| w3-margin-right | 为元素添加 16px 右侧外边距 | 试一试 |
| w3-margin-bottom | 为元素添加 16px 底部外边距 | 试一试 |
| w3-margin-left | 为元素添加 16px 左侧外边距 | 试一试 |
| w3-section | 为元素添加 16px 的上下外边距 | 试一试 |
边框类
| 类 | 定义 | |
|---|---|---|
| w3-border | 边框（顶部、右侧、底部、左侧） | 试一试 |
| w3-border-top | 顶部边框 | 试一试 |
| w3-border-right | 右侧边框 | 试一试 |
| w3-border-bottom | 底部边框 | 试一试 |
| w3-border-left | 左侧边框 | 试一试 |
| w3-border-0 | 移除所有边框 | 试一试 |
| w3-border-color | 以指定颜色（如红色等）显示任何定义的边框 | 试一试 |
| w3-bottombar | 为元素添加粗的底部边框（条） | 试一试 |
| w3-leftbar | 为元素添加粗的左侧边框（条） | 试一试 |
| w3-rightbar | 为元素添加粗的右侧边框（条） | 试一试 |
| w3-topbar | 为元素添加粗的顶部边框（条） | 试一试 |
| w3-hover-border-color | 悬停边框颜色 | 试一试 |
