W3.CSS Examples (示例)
W3.CSS 颜色
背景颜色
尝试一下 »
文字颜色
尝试一下 »
悬停颜色
尝试一下 »
实例说明 »
W3.CSS 容器
容器
尝试一下 »
容器颜色
尝试一下 »
使用 <div> 的容器头部
尝试一下 »
使用 <header> 的容器头部
尝试一下 »
尝试一下 »
使用 <div> 的容器页脚
尝试一下 »
尝试一下 »
使用 <footer> 的容器页脚
尝试一下 »
尝试一下 »
容器的 <article> 和 <section>
尝试一下 »
具有 <div> 元素的容器
尝试一下 »
具有语义元素的容器
尝试一下 »
容器填充
尝试一下 »
带标题和段落的容器
尝试一下 »
实例说明 »
W3.CSS 边框
边框
尝试一下 »
边框颜色
尝试一下 »
圆角边框
尝试一下 »
粗边框
尝试一下 »
可悬停的边框
尝试一下 »
实例说明 »
W3.CSS 面板
面板
尝试一下 »
笔记面板
尝试一下 »
引用面板
尝试一下 »
警告面板
尝试一下 »
卡片式面板
尝试一下 »
圆角面板
尝试一下 »
隐藏/关闭面板
尝试一下 »
显示/打卡面板
尝试一下 »
实例说明 »
W3.CSS 卡片
卡片
尝试一下 »
彩色卡片
尝试一下 »
卡片内容
尝试一下 »
相片卡
尝试一下 »
悬停卡片
尝试一下 »
带按钮的头像卡
尝试一下 »
带全角按钮的头像卡
尝试一下 »
卡片小部件
尝试一下 »
实例说明 »
W3.CSS 字体
标题
尝试一下 »
字体大小类
尝试一下 »
覆盖 W3.CSS 默认值
尝试一下 »
更改默认页面字体
尝试一下 »
如何使用字体类
尝试一下 »
如何使用外部字体
尝试一下 »
外部 Google 字体：lobster
尝试一下 »
字体效果
尝试一下 »
字体效果 2
尝试一下 »
实例说明 »
W3.CSS 边距
所有边边距
尝试一下 »
上边距
尝试一下 »
下边距
尝试一下 »
尝试一下 »
左边距
尝试一下 »
尝试一下 »
右边距
尝试一下 »
尝试一下 »
块边距
尝试一下 »
实例说明 »
W3.CSS 显示
显示容器
尝试一下 »
带边距的容器显示
尝试一下 »
图像容器显示
尝试一下 »
显示标志
尝试一下 »
浮动类
尝试一下 »
隐藏和显示类
尝试一下 »
切换隐藏和显示
尝试一下 »
实例说明 »
W3.CSS 按钮
按钮
尝试一下 »
按钮颜色
尝试一下 »
悬停颜色
尝试一下 »
按钮形状
尝试一下 »
按钮尺寸
尝试一下 »
按钮边框
尝试一下 »
具有文本效果的按钮
尝试一下 »
具有宽文本效果的按钮
尝试一下 »
填充按钮
尝试一下 »
左右按钮
尝试一下 »
全宽度按钮
尝试一下 »
禁用的按钮
尝试一下 »
同一行上的按钮组
尝试一下 »
按钮栏
尝试一下 »
具有波纹效果的按钮
尝试一下 »
实例说明 »
W3.CSS 注释
注释
尝试一下 »
灰色，带有圆形边框
尝试一下 »
淡蓝色，带有左右边栏
尝试一下 »
淡红色，带有左边栏
尝试一下 »
淡黄色，带边框
尝试一下 »
浅绿色，带边框和底部栏
尝试一下 »
黄色，带顶部和底部栏
尝试一下 »
实例说明 »
W3.CSS引用
引用
尝试一下 »
显著的引用
尝试一下 »
块引用
尝试一下 »
自定义引用 1
尝试一下 »
自定义引用 2
尝试一下 »
自定义引用 3
尝试一下 »
黑色引用
尝试一下 »
引用作为卡片 1
尝试一下 »
引用作为卡片 2
尝试一下 »
实例说明 »
W3.CSS警报
基本警告
尝试一下 »
可关闭的警告
尝试一下 »
圆角警告
尝试一下 »
卡片式警告
尝试一下 »
实例说明 »
W3.CSS 表
基本表
尝试一下 »
带边框的表（水平分割线）
尝试一下 »
条纹表
尝试一下 »
带边框的条纹表
尝试一下 »
表格周围的边框
尝试一下 »
显示表格所有属性（组合条纹，边框等）
尝试一下 »
翻转条纹
尝试一下 »
表格内容居中
尝试一下 »
带有颜色标题的表
尝试一下 »
彩色表
尝试一下 »
可悬停的表（灰色）
尝试一下 »
特定的可悬停表格颜色
尝试一下 »
卡片化表格
尝试一下 »
响应式表格
尝试一下 »
Tiny 表
尝试一下 »
Small 表
尝试一下 »
Large 表
尝试一下 »
xLarge 表
尝试一下 »
xxLarge 表
尝试一下 »
xxxLarge 表
尝试一下 »
Jumbo 表
尝试一下 »
实例说明 »
W3.CSS 列表
基本列表
尝试一下 »
带边框的列表
尝试一下 »
列表标题
尝试一下 »
卡片化列表
尝试一下 »
列表内容居中
尝试一下 »
彩色列表
尝试一下 »
彩色列表行
尝试一下 »
悬停列表（灰色）
尝试一下 »
特定颜色的可悬停列表
尝试一下 »
可关闭的列表
尝试一下 »
填充列表
尝试一下 »
头像列表
尝试一下 »
Tiny 列表
尝试一下 »
Small 列表
尝试一下 »
Large 列表
尝试一下 »
xLarge 列表
尝试一下 »
xxLarge 列表
尝试一下 »
xxxLarge 列表
尝试一下 »
Jumbo 列表
尝试一下 »
实例说明 »
W3.CSS 图像
圆角图像
尝试一下 »
带圆圈的图像
尝试一下 »
带边框的图像
尝试一下 »
卡片化图像
尝试一下 »
图像文本
尝试一下 »
响应式图像
尝试一下 »
最带宽度的响应图像
尝试一下 »
图像不透明度
尝试一下 »
图像灰度
尝试一下 »
图像棕褐色
尝试一下 »
图像悬停效果
尝试一下 »
图像不透明度关闭
尝试一下 »
相片集
尝试一下 »
实例说明 »
W3.CSS 输入
顶部标签
尝试一下 »
底部标签
尝试一下 »
卡片式输入
尝试一下 »
彩色标签
尝试一下 »
带边框的输入
尝试一下 »
圆角边框
尝试一下 »
无边界的输入
尝试一下 »
彩色输入框
尝试一下 »
悬停输入
尝试一下 »
动画输入
尝试一下 »
选框
尝试一下 »
单选按钮
尝试一下 »
选择菜单
尝试一下 »
带边框的选择菜单
尝试一下 »
网格中的表单元素
尝试一下 »
带标签的两栏式布局
尝试一下 »
实例说明 »
W3.CSS 标记
标记
尝试一下 »
彩色标记
尝试一下 »
按钮中的标记
尝试一下 »
列表中的标记 1
尝试一下 »
列表中的标记 2
尝试一下 »
表中的标记
尝试一下 »
标记尺寸
尝试一下 »
UTF-8 标记
尝试一下 »
实例说明 »
W3.CSS 标签
标签
尝试一下 »
彩色标签
尝试一下 »
标签尺寸
尝试一下 »
字母标签
尝试一下 »
连续标签
尝试一下 »
标签为标志
尝试一下 »
路标
尝试一下 »
显著的标志 1
尝试一下 »
显著的标志 2
尝试一下 »
圆角标识
尝试一下 »
指定标签角度
尝试一下 »
旋转标签
尝试一下 »
实例说明 »
W3.CSS 图标
字体图标
尝试一下 »
Google 物料设计图标
尝试一下 »
引导程序图标
尝试一下 »
实例说明 »
W3.CSS 响应式
w3-half 类
尝试一下 »
w3-third 类
尝试一下 »
w3-twothird 类
尝试一下 »
w3-quarter 类
尝试一下 »
w3-threequarter 类
尝试一下 »
嵌套的行（w3-half inside w3-half）
尝试一下 »
使用 w3-rest 的栏
尝试一下 »
列使用百分比
尝试一下 »
w3-content 类
尝试一下 »
w3-row 和 w3-row-padding 的区别
尝试一下 »
实例说明 »
W3.CSS 动画
顶部动画
尝试一下 »
底部动画
尝试一下 »
左部动画
尝试一下 »
右部动画
尝试一下 »
淡入淡出的动画
尝试一下 »
淡入淡出的无限动画
尝试一下 »
缩放动画
尝试一下 »
旋转动画
尝试一下 »
全部淡入
尝试一下 »
实例说明 »
W3.CSS 下拉菜单
悬停下拉菜单 1
尝试一下 »
悬停下拉菜单 2
尝试一下 »
导航栏中的下拉菜单
尝试一下 »
可点击的下拉菜单
尝试一下 »
图像下拉菜单
尝试一下 »
卡片式下拉菜单
尝试一下 »
动画下拉菜单
尝试一下 »
右对齐下拉菜单
尝试一下 »
实例说明 »
W3.CSS 折叠栏
基本折叠栏
尝试一下 »
折叠栏按钮
尝试一下 »
点击式折叠栏
尝试一下 »
折叠栏宽度
尝试一下 »
折叠栏链接
尝试一下 »
折叠栏与列表
尝试一下 »
侧栏中的折叠栏和下拉菜单
尝试一下 »
动画折叠栏
尝试一下 »
实例说明 »
W3.CSS 导航栏
基本导航
尝试一下 »
导航栏颜色
尝试一下 »
导航栏边框
尝试一下 »
导航栏中的链接
尝试一下 »
可悬停的导航链接
尝试一下 »
右对齐链接
尝试一下 »
导航栏字体大小
尝试一下 »
导航栏填充
尝试一下 »
导航栏宽度
尝试一下 »
导航栏图标
尝试一下 »
带输入的导航栏
尝试一下 »
带下拉菜单的导航栏
尝试一下 »
具有水平下拉菜单的导航栏
尝试一下 »
带有可点击下拉菜单的导航栏
尝试一下 »
顶部导航栏
尝试一下 »
底部导航栏
尝试一下 »
可折叠导航栏
尝试一下 »
实例说明 »
W3.CSS 侧栏
基本侧栏（始终显示）
尝试一下 »
可折叠侧栏
尝试一下 »
侧栏打开遮挡所有页面内容
尝试一下 »
将页面内容向右滑动
尝试一下 »
彩色侧栏
尝试一下 »
带边框的侧栏
尝试一下 »
底部边框的侧栏（分割线）
尝试一下 »
卡片式侧栏
尝试一下 »
可悬停的侧栏链接（背景色）
尝试一下 »
可悬停的侧栏链接（文本颜色）
尝试一下 »
侧栏尺寸
尝试一下 »
带有图标的侧栏
尝试一下 »
带有图标的侧栏（图标栏）
尝试一下 »
带有下拉菜单的侧栏
尝试一下 »
带有折叠栏的侧栏
尝试一下 »
动画侧栏
尝试一下 »
带有叠加效果的侧栏
尝试一下 »
带有内容的侧栏
尝试一下 »
实例说明 »
W3.CSS 导航栏标签
基本标签
尝试一下 »
活动/当前标签
尝试一下 »
垂直标签
尝试一下 »
动画标签内容
尝试一下 »
标签式图库
尝试一下 »
网格中的标签
尝试一下 »
实例说明 »
W3.CSS 分页
基本分页
尝试一下 »
分页箭头
尝试一下 »
活动/当前链接
尝试一下 »
分页悬停颜色
尝试一下 »
分页大小
尝试一下 »
分页边框
尝试一下 »
圆角分页
尝试一下 »
分页居中
尝试一下 »
上一个/下一个分页箭头
尝试一下 »
分页菜单
尝试一下 »
实例说明 »
W3.CSS 进度条
基本进度条
尝试一下 »
进度条宽度
尝试一下 »
进度条大小
尝试一下 »
进度条颜色
尝试一下 »
圆角进度条
尝试一下 »
进度条标签
尝试一下 »
动态进度条
尝试一下 »
动态进度条带有居中标签
尝试一下 »
动态进度条带有左对齐标签
尝试一下 »
动态进度条带有外部标签
尝试一下 »
实例说明 »
W3.CSS 幻灯片
带有图像的手动幻灯片显示
尝试一下 »
自动幻灯片播放图像
尝试一下 »
自动 HTML 幻灯片
尝试一下 »
幻灯片标题
尝试一下 »
带有数字和上一个/下一个按钮的幻灯片显示指示器
尝试一下 »
带有图标和项目符号的幻灯片指示器
尝试一下 »
图片作为指示
尝试一下 »
动画幻灯片
尝试一下 »
自动幻灯片放映
尝试一下 »
实例说明 »
W3.CSS 模式
基本模式（对话框/弹出窗口）
尝试一下 »
带容器的模式
尝试一下 »
卡片式模式
尝试一下 »
动画模式
尝试一下 »
淡入模式
尝试一下 »
模式图像
尝试一下 »
模式图库
尝试一下 »
模式登录表格
尝试一下 »
模式标签
尝试一下 »
如何关闭模式
尝试一下 »
模式灯箱（模态图库）
尝试一下 »
实例说明 »
W3.CSS 工具提示
内联工具提示文字
尝试一下 »
内敛工具提示标签
尝试一下 »
可悬停图片前的工具提示文字
尝试一下 »
可悬停图片后的工具提示文字
尝试一下 »
绝对工具图示
尝试一下 »
彩色工具提示
尝试一下 »
圆形工具提示
尝试一下 »
小工具提示
尝试一下 »
大工具提示
尝试一下 »
实例说明 »
W3.CSS 响应式网格
流体网格演示
尝试一下 »
两列相等
尝试一下 »
两列不相等
尝试一下 »
三个相等的类
尝试一下 »
三个不相等的类
尝试一下 »
六个相等的列
尝试一下 »
混合：手机和笔记本电脑
尝试一下 »
混合：手机、平板电脑和笔记本电脑
尝试一下 »
w3-row 和 w3-row-padding 的区别
尝试一下 »
使用 w3-rest 的栏
尝试一下 »
列使用百分比
尝试一下 »
实例说明 »
W3.CSS 代码
显示例子
尝试一下 »
显示代码
尝试一下 »
突出显示 HTML
尝试一下 »
突出显示 CSS
尝试一下 »
突出显示的 JavaScript 代码
尝试一下 »
显示内敛代码（w3-codespan）
尝试一下 »
实例说明 »
W3.CSS 过滤器
筛选表
尝试一下 »
筛选列表
尝试一下 »
过滤下拉列表（点击）
尝试一下 »
过滤下拉菜单（悬停）
尝试一下 »
实例说明 »