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


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

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号