W3.CSS 参考
W3.CSS 类
容器类
| 班级 | 定义 | |
|---|---|---|
| w3-容器 | 具有 16px 左右填充的 HTML 容器 | 尝试一下 |
| 用作标题 | 尝试一下 | |
| 用作页脚 | 尝试一下 | |
| w3-面板 | HTML 容器的左右内边距为 16px，上下外边距为 16px | 尝试一下 |
| 用于显示注释 | 尝试一下 | |
| 用于显示报价 | 尝试一下 | |
| w3-徽章 | 圆形徽章 | 尝试一下 |
| w3 标签 | 矩形标签 | 尝试一下 |
| w3-ul | 无序列表 | 尝试一下 |
| w3-显示容器 | w3-display 的容器类 （允许在容器内定位元素） | 尝试一下 |
| w3-块 | 可用于定义任何元素的全宽的类 | 尝试一下 |
| w3 代码 | 代码容器 | 尝试一下 |
| w3-代码跨度 | 内联代码容器（用于代码片段） | 尝试一下 |
| w3-内容 | 固定大小居中内容的容器 | 尝试一下 |
| w3-汽车 | 响应式居中内容容器 | 尝试一下 |
| w3-拉伸 | 删除左右边距的类（对于拉伸填充行（w3-row-padding）特别有用） | 尝试一下 |
表类
| 班级 | 定义 | |
|---|---|---|
| w3 表 | HTML 表格的容器 | 尝试一下 |
| w3-条纹 | 条纹桌 | 尝试一下 |
| w3-边框 | 有边框的表格 | 尝试一下 |
| w3 有边框 | 边框线 | 尝试一下 |
| 以 w3 为中心 | 居中表 | 尝试一下 |
| w3-可悬停 | 可悬停的表格 | 尝试一下 |
| w3-表格-全部 | 所有属性均已设置 | 尝试一下 |
| 使用 w3-striped、w3-border 和 w3-bordered | 尝试一下 | |
| 有彩色头 | 尝试一下 | |
| 使用 w3-responsive | 尝试一下 | |
| 使用 w3-tiny | 尝试一下 | |
| 使用 w3-small | 尝试一下 | |
| 使用 w3-large | 尝试一下 | |
| 使用 w3-xlarge | 尝试一下 | |
| 使用 w3-xxlarge | 尝试一下 | |
| 使用 w3-xxxlarge | 尝试一下 | |
| 有颜色 | 尝试一下 | |
| 使用 w3-jumbo | 尝试一下 | |
| w3 响应式 | 创建响应式表格 | 尝试一下 |
卡牌类别
| 班级 | 定义 | |
|---|---|---|
| w3-卡 | 与 w3-card-2 相同 | 尝试一下 |
| w3-卡-2 | 任何 HTML 内容的容器（2px 边框阴影） | 尝试一下 |
| w3-卡-4 | 任何 HTML 内容的容器（4px 边框阴影） | 尝试一下 |
响应式类
| 班级 | 定义 | |
|---|---|---|
| w3-行 | 单行流体响应内容的容器 | 尝试一下 |
| w3-行填充 | 所有列都有默认填充的行 | 尝试一下 |
| w3-汽车 | 响应式居中内容容器 | 尝试一下 |
| w3-拉伸 | 删除左右边距的类 | 尝试一下 |
| w3-一半 | 半 (1/2) 屏幕柱容器 | 尝试一下 |
| w3-第三 | 第三个 (1/3) 屏幕列容器 | 尝试一下 |
| w3-三分之一 | 三分之二 (2/3) 屏幕列容器 | 尝试一下 |
| w3-季度 | 四分之一 (1/4) 屏幕柱容器 | 尝试一下 |
| w3-四分之三 | 四分之三 (3/4) 屏幕柱容器 | 尝试一下 |
| w3-col | 任何 HTML 内容的列容器 | 尝试一下 |
| w3-休息 | 占据剩余的列宽 | 尝试一下 |
| l1 - l12 | 大屏幕的响应尺寸 | 尝试一下 |
| m1-m12 | 适合中等屏幕的响应尺寸 | 尝试一下 |
| s1 - s12 | 适合小屏幕的响应尺寸 | 尝试一下 |
| w3-隐藏-小 | 在小屏幕上隐藏内容（小于 601px） | 尝试一下 |
| w3-隐藏-中等 | 在中等屏幕上隐藏内容 | 尝试一下 |
| w3-隐藏-大 | 在大屏幕上隐藏内容（大于 992px） | 尝试一下 |
| w3-图像 | 响应式图像 | 尝试一下 |
| w3-移动 | 为任何元素添加移动优先响应能力。 在移动设备上将元素显示为块元素。 |
尝试一下 |
布局类
| 班级 | 定义 | |
|---|---|---|
| w3-单元格行 | 布局列（单元格）的容器。 | 尝试一下 |
| w3 细胞 | 布局列（单元格）。 | 尝试一下 |
| w3-单元格-顶部 | 将内容对齐到列（单元格）的顶部。 | 尝试一下 |
| w3-单元格-中间 | 将内容对齐到列（单元格）的垂直中间。 | 尝试一下 |
| w3-单元格底部 | 将内容对齐到列（单元格）的底部。 | 尝试一下 |
酒吧课程 - 导航
| 班级 | 定义 | |
|---|---|---|
| w3-栏 | 单杠 | 尝试一下 |
| w3-条形块 | 竖线 | 尝试一下 |
| w3-栏目 | 为酒吧物品提供通用样式 | 尝试一下 |
| w3-侧边栏 | 侧边栏 | 尝试一下 |
| 侧边栏可以包含所有类型的内容 | 尝试一下 | |
| 覆盖主要内容的侧边栏 | 尝试一下 | |
| 覆盖所有主要内容的侧边栏 | 尝试一下 | |
| 侧边栏将主要内容移至右侧 | 尝试一下 | |
| 带有覆盖背景的侧边栏 | 尝试一下 | |
| 右侧的侧栏 | 尝试一下 | |
| w3-崩溃 | 与 w3-sidebar 一起使用，创建全自动响应式侧边导航。要使此类正常工作，页面内容必须位于“w3-main”类内 | 尝试一下 |
| w3-主要 | 使用 w3-collapse 类进行响应式侧边导航时的页面内容容器 | 尝试一下 |
| 全自动右侧响应式侧边导航 | 尝试一下 |
下拉类别
| w3-下拉-点击 | 可点击的下拉元素 | 尝试一下 |
| w3-下拉悬停- | 可悬停下拉元素 | 尝试一下 |
| 可悬停下拉元素（用于 w3-bar） | 尝试一下 | |
| 可悬停下拉元素（用于 w3-bar-block） | 尝试一下 | |
| 可悬停下拉元素（用于 w3-sidebar） | 尝试一下 |
按钮类
| 班级 | 定义 | |
|---|---|---|
| w3-按钮 | 悬停时显示灰色背景颜色的矩形按钮 | 尝试一下 |
| w3-按钮 | 悬停时带有阴影的矩形按钮 | 尝试一下 |
| w3-圆圈 | 可用于创建圆形按钮 | 尝试一下 |
| w3-涟漪 | 带涟漪效果的矩形按钮 | 尝试一下 |
| 带波纹效果的圆形浮动按钮 | 尝试一下 | |
| w3-栏 | 它可用于将元素（如按钮）分组到水平栏中 | 尝试一下 |
| w3-块 | 可用于定义全宽 w3 按钮的类 | 尝试一下 |
| 全宽 w3-btn | 尝试一下 | |
| 全宽圆形按钮 | 尝试一下 |
输入类
| 班级 | 定义 | |
|---|---|---|
| w3-输入 | 输入元素 | 尝试一下 |
| 输入表单作为卡片 | 尝试一下 | |
| 输入元素（顶部标签） | 尝试一下 | |
| 输入元素（底部标签） | 尝试一下 | |
| w3-检查 | 复选框输入类型 | 尝试一下 |
| w3-收音机 | 单选输入类型 | 尝试一下 |
| w3-选择 | 输入选择元素 | 尝试一下 |
| w3-动画-输入 | 将输入的宽度动画至 100% | 尝试一下 |
模态类
| 班级 | 定义 | |
|---|---|---|
| w3-模式 | 模态容器 | 尝试一下 |
| w3-模态框内容 | 模式弹出元素 | 尝试一下 |
| w3-工具提示 | 工具提示元素 | 尝试一下 |
| w3-文本 | 工具提示文本 | 尝试一下 |
动画课程
| 班级 | 定义 | |
|---|---|---|
| w3-动画-顶部 | 将元素从顶部的 -300px 动画到 0px | 尝试一下 |
| w3-动画-左 | 对元素进行动画处理，从左侧 -300px 到 0px | 尝试一下 |
| w3-动画-底部 | 将元素从底部的 -300px 动画到 0px | 尝试一下 |
| w3-动画-右 | 对元素进行动画处理，从右侧 -300px 到 0px | 尝试一下 |
| w3-动画-不透明度 | 将元素的不透明度从 0 动画化为 1 | 尝试一下 |
| w3-动画-缩放 | 将元素尺寸从 0 动画到 100% | 尝试一下 |
| w3-动画-淡入淡出 | 将元素的不透明度从 0 动画化为 1 和从 1 动画化为 0（淡入和淡出） | 尝试一下 |
| w3-spin | 将图标旋转 360 度 | 尝试一下 |
| 旋转任意元素 360 度 | 尝试一下 | |
| w3-动画-输入 | 将输入字段的宽度动画至 100% | 尝试一下 |
字体和文本类
| 班级 | 定义 | |
|---|---|---|
| w3-tiny | 规定字体大小为 10 像素 | 尝试一下 |
| w3-小 | 指定字体大小为 12 像素 | 尝试一下 |
| w3-大 | 指定字体大小为 18 像素 | 尝试一下 |
| w3-xlarge | 指定字体大小为 24 像素 | 尝试一下 |
| w3-xxlarge | 指定字体大小为 32 像素 | 尝试一下 |
| w3-xxxlarge | 指定字体大小为 48 像素 | 尝试一下 |
| w3-巨型 | 规定字体大小为 64 像素 | 尝试一下 |
| w3 范围 | 规定更宽的文本 | 尝试一下 |
| w3-衬线 | 将字体更改为衬线字体 | 尝试一下 |
| w3-sans-serif | 将字体更改为无衬线字体 | 尝试一下 |
| w3-草书 | 将字体更改为草书 | 尝试一下 |
| w3-等宽字体 | 将字体更改为等宽字体 | 尝试一下 |
显示类别
| 班级 | 定义 | |
|---|---|---|
| w3-中心 | 居中内容 | 尝试一下 |
| w3-左 | 将元素浮动到左侧（float: left） | 尝试一下 |
| w3-右 | 将元素浮动到右侧（float: right） | 尝试一下 |
| w3-左对齐 | 左对齐文本 | 尝试一下 |
| w3-右对齐 | 右对齐文本 | 尝试一下 |
| w3-对齐 | 右对齐和左对齐文本 | 尝试一下 |
| w3-块 | 可用于定义任何元素的全宽的类 | 尝试一下 |
| w3-圆圈 | 带圆圈的内容 | 尝试一下 |
| w3-隐藏 | 隐藏内容（显示：无） | 尝试一下 |
| w3-显示 | 显示内容（display:block） | 尝试一下 |
| w3-显示-块 | w3-show 的别名（display:block） | 尝试一下 |
| w3-显示内联块 | 将内容显示为内联块（display：inline-block） | 尝试一下 |
| w3-顶部 | 页面顶部的固定内容 | 尝试一下 |
| w3-底部 | 页面底部的固定内容 | 尝试一下 |
| w3-显示容器 | w3-display 的容器类 （位置：相对） | 尝试一下 |
| w3-显示-左上角 | 在 w3-display-container 的左上角显示内容 | 尝试一下 |
| w3-显示-右上角 | 在 w3-display-container 的右上角显示内容 | 尝试一下 |
| w3-显示-左下角 | 在 w3-display-container 的左下角显示内容 | 尝试一下 |
| w3-显示-右下角 | 在 w3-display-container 的右下角显示内容 | 尝试一下 |
| w3-显示-左 | 在 w3-display-container 的左侧（左中）显示内容 | 尝试一下 |
| w3-显示-右 | 在 w3-display-container 的右侧（中间右侧）显示内容 | 尝试一下 |
| w3-显示-中间 | 在 w3-display-container 的中间（中心）显示内容 | 尝试一下 |
| w3-显示-顶部中间 | 在 w3-display-container 的顶部中间显示内容 | 尝试一下 |
| w3-显示-底部中间 | 在 w3-display-container 的底部中间显示内容 | 尝试一下 |
| w3-显示位置 | 在 w3-display-container 中的指定位置显示内容 | 尝试一下 |
| w3-显示-悬停 | 在 w3-display-container 内悬停时显示内容 | 尝试一下 |
效果类别
| 班级 | 定义 | |
|---|---|---|
| w3-不透明度 | 为元素添加不透明度/透明度（不透明度：0.6） | 尝试一下 |
| 为文本添加不透明度/透明度 | 尝试一下 | |
| w3-不透明度关闭 | 关闭不透明度/透明度（不透明度：1） | 尝试一下 |
| w3-不透明度-最小 | 为元素添加不透明度/透明度（不透明度：0.75） | 尝试一下 |
| w3-不透明度-max | 为元素添加不透明度/透明度（不透明度：0.25） | 尝试一下 |
| w3-灰度最小值 | 为元素添加灰度效果（灰度：50%） | 尝试一下 |
| w3-灰度 | 为元素添加灰度效果（灰度：75%） | 尝试一下 |
| w3-灰度-max | 为元素添加灰度效果（灰度：100%） | 尝试一下 |
| w3-棕褐色-min | 为元素添加棕褐色效果（棕褐色：50%） | 尝试一下 |
| w3-棕褐色 | 为元素添加棕褐色效果（棕褐色：75%） | 尝试一下 |
| w3-棕褐色-max | 为元素添加棕褐色效果（棕褐色：100%） | 尝试一下 |
| w3-覆盖 | 创建叠加效果 | 尝试一下 |
背景颜色类别
| 班级 | 定义 | |
|---|---|---|
| w3-红色 | 背景颜色红色 | 尝试一下 |
| w3-粉色 | 背景颜色粉红色 | 尝试一下 |
| w3-紫色 | 背景颜色紫色 | 尝试一下 |
| w3-深紫色 | 背景颜色深紫色 | 尝试一下 |
| w3-靛蓝 | 背景颜色靛蓝 | 尝试一下 |
| w3-蓝色 | 背景颜色蓝色 | 尝试一下 |
| w3-浅蓝色 | 背景颜色 浅蓝色 | 尝试一下 |
| w3-青色 | 背景颜色青色 | 尝试一下 |
| w3-水 | 背景颜色浅绿色 | 尝试一下 |
| w3-青色 | 背景颜色深青色 | 尝试一下 |
| w3-绿色 | 背景颜色绿色 | 尝试一下 |
| w3-浅绿色 | 背景颜色浅绿色 | 尝试一下 |
| w3-石灰 | 背景颜色石灰 | 尝试一下 |
| w3-沙子 | 背景颜色沙子 | 尝试一下 |
| W3-卡其色 | 背景颜色卡其色 | 尝试一下 |
| w3-黄色 | 背景颜色黄色 | 尝试一下 |
| w3-琥珀色 | 背景颜色琥珀色 | 尝试一下 |
| w3-橙色 | 背景颜色橙色 | 尝试一下 |
| w3-深橙色 | 背景颜色深橙色 | 尝试一下 |
| w3-蓝灰色 | 背景颜色蓝灰色 | 尝试一下 |
| w3-棕色 | 背景颜色棕色 | 尝试一下 |
| w3-浅灰色 | 背景颜色浅灰色 | 尝试一下 |
| w3-灰色 | 背景颜色灰色 | 尝试一下 |
| w3-深灰色 | 背景颜色深灰色 | 尝试一下 |
| w3-黑色 | 背景颜色 黑色 | 尝试一下 |
| w3-淡红色 | 背景颜色淡红色 | 尝试一下 |
| W3-淡黄色 | 背景颜色淡黄色 | 尝试一下 |
| w3-淡绿色 | 背景颜色为淡绿色 | 尝试一下 |
| w3-淡蓝色 | 背景颜色为淡蓝色 | 尝试一下 |
| w3-透明 | 透明背景颜色 |
悬停颜色类别
上面的颜色也可以用作悬停类别：
| 班级 | 定义 | |
|---|---|---|
| w3-悬停-白色 | 悬停颜色白色 | 尝试一下 |
| w3-悬停-黑色 | 悬停颜色黑色 | 尝试一下 |
| w3-悬停-红色 | 悬停颜色为红色 | 尝试一下 |
| w3-悬停-蓝色 | 悬停颜色为蓝色 | 尝试一下 |
| w3-悬停-绿色 | 悬停颜色为绿色 | 尝试一下 |
| w3-hover-aqua | 悬停颜色为浅绿色 | 尝试一下 |
| w3-悬停-橙色 | 悬停颜色为橙色 | 尝试一下 |
| w3-悬停-灰色 | 悬停颜色灰色 | 尝试一下 |
| w3-悬停-淡绿色 | 悬停颜色为淡绿色 | 尝试一下 |
文本颜色类别
| 班级 | 定义 | |
|---|---|---|
| w3-文本-红色 | 文字颜色红色 | 尝试一下 |
| w3-文本-绿色 | 文字颜色绿色 | 尝试一下 |
| w3-文本-蓝色 | 文字颜色 蓝色 | 尝试一下 |
| w3-文本-黄色 | 文字颜色黄色 | 尝试一下 |
| w3-文本-浅灰色 | 文字颜色浅灰色 | 尝试一下 |
| w3-文本-灰色 | 文字颜色 灰色 | 尝试一下 |
| w3-文本-深灰色 | 文字颜色 深灰色 | 尝试一下 |
| w3-文本-黑色 | 文字颜色 黑色 | 尝试一下 |
| w3-文本-白色 | 文字颜色白色 | 尝试一下 |
| w3-文本-粉红色 | 文字颜色 粉红色 | 尝试一下 |
| w3-文本-紫色 | 文字颜色紫色 | 尝试一下 |
| w3-文本-青色 | 文字颜色青色 | 尝试一下 |
| w3-文本-浅绿色 | 文字颜色浅绿色 | 尝试一下 |
| w3-文本-lime | 文字颜色 青柠色 | 尝试一下 |
| w3-文本-深紫色 | 文字颜色深紫色 | 尝试一下 |
| w3-文本靛蓝 | 文字颜色靛蓝 | 尝试一下 |
| w3-文本-浅蓝色 | 文字颜色 浅蓝色 | 尝试一下 |
| w3-文本-蓝-灰色 | 文字颜色 蓝灰色 | 尝试一下 |
| w3-文本-青色 | 文字颜色青色 | 尝试一下 |
| w3-文本-aqua | 文字颜色为浅绿色 | 尝试一下 |
| w3-文本-琥珀色 | 文字颜色琥珀色 | 尝试一下 |
| w3-文本-橙色 | 文字颜色橙色 | 尝试一下 |
| w3-文本-深橙色 | 文字颜色深橙色 | 尝试一下 |
| w3-文本-沙色 | 文字色砂 | 尝试一下 |
| w3-文本-卡其色 | 文字颜色卡其色 | 尝试一下 |
| w3-文本-棕色 | 文字颜色棕色 | 尝试一下 |
悬停文本类
上面的文本类也可以用作悬停类：
| 班级 | 定义 | |
|---|---|---|
| w3-悬停文本-红色 | 悬停文本颜色为红色 | 尝试一下 |
| w3-悬停文本-绿色 | 悬停文本颜色为绿色 | 尝试一下 |
| w3-悬停文本-蓝色 | 悬停文本颜色为蓝色 | 尝试一下 |
| w3-悬停文本-黄色 | 悬停文本颜色黄色 | 尝试一下 |
其他悬停类
| 班级 | 定义 | |
|---|---|---|
| w3-悬停边框-颜色 | 悬停边框颜色 | 尝试一下 |
| w3-悬停不透明度 | 在悬停时为元素添加透明度（不透明度：0.6） | 尝试一下 |
| w3-悬停不透明度关闭 | 悬停时删除元素的透明度（100％不透明度） | 尝试一下 |
| w3-悬停阴影 | 悬停时为元素添加阴影 | 尝试一下 |
| w3-悬停-灰度 | 为元素添加黑白（100% 灰度）效果 | 尝试一下 |
| w3-悬停-棕褐色 | 在悬停时为元素添加棕褐色效果 | 尝试一下 |
| w3-hover-none | 删除元素的悬停效果 | 尝试一下 |
圆形课程
| 班级 | 定义 | |
|---|---|---|
| w3 回合 | 元素圆角（边框半径）4px | 尝试一下 |
| w3-圆形-小 | 元素圆角（边框半径）2px | 尝试一下 |
| w3-圆形中号 | 元素圆角（边框半径）4px | 尝试一下 |
| w3-圆形-大 | 元素圆角（边框半径）8px | 尝试一下 |
| w3-圆形-xlarge | 元素圆角（边框半径）16px | 尝试一下 |
| w3-圆形-xxlarge | 元素圆角（边框半径）32px | 尝试一下 |
填充类
| 班级 | 定义 | |
|---|---|---|
| w3-padding-小 | 顶部和底部的填充为 4px，左侧和右侧的填充为 8px。 | 尝试一下 |
| w3-填充 | 顶部和底部填充 8px，左侧和右侧填充 16px。 | 尝试一下 |
| w3-padding-大 | 顶部和底部的填充为 12px，左侧和右侧的填充为 24px。 | 尝试一下 |
| w3-填充-16 | 顶部和底部填充 16px | 尝试一下 |
| w3-填充-24 | 顶部和底部的内边距为 24px | 尝试一下 |
| w3-填充-32 | 顶部和底部的内边距为 32px | 尝试一下 |
| w3-填充-48 | 顶部和底部的内边距为 48px | 尝试一下 |
| w3-填充-64 | 顶部和底部的内边距为 64px | 尝试一下 |
| w3-padding-顶部-64 | 顶部填充 64px | 尝试一下 |
| w3-padding-顶部-48 | 顶部填充 48px | 尝试一下 |
| w3-padding-顶部-32 | 顶部填充 32px | 尝试一下 |
| w3-padding-顶部-24 | 顶部填充 24px | 尝试一下 |
保证金类别
| 班级 | 定义 | |
|---|---|---|
| w3-边距 | 为元素添加 16px 边距 | 尝试一下 |
| w3-边距-顶部 | 为元素添加 16px 的上边距 | 尝试一下 |
| w3-右边距- | 为元素添加 16px 的右边距 | 尝试一下 |
| w3-边距底部 | 为元素添加 16px 的下边距 | 尝试一下 |
| w3-左边距 | 为元素添加 16px 左边距 | 尝试一下 |
| w3 部分 | 为元素添加 16px 的顶部和底部边距 | 尝试一下 |
边界类
| 班级 | 定义 | |
|---|---|---|
| w3-边框 | 边框（顶部、右侧、底部、左侧） | 尝试一下 |
| w3-边框顶部 | 边框顶部 | 尝试一下 |
| w3-右边框 | 右边界 | 尝试一下 |
| w3-边框底部 | 边框底部 | 尝试一下 |
| w3-左边框 | 左边框 | 尝试一下 |
| w3-边框-0 | 删除所有边框 | 尝试一下 |
| w3-边框-颜色 | 以指定的颜色（如红色等）显示任何定义的边框。 | 尝试一下 |
| w3-底栏 | 为元素添加粗底边框（条） | 尝试一下 |
| w3-左栏 | 为元素添加粗左边框（条） | 尝试一下 |
| w3-右栏 | 为元素添加粗右边框（条） | 尝试一下 |
| w3-顶栏 | 为元素添加粗顶边框（条） | 尝试一下 |
| w3-悬停边框-颜色 | 悬停边框颜色 | 尝试一下 |
