W3.CSS Reference（参考）

容器 （Container）分类

类	定义
w3-container	具有左右 16px 填充的 HTML 容器	尝试一下 »
	用作标题	尝试一下 »
	用作页脚	尝试一下 »
w3-panel	HTML 容器，其左右边距为 16px，顶部和底部边距为 16px	尝试一下 »
	用于显示注释	尝试一下 »
	用于显示引用	尝试一下 »
w3-badge	圆形徽章	尝试一下 »
w3-tag	矩形标签	尝试一下 »
w3-ul	无序列表	尝试一下 »
w3-display-container	w3-display- class 的容器（启用元素在容器内的定位）	尝试一下 »
w3-block	可用于为任何元素定义全宽的类	尝试一下 »
w3-code	代码容器	尝试一下 »
w3-codespan	内联代码容器（用于代码段）	尝试一下 »
w3-content	固定大小居中内容的容器	尝试一下 »
w3-auto	以响应为中心的内容容器	尝试一下 »
w3-stretch	消除左右边距的类（对于拉伸填充行（w3-row-padding）特别有用）	尝试一下 »

---

表格 （Table）分类

类	定义
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-tiny-xxlarge	尝试一下 »
	使用 w3-xxxlarge	尝试一下 »
	使用 color	尝试一下 »
	使用 w3-jumbo	尝试一下 »
w3-responsive	创建一个响应表	尝试一下 »

---

卡片（Cards）分类

类	定义
w3-card	与 w3-card-2一致	尝试一下 »
w3-card-2	任何 html 内容的容器(2px 边框阴影)	尝试一下 »
w3-card-4	任何 html 内容的容器(4px 边框阴影)	尝试一下 »

---

响应式（Responsive）分类

类	定义
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	为任何元素添加移动优先响应 在移动设备上将元素显示为块元素	尝试一下 »

---

布局（Layout）分类

类	定义
w3-cell-row	布局列（单元格）的容器	尝试一下 »
w3-cell	布局列（单元格）	尝试一下 »
w3-cell-top	在列（单元格）的顶部对齐内容	尝试一下 »
w3-cell-middle	在列（单元格）的垂直中间对齐内容。	尝试一下 »
w3-cell-bottom	在列（单元格）的底部对齐内容	尝试一下 »

---

 导航栏标签（Navigation）分类

类	定义
w3-bar	水平栏	尝试一下 »
w3-bar-block	垂直栏	尝试一下 »
w3-bar-item	提供通用的风格	尝试一下 »
w3-sidebar	侧栏边	尝试一下 »
	侧边栏可以包含所有类型的内容	尝试一下 »
	侧边栏可以覆盖主要内容	尝试一下 »
	侧边栏可以覆盖所有主要内容	尝试一下 »
	侧边栏主要内容向右移动	尝试一下 »
	侧边栏带有叠加的背景	尝试一下 »
	侧边栏位于右侧	尝试一下 »
w3-collapse	与 w3-sidebar 一起使用可创建全自动的响应式侧面导航。为了使此类工作，页面内容必须在"w3-main"类之内	尝试一下 »
w3-main	使用 w3-collapse 类进行响应式侧边栏时页面内容的容器	尝试一下 »
	全自动右侧响应式侧边导航栏	尝试一下 »

---

下拉菜单（Dropdown）分类

类	定义
w3-dropdown-click	可点击的下拉元素	尝试一下 »
w3-dropdown-hover	悬浮式下拉元素	尝试一下 »
	可悬停的下拉元素（用于w3-bar)	尝试一下 »
	可悬停的下拉元素（用于w3-bar-block）	尝试一下 »
	可悬停的下拉元素（用于w3-sidebar）	尝试一下 »

---

按钮（Button）分类

类	定义
w3-button	悬停时带有灰色背景色的矩形按钮	尝试一下 »
w3-btn	带有悬停阴影的矩形按钮	尝试一下 »
w3-circle	可用于创建圆形按钮	尝试一下 »
w3-ripple	带有波纹效果的矩形按钮	尝试一下 »
	具有波纹效果的圆形浮动按钮	尝试一下 »
