W3.CSS 简介
W3.CSS 颜色
这个w3-颜色课程的灵感来自于营销、路标和便签中使用的现代色彩：
W3.CSS 容器
这个w3-容器类是 W3.CSS 类中最重要的。它提供了如下的平等：
- 共同边距
- 常用填充物
- 常见的垂直对齐方式
- 常见的水平对齐方式
- 常用字体
- 常见颜色
w3-container 类通常与 HTML 容器元素一起使用，例如：
<div>、<header>、<footer>、<article>、<section>、<blockquote>、<form> 等。
这是一个标题
这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。
这是页脚。
W3.CSS 面板、注释和引言
这个w3面板类可以显示各种注释和引用：
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
伦敦是英国人口最多的城市，大都市区人口超过 900 万。
W3.CSS 警报
这个w3面板类也可用于各种警报：
危险！
红色通常表示危险或消极的情况。
警告！
黄色通常表示可能需要注意的警告。
成功！
绿色通常表示成功或积极的事情。
信息！
蓝色通常表示中性的信息变化或行动。
示例
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
亲自试一试»
W3.CSS 卡片
这个w3卡类适用于图片和注释：
一辆车
汽车是一种用于运输的轮式自驱动机动车辆。该术语的大多数定义都指定汽车主要在道路上运行，可容纳一到八人，并且通常有四个轮子。
（维基百科）
惊人的
法国阿尔卑斯山
示例
<div class="w3-card-4">
<img src="img_snowtops.jpg" alt="Alps">
<div class="w3-container w3-center">
<p>French Alps</p>
</div>
</div>
亲自试一试»
W3.CSS 表格
这个w3表类可以处理各种表：
| 名 | 姓 | 积分 |
|---|---|---|
| 吉尔 | 史密斯 | 50 |
| 前夕 | 杰克逊 | 94 |
| 亚当 | 约翰逊 | 67 |
| 安雅 | 孔径 | 100 |
W3.CSS 列表
这个w3-ul类可以处理各种列表：
-
麦克风
网站设计者 -
吉尔
支持 -
简
会计 -
杰克
顾问
示例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
亲自试一试»
W3.CSS 按钮
这个w3按钮和w3按钮类提供各种尺寸和类型的按钮。
宽按钮：
圆形或方形按钮：
W3.CSS 标记、标签、徽章和标志
这个w3 标签和w3-徽章类能够显示各种标签、标签、徽章和标志：
2 8 A 乙
新的 警告 危险 信息
呼吸
水下
W3.CSS 响应式
这个响应式网格类为所有设备类型提供响应能力：PC、笔记本电脑、平板电脑和移动设备。
1/2
1/2
1/3
1/3
1/3
1/3
2/3
1/4
1/4
1/4
1/4
1/2
1/4
1/4
2/3
1/3
1/1
1/4
1/4
1/2
1/4
1/2
1/4
50像素
休息
1/4
休息
100像素
45像素
休息
W3.CSS还支持12 列移动优先流体网格有小班、中班和大班。
W3.CSS 显示
这个w3-显示类允许您在特定位置显示 HTML 元素：
W3.CSS 模态框
这个w3-模态类提供纯 HTML 模式对话框：
模态图片：
W3.CSS 进度条
阅读更多内容W3.CSS进度条
W3.CSS 下拉菜单
这个w3-下拉菜单类提供下拉菜单：
W3.CSS 手风琴
阅读更多内容W3.CSS 手风琴
Lorem ipsum dolor sat amet，consectetur adipisicing elit，sed do eiusmod tempor incididunt ut laboure et dolore magna aliqua。 Ut enim ad minim veniam, quis nostrud exeritation ullamco labouris nisi ut aliquip ex ea commodo consequat.
带图片的手风琴：
法国阿尔卑斯山
W3.CSS 选项卡
选项卡非常适合单页 Web 应用程序或能够显示不同主题的网页。
伦敦
伦敦是英格兰的首都。
它是英国人口最多的城市，大都市区人口超过 900 万。
巴黎
巴黎是法国的首都。
巴黎地区是欧洲最大的人口中心之一，拥有超过 1200 万居民。
东京
东京是日本的首都。
它是大东京地区的中心，也是世界上人口最多的都市区。
选项卡式图片库（单击其中一张图片）：
W3.CSS导航
这个w3-酒吧类可用于创建导航栏：
带输入的导航栏：
带下拉菜单的导航栏：
这个w3-侧边栏类创建侧面导航：
W3.CSS 分页
W3.CSS 提供了简单的方法页面分页。
幻灯片
W3.CSS提供幻灯片用于循环浏览图片或其他内容：
灯箱
W3.CSS 动画
这个w3-动画类提供了一种简单的方法来滑动和淡入元素：
W3.CSS 图片
CSS 图片在 W3CSS 中很简单：
W3.CSS效果
添加特别效果对于任何元素：
不透明度
灰度
棕褐色
W3.CSS 输入表单
这个w3-输入类用于输入表单：
输入表格
输入表格
W3.CSS 过滤器
使用W3.CSS 过滤器在列表、表格、下拉列表等中搜索特定元素：
| 姓名 | 国家 |
|---|---|
| 阿尔弗雷德·富特基斯特 | 德国 |
| 伯格伦德斯纳布科普 | 瑞典 |
| 岛屿贸易 | 英国 |
| 埃森国王 | 德国 |
| 笑酒神巴克斯酒窖 | 加拿大 |
| 里乌尼蒂食品杂志 | 意大利 |
| 北/南 | 英国 |
| 巴黎特色菜 | 法国 |
W3.CSS 字体
使用 W3.CSS 添加起来非常容易字体到网页：
W3.CSS 工具提示
这个w3-工具提示类可以显示各种工具提示：
将鼠标悬停在该文本上！工具提示内容
将鼠标悬停在该文本上！工具提示内容
颜色主题
颜色主题可以轻松添加到任何 Web 应用程序中：
主题靛蓝
电影 2014
-
冷冻
对动画的反应很荒谬
-
我们星球上的错
触摸、抓握且制作精良
-
复仇者
漫威和迪士尼的巨大成功
主题青色
电影 2014
-
冷冻
对动画的反应很荒谬
-
我们星球上的错
触摸、抓握且制作精良
-
复仇者
漫威和迪士尼的巨大成功
颜色主题与移动应用程序完美匹配。