HTML CSS JAVASCRIPT BOOTSTRAP JQUERY PHP SQL PYTHON PYTHON2 JAVA C C++ C# Linux AI 教程库 参考手册 测验 练习 HOWTO FAQ
❮ 上一节 下一节 ❯

W3.CSS 实例

W3.CSS 颜色

背景颜色 文本颜色 悬停颜色

实例解析

W3.CSS 容器

容器 有颜色的容器 容器头使用 <div> 容器头使用 <header> 容器页脚使用 <div> 容器页脚使用 <footer> 容器 <article> 和 <section> 带有 <div> 元素的容器 带有语义元素的容器 容器填充 带有标题和段落的容器

实例解析

W3.CSS 边框

边框 彩色边框 圆形边框 粗边框 悬停边框

实例解析

W3.CSS 面板

面板 面板注释 面板引用 面板提醒 面板卡片 圆形面板 Hide/close 面板 Show/Open 面板

实例解析

W3.CSS 卡片

卡片 彩色卡片 卡片内容 照片卡片 可悬停卡片 带按钮的头像卡片 带全角按钮的头像卡片 卡片小部件

实例解析

W3.CSS 字体

标题 字体大小类 覆盖 W3.CSS 默认值 更改默认页面字体 如何使用字体类 如何使用外部字体 外部谷歌字体 font: lobster 字体效果 字体效果 2

实例解析

W3.CSS 文本

文本对齐 居中元素 宽文本 文字阴影 文本不透明度 文字特效

实例解析

W3.CSS 圆

Round 类 Circle 类 圆圈内的文字 圆内圆 圆内圆 2

实例解析

W3.CSS 填充

填充编号类 填充大小类

实例解析

W3.CSS 边距

四边边距 边距顶部 边距底部 左边距 右边距 边距部分

实例解析

W3.CSS Display

Display 容器 带内边距的 Display 显示容器 图像 Display 显示容器 显示标志 浮动类 隐藏和显示类 切换隐藏和显示

实例解析

W3.CSS 按钮

按钮 按钮颜色 悬停颜色 按钮形状 按钮大小 按钮边框 带有文字效果的按钮 带有宽文本效果的按钮 填充按钮 左右按钮 全宽度按钮 禁用按钮 同一行的按钮组 按钮栏 带涟漪效果的按钮

实例解析

W3.CSS 注释

注释 灰色圆边 淡蓝色左右横条 淡红色，左栏 淡黄色带边框 带边框和底栏的浅绿色 黄色，顶部和底部栏

实例解析

W3.CSS 引用

引号 大引号 块引用 自定义引号1 自定义引号2 自定义引号3 黑色引号 以卡片形式引用 引用为卡片 2

实例解析

W3.CSS 警报

基本警报 可关闭警报 圆形警报 提醒卡片

实例解析

W3.CSS 表格

基本表格 带边框的表格（水平分隔线） 条纹表 边框条纹表 表格周围的边框 表格全部（结合条纹、边框等 ) 翻转条纹 居中表格 带有彩色标题的表格 表格颜色 可悬停表格（灰色） 特定的悬停表格颜色 表格卡 响应式表格 小桌子 小表格 大表 xLarge table xxLarge table xxxLarge table 巨型表

实例解析

W3.CSS 列表

基本列表 带边框的列表 列表标题 列表卡片 居中列表 彩色列表 彩色列表项
悬停列表（灰色）
特定的悬停列表颜色
可关闭列表
填充列表
头像列表
小列表 小清单 大列表 超大列表 xxLarge list xxxLarge list 巨型列表

实例解析

W3.CSS 图片

圆形图像 带圆圈的图片 带边框的图片 图片卡片 图片文字 响应式图片 最大宽度的响应式图片 图像不透明度 图像灰度 深褐色图片 图像悬停效果 关闭图像不透明度 相册

实例解析

W3.CSS 输入

顶部标签 底部标签 输入卡片 彩色标签 带边框的输入 圆形边框 无边框输入 彩色输入 悬停输入 动画输入 复选框 单选按钮 选择菜单 带边框的选择菜单 三列网格中的表单元素 带标签的两列布局

实例解析

W3.CSS 徽章

徽章 彩色徽章 按钮中的徽章 列表中的徽章 I 列表 II 中的徽章 表格中的徽章 大徽章 UTF-8 徽章

实例解析

W3.CSS 标记、标签和标志

标记和标签 彩色标签 大标签 字母标签 一行中的标签 作为标志标记 路标 大标志 大标志 2 圆形标志 旋转标签 旋转标签

实例解析

W3.CSS 图标

超棒的字体图标 Google Material Design 图标 Bootstrap 图标

实例解析

W3.CSS 自适应

w3-half 类 w3-third 类 w3-twothird 类 w3-quarter 类 w3-threequarter 类 嵌套行（w3-half 在 w3-half 内） 使用 w3-rest 的列 使用百分比的列 w3-content 类 w3-row 和 w3-row-padding 的区别

实例解析

W3.CSS 动画

顶部动画 底部动画 左侧动画 右侧动画 淡入淡出动画 渐变无限动画 缩放动画 旋转动画 全部淡化

实例解析

W3.CSS 下拉菜单

悬停下拉菜单 悬停下拉菜单 导航栏中的下拉菜单 可点击的下拉菜单 图片下拉列表 卡片下拉菜单 动画下拉菜单 右对齐下拉菜单

实例解析

W3.CSS 手风琴

基本手风琴 手风琴按钮 活动手风琴 手风琴宽度 手风琴链接 带列表的手风琴卡片 边栏中的手风琴和下拉菜单 动画手风琴

实例解析

W3.CSS 导航

基本导航 彩色导航栏 边框导航栏 导航栏中的活动链接 悬停导航栏链接 右对齐链接 导航栏字体大小 导航栏内边距 导航栏宽度 导航栏图标 输入导航栏 带下拉菜单的导航栏 带有活动下拉菜单和图标的导航栏 带有可点击下拉菜单的导航栏 顶部导航栏 底部导航栏 可折叠导航栏

实例解析

W3.CSS 边栏

基本侧边栏（始终显示） 可折叠侧边栏 侧边栏隐藏部分页面内容 侧边栏隐藏所有页面内容 侧边栏内容向右移动 侧边栏颜色 带边框的边栏 底部边框侧边栏（分隔线） 侧边栏卡片 悬停侧边栏链接（背景色） 悬停侧边栏链接（文本颜色） 侧边栏大小 带图标的侧边栏（图标栏） 带下拉菜单的侧边栏 手风琴边栏 动画侧边栏 带叠加效果的侧边栏 带有内容的边栏

实例解析

W3.CSS 标签

基本选项卡 活动/当前标签 垂直标签 动画标签内容 标签式图片库 网格中的选项卡

实例解析

W3.CSS 分页

基本分页 分页箭头 活动分页链接 分页悬停颜色 分页大小 边框分页 圆形边框分页 居中分页 下一个/上一个分页箭头 分页菜单

实例解析

W3.CSS 进度条

基本进度条 进度条宽度 进度条大小 进度条颜色 圆形进度条 进度条标签 动态进度条 居中标签的动态进度条 带有左对齐标签的动态进度条< /a> 标签放在外面的动态进度条

实例解析

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 过滤器

过滤表 过滤列表 过滤下拉菜单（点击） 过滤下拉列表（悬停）

实例解析


❮ 上一节 下一节 ❯