w3-bar	可用于将水平栏中的元素（如按钮）分组	尝试一下 »
w3-block	该类可用于定义全宽度 w3-button	尝试一下 »
	全宽度 w3-btn	尝试一下 »
	全宽度圆形按钮	尝试一下 »

---

表单（Input） 分类

类	定义
w3-input	输入元素	尝试一下 »
	输入表格作为卡	尝试一下 »
	输入元素（顶部标签）	尝试一下 »
	输入元素（底部标签）	尝试一下 »
w3-check	复选框输入类型	尝试一下 »
w3-radio	单选按钮输入类型	尝试一下 »
w3-select	选择列表输入类型	尝试一下 »
w3-animate-input	动画输入的宽度为100%	尝试一下 »

---

模态（Modal） 分类

类	定义
w3-modal	模态容器	尝试一下 »
w3-modal-content	模态弹出元素	尝试一下 »
w3-tooltip	工具提示元素	尝试一下 »
w3-text	工具提示文字	尝试一下 »

---

动画（Animation）分类

类	定义
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％的动画	尝试一下 »

---

字体和文本（Font and Text）分类

类	定义
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	将元素浮动到左侧（浮动：左侧）	尝试一下 »
w3-right	将元素浮动到右侧（浮动：右侧）	尝试一下 »
w3-left-align	左对齐文字	尝试一下 »
w3-right-align	右对齐文字	尝试一下 »
w3-justify	左右对齐的文字	尝试一下 »
w3-block	可用于为任何元素定义全宽的类	尝试一下 »
w3-circle	圆圈内容	尝试一下 »
w3-hide	隐藏的内容（显示：无）	尝试一下 »
w3-show	隐藏的内容（显示：块元素)	尝试一下 »
w3-show-block	w3-show 的别称 (显示：块元素)	尝试一下 »
w3-show-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内的悬停上显示内容	尝试一下 »

---

效果（Effect）分类

类	定义
w3-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	创建叠加效果	尝试一下 »

---

背景颜色（Background Color）分类

类	定义
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	透明背景色

---

悬停颜色（Hover Color）分类

上面的颜色也可以用作悬停类：

类	定义
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	悬停颜色淡绿色	尝试一下 »

---

文字颜色（Text Color）分类

类	定义
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	文字颜色棕色	尝试一下 »

---

悬停文字（Hover Text）分类

上面的文本类也可以用作悬停类：

类	定义
w3-hover-text-red	悬停文字颜色红色	尝试一下 »
w3-hover-text-green	悬停文字颜色为绿色	尝试一下 »
w3-hover-text-blue	悬停文字颜色为蓝色	尝试一下 »
w3-hover-text-yellow	悬停文字颜色黄色	尝试一下 »

---

其他悬停（Other Hover） 分类

类	定义
w3-hover-border-color	悬浮边框颜色	尝试一下 »
w3-hover-opacity	为悬停的元素添加透明度(不透明度:0.6)	尝试一下 »
w3-hover-opacity-off	从悬停的元素中移除透明度(100%不透明度)	尝试一下 »
w3-hover-shadow	为悬停的元素添加阴影	尝试一下 »
w3-hover-grayscale	为元素添加黑白(100%灰度)效果	尝试一下 »
w3-hover-sepia	为悬停的元素添加一个棕褐色效果	尝试一下 »
w3-hover-none	从元素中移除悬停效果	尝试一下 »

---

圆角（Round）分类

类	定义
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	尝试一下 »

---

填充（Padding ）分类

类	定义
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	尝试一下 »

---

边距（Margin）分类

类	定义
w3-margin	向元素添加16px的边距	尝试一下 »
w3-margin-top	向元素添加16px的上边距	尝试一下 »
w3-margin-right	向元素添加16px的右边距	尝试一下 »
w3-margin-bottom	向元素添加16px的底边距	尝试一下 »
w3-margin-left	向元素添加16px的左边距	尝试一下 »
w3-section	向元素添加16px的上边距和下边距	尝试一下 »

---

边框（Border） 分类

类	定义
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	可悬停的边框颜色	尝试一下 »