W3.CSS 参考
W3.CSS 类
容器类
| 类 | 定义 | |
|---|---|---|
| w3-容器 | 左右填充 16px 的 HTML 容器 | 尝试一下 |
| 用作标题 | 尝试一下 | |
| 用作页脚 | 尝试一下 | |
| w3面板 | HTML 容器，左右内边距为 16 像素，顶部和底部边距为 16 像素 | 尝试一下 |
| 用于显示注释 | 尝试一下 | |
| 用于显示报价 | 尝试一下 | |
| 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 条纹、w3 边框和 w3 边框 | 尝试一下 | |
| 带彩色头 | 尝试一下 | |
| 具有 w3 响应式 | 尝试一下 | |
| 与 w3-tiny | 尝试一下 | |
| 带w3-小号 | 尝试一下 | |
| 与 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) 筛柱容器 | 尝试一下 |
| 第三季度 | 四分之一 (1/4) 筛柱容器 | 尝试一下 |
| w3-四分之三 | 四分之三 (3/4) 筛柱容器 | 尝试一下 |
| w3-列 | 任何 HTML 内容的列容器 | 尝试一下 |
| w3-休息 | 占据其余的列宽 | 尝试一下 |
| l1 - l12 | 适用于大屏幕的响应式尺寸 | 尝试一下 |
| m1 - m12 | 适合中型屏幕的自适应尺寸 | 尝试一下 |
| s1 - s12 | 适合小屏幕的自适应尺寸 | 尝试一下 |
| w3-隐藏-小 | 隐藏小屏幕上的内容（小于 601 像素） | 尝试一下 |
| w3-隐藏-中 | 在中等屏幕上隐藏内容 | 尝试一下 |
| w3-隐藏-大 | 隐藏大屏幕（大于 992 像素）上的内容 | 尝试一下 |
| 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 侧边栏） | 尝试一下 |
按钮类
| 类 | 定义 | |
|---|---|---|
| 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旋转 | 旋转图标 360 度 | 尝试一下 |
| 旋转任何元素 360 度 | 尝试一下 | |
| w3-动画输入 | 将输入字段的宽度设置为 100% | 尝试一下 |
字体和文本类
| 类 | 定义 | |
|---|---|---|
| w3-小 | 指定字体大小为 10 像素 | 尝试一下 |
| w3-小号 | 指定字体大小为 12 像素 | 尝试一下 |
| w3-大号 | 指定字体大小为 18 像素 | 尝试一下 |
| w3-超大 | 指定字体大小为 24 像素 | 尝试一下 |
| w3-xxlarge | 指定字体大小为 32 像素 | 尝试一下 |
| w3-xxxlarge | 指定字体大小为 48 像素 | 尝试一下 |
| w3-巨型 | 指定字体大小为 64 像素 | 尝试一下 |
| w3 宽 | 指定更宽的文本 | 尝试一下 |
| w3 衬线 | 将字体更改为衬线字体 | 尝试一下 |
| w3-无衬线字体 | 将字体更改为无衬线字体 | 尝试一下 |
| w3-草书 | 将字体更改为草书 | 尝试一下 |
| w3-等宽字体 | 将字体更改为等宽字体 | 尝试一下 |
显示类别
| 类 | 定义 | |
|---|---|---|
| w3-中心 | 内容居中 | 尝试一下 |
| w3-左 | 将元素向左浮动（float: left） | 尝试一下 |
| w3-右 | 将元素向右浮动（float: right） | 尝试一下 |
| w3-左对齐 | 左对齐文本 | 尝试一下 |
| w3-右对齐 | 右对齐文本 | 尝试一下 |
| w3-对齐 | 右对齐和左对齐的文本 | 尝试一下 |
| w3块 | 可用于定义任何元素的全宽度的类 | 尝试一下 |
| w3-圆 | 圈出的内容 | 尝试一下 |
| w3-隐藏 | 隐藏内容（显示：无） | 尝试一下 |
| w3秀 | 显示内容（显示：块） | 尝试一下 |
| w3-显示块 | w3-show 的别名（显示：块） | 尝试一下 |
| w3-显示内联块 | 将内容显示为内联块 (display:inline-block) | 尝试一下 |
| w3-顶部 | 修复了页面顶部的内容 | 尝试一下 |
| w3-底部 | 修复了页面底部的内容 | 尝试一下 |
| w3-显示容器 | w3-display-的容器类（位置：相对） | 尝试一下 |
| w3-显示-左上 | 在 w3-display-container 的左上角显示内容 | 尝试一下 |
| w3-显示-topright | 在 w3-display-container 的右上角显示内容 | 尝试一下 |
| w3-显示-左下角 | 在 w3-display-container 的左下角显示内容 | 尝试一下 |
| w3-显示-右下角 | 在w3-display-container的右下角显示内容 | 尝试一下 |
| w3-显示左 | 在 w3-display-container 的左侧（左中）显示内容 | 尝试一下 |
| w3-显示右侧 | 在 w3-display-container 的右侧（右中）显示内容 | 尝试一下 |
| w3-显示-中间 | 在 w3-display-container 的中间（中心）显示内容 | 尝试一下 |
| w3-显示-topmiddle | 在 w3-display-container 的顶部中间显示内容 | 尝试一下 |
| w3-显示-bottommiddle | 在 w3-display-container 的底部中间显示内容 | 尝试一下 |
| w3-显示位置 | 在w3-display-container中的指定位置显示内容 | 尝试一下 |
| w3-显示-悬停 | 将鼠标悬停在 w3-display-container 内时显示内容 | 尝试一下 |
效果类
| 类 | 定义 | |
|---|---|---|
| w3-不透明度 | 为元素添加不透明度/透明度（不透明度：0.6） | 尝试一下 |
| 为文本添加不透明度/透明度 | 尝试一下 | |
| w3-不透明度关闭 | 关闭不透明度/透明度（不透明度：1） | 尝试一下 |
| w3-不透明度-最小值 | 为元素添加不透明度/透明度（不透明度：0.75） | 尝试一下 |
| w3-不透明度-最大值 | 为元素添加不透明度/透明度（不透明度：0.25） | 尝试一下 |
| w3-灰度-最小值 | 为元素添加灰度效果（灰度：50%） | 尝试一下 |
| w3-灰度 | 为元素添加灰度效果（灰度：75%） | 尝试一下 |
| w3 灰度最大 | 为元素添加灰度效果（灰度：100%） | 尝试一下 |
| w3-棕褐色-分钟 | 向元素添加深褐色效果（深褐色：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-悬停-aqua | 将鼠标悬停在浅绿色上 | 尝试一下 |
| w3-悬停-橙色 | 鼠标悬停颜色为橙色 | 尝试一下 |
| w3-悬停-灰色 | 悬停颜色灰色 | 尝试一下 |
| w3-悬停-淡绿色 | 悬停颜色浅绿色 | 尝试一下 |
文本颜色类别
| 类 | 定义 | |
|---|---|---|
| w3-文本-红色 | 文字颜色红色 | 尝试一下 |
| w3-文本-绿色 | 文字颜色绿色 | 尝试一下 |
| w3-文本-蓝色 | 文字颜色蓝色 | 尝试一下 |
| w3-文本-黄色 | 文字颜色黄色 | 尝试一下 |
| w3-文本-浅灰色 | 文字颜色 浅灰色 | 尝试一下 |
| w3-文本-灰色 | 文字颜色灰色 | 尝试一下 |
| w3-文本-深灰色 | 文字颜色 深灰色 | 尝试一下 |
| w3-文本-黑色 | 文字颜色 黑色 | 尝试一下 |
| w3-文本-白色 | 文字颜色 白色 | 尝试一下 |
| w3-文字-粉红色 | 文字颜色粉红色 | 尝试一下 |
| w3-文本-紫色 | 文字颜色紫色 | 尝试一下 |
| w3-文本-青色 | 文字颜色 青色 | 尝试一下 |
| w3-文本-浅绿色 | 文字颜色浅绿色 | 尝试一下 |
| w3-文本-石灰 | 文字颜色石灰 | 尝试一下 |
| 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-悬停-无 | 删除元素的悬停效果 | 尝试一下 |
轮班
| 类 | 定义 | |
|---|---|---|
| w3-轮 | 元素圆角（边框半径）4px | 尝试一下 |
| w3-圆形-小 | 元素圆角（边框半径）2px | 尝试一下 |
| w3-圆形-中型 | 元素圆角（边框半径）4px | 尝试一下 |
| w3-圆形-大号 | 元素圆角（边框半径）8px | 尝试一下 |
| w3-圆形-超大 | 元素圆角（边框半径）16px | 尝试一下 |
| w3-圆形-xxlarge | 元素圆角（边框半径）32px | 尝试一下 |
填充类
| 类 | 定义 | |
|---|---|---|
| w3-padding-小 | 顶部和底部内边距 4 像素，左侧和右侧内边距 8 像素。 | 尝试一下 |
| w3-填充 | 顶部和底部内边距 8 像素，左侧和右侧内边距 16 像素。 | 尝试一下 |
| w3-填充-大 | 顶部和底部内边距 12 像素，左侧和右侧内边距 24 像素。 | 尝试一下 |
| w3-填充-16 | 顶部和底部内边距 16px | 尝试一下 |
| w3-填充-24 | 顶部和底部内边距 24px | 尝试一下 |
| w3-填充-32 | 顶部和底部内边距 32px | 尝试一下 |
| w3-填充-48 | 顶部和底部内边距 48px | 尝试一下 |
| w3-填充-64 | 顶部和底部内边距 64px | 尝试一下 |
| w3-padding-top-64 | 顶部内边距 64px | 尝试一下 |
| w3-padding-top-48 | 顶部内边距 48px | 尝试一下 |
| w3-padding-top-32 | 顶部内边距 32px | 尝试一下 |
| w3-padding-top-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-悬停-边框-颜色 | 悬停边框颜色 | 尝试一下 |