W3.CSS 参考手册
W3.CSS 类
容器类
| 类 | 定义 | |
|---|---|---|
| w3-container | HTML 容器，左右内边距为 16px | 测试一下 |
| 用作标题 | 测试一下 | |
| 用作页脚 | 测试一下 | |
| w3-panel | HTML 容器，左右内边距为 16px，上下边距为 16px | 测试一下 |
| 用于显示注释 | 测试一下 | |
| 用于显示引号 | 测试一下 | |
| w3-badge | 圆形徽章 | 测试一下 |
| w3-tag | 矩形标签 | 测试一下 |
| w3-ul | 无序列表 | 测试一下 |
| w3-display-container | w3-display-classes 的容器（允许在容器内定位元素） | 测试一下 |
| 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 | 测试一下 | |
| With w3-xlarge | 测试一下 | |
| 使用 w3-xxlarge | 测试一下 | |
| 使用 w3-xxxlarge | 测试一下 | |
| 使用 color | 测试一下 | |
| 使用 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 | 在小屏幕上隐藏内容（小于 601 像素） | 测试一下 |
| w3-hide-medium | 在中等屏幕上隐藏内容 | 测试一下 |
| w3-hide-large | 在大屏幕（大于 992 像素）上隐藏内容 | 测试一下 |
| 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 | 将字体更改为 serif | 测试一下 |
Display 显示类
| 类 | 定义 | |
|---|---|---|
| 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-classes 的容器（位置:相对） | 测试一下 |
| w3-display-topleft | 在 w3-display-container 的左上角显示内容 | 测试一下 |
| w3-display-topright | 在w3-display-container的右上角显示内容 | 测试一下 |
| w3-display-bottomleft | 在 w3-display-container 的左下角显示内容 | 测试一下 |
| w3-display-bottomright | 在w3-display-container的右下角显示内容 | 测试一下 |
| w3-display-left | 在 w3-display-container 的左侧（左中）显示内容 | 测试一下 |
| w3-display-right | 在 w3-display-container 的右侧（右中）显示内容 | 测试一下 |
| w3-display-middle | 在 w3-display-container 的中间（center）显示内容 | 测试一下 |
| w3-display-topmiddle | 在 w3-display-container 的顶部中间显示内容 | 测试一下 |
| w3-display-bottommiddle | 在 w3-display-container 的底部中间显示内容 | 测试一下 |
| w3-display-position | 在w3-display-container的指定位置显示内容 | 测试一下 |
| w3-display-hover | 悬停在 w3-display-container 内时显示内容 | 测试一下 |
效果类
| 类 | 定义 | |
|---|---|---|
| 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 | 悬停颜色 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 | 悬停边框颜色 | 测试一下< /td> |
| w3-hover-opacity | 悬停时为元素添加透明度（不透明度:0.6） | 测试一下 |
| w3-hover-opacity-off | 悬停时移除元素的透明度（100% 不透明度） | 测试一下 |
| w3-悬停阴影 | 悬停时为元素添加阴影 | 测试一下 |
| 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-填充 | 顶部和底部填充 8 像素，左侧和右侧填充 16 像素。 | 测试一下 |
| 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-margin | 为元素添加 16px 的边距 | 测试一下 |
| w3-margin-top | 为元素添加 16px 的上边距 | 测试一下 |
| w3-margin-right | 为元素添加 16px 的右边距 | 测试一下 |
| w3-margin-bottom | 为元素添加 16px 的底部边距 | 测试一下 |
| w3-margin-left | 为元素添加 16px 的左边距 | 测试一下 |
| w3-section | 为元素添加 16px 的顶部和底部边距 | 测试一下 |
边框类
| 类 | 定义 | |
|---|---|---|
| w3-border | 边框 (top, right, bottom, left) | 测试一下 |
| 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 | 悬停边框颜色 | 测试一下 |
