阅读(2.3k) 书签赞(0) 我要纠错

W3.CSS Reference（参考）

2020-12-08 16:30 更新

容器（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	可悬停的边框颜色	尝试一下 »

以上内容是否对您有帮助：

← W3.CSS Mobile（移动）

W3.CSS Color (颜色类) →

写笔记

我要补充

W3.CSS Reference（参考）

表格 （Table）分类

卡片（Cards）分类

响应式（Responsive）分类

布局（Layout）分类

导航栏标签（Navigation）分类

下拉菜单（Dropdown）分类

按钮（Button）分类

表单（Input） 分类

模态（Modal） 分类

动画（Animation）分类

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

显示（display）分类

效果（Effect）分类

背景颜色（Background Color）分类

悬停颜色（Hover Color）分类

文字颜色（Text Color）分类

悬停文字（Hover Text）分类

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

其他悬停（Other Hover） 分类

圆角（Round）分类

填充（Padding ）分类

边距（Margin）分类

边框（Border） 分类

推荐文章

推荐教程

推荐课程

表格（Table）分类

表单（Input）分类

模态（Modal）分类

其他悬停（Other Hover）分类

边框（Border）分类