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-classes 的容器 (position: relative) | 试试看 |
| 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 的中间（中心）显示内容 | 试试看 |
| 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 | 悬停颜色为水绿色 | 试试看 |
| 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 | 可悬停的边框颜色 | 试试看 |
