W3.CSS 简介 (Kitchen Sink)
W3.CSS 容器
w3-container 容器类是最重要的 W3.CSS 类。它提供如下的相等性:
- 常用边距
- 常用填充
- 常用的垂直对齐
- 常用的水平路线
- 常用字体
- 常用颜色
w3-container 容器类通常与 HTML 容器元素一起使用，例如:
<div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, and more.
这是页眉
这篇文章是浅灰色的，正文是棕色的。 这篇文章是浅灰色的，正文是棕色的。 这篇文章是浅灰色的，正文是棕色的。 这篇文章是浅灰色的，正文是棕色的。 这篇文章是浅灰色的，正文是棕色的。
这是页脚。
W3.CSS 面板、注释和引号
w3-panel 面板类可以显示各种注释和引号:
伦敦是英国人口最多的城市，拥有超过900万居民的大都市区。
伦敦是英国人口最多的城市，拥有超过900万居民的大都市区。
W3.CSS 警报
w3-panel 类还可用于各种警报:
危险!
红色通常表示危险或消极的情况。
警告!
黄色通常表示可能需要注意的警告。
成功!
绿色通常表示成功或积极的事情。
信息!
蓝色通常表示中性信息变化或行动。
实例
<div class="w3-panel w3-yellow">
<h3>Warning!</h3>
<p>Yellow often indicates a warning that might need attention.</p>
</div>
亲自试一试 »
W3.CSS 卡片
w3-card 卡片类适用于图像和注意事项:
A Car
汽车是一种用于运输的轮式、自驱动机动车。这个词的大多数定义都规定汽车主要在公路上行驶，有一到八个人的座位，通常有四个轮子。
(维基百科)
壮观
法国阿尔卑斯山
实例
<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-table 表类可处理各种表格:
| First Name | Last Name | Points |
|---|---|---|
| Jill | Smith | 50 |
| Eve | Jackson | 94 |
| Adam | Johnson | 67 |
| Anja | Bore | 100 |
W3.CSS 列表
w3-ul 类可以处理所有类型的列表:
-
Mike
Web Designer -
Jill
Support -
Jane
Accountant -
Jack
Advisor
实例
<ul class="w3-ul w3-border">
<li><h2>Names</h2></li>
<li>Jill</li>
<li>Eve</li>
<li>Adam</li>
</ul>
亲自试一试 »
W3.CSS 按钮
w3-button 和 w3-btn 类提供所有尺寸和类型的按钮。
宽按钮:
圆形或方形按钮:
W3.CSS Tags, Labels, Badges, 和 Signs
w3-tag 和 w3-badge 类是能够显示各种吊牌，标签，徽章和标志:
2 8 A B
New Warning Danger Info
BREATHE
UNDER WATER
W3.CSS 响应式
Responsive Grid 响应网格类为所有设备类型提供响应能力: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
50px
rest
1/4
rest
100px
45px
rest
W3.CSS 还支持具有小型、中型和大型类的 12列移动优先流体网格 。
W3.CSS 显示
w3-display 显示类允许您在特定位置显示HTML元素
W3.CSS 模态
w3-modal 模态类提供纯 HTML 格式的模态对话框:
模态图像:
W3.CSS 进度条
W3.CSS 下拉菜单
w3-dropdown 下拉列表类提供下拉列表:
W3.CSS 折叠块
在 W3.CSS 折叠块 阅读更多内容
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
Accordion with Images:
French Alps
W3.CSS 选项卡
Tabs 选项卡非常适合于单页 web 应用程序，或者适合于能够显示不同主题的 web 页面。
伦敦
London is the capital of England.
It is the most populous city in the United Kingdom, 拥有超过 900 万居民的大都市区。
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan area in the world.
选项卡式图像库（单击其中一张图片）:
W3.CSS 导航
w3-bar 导航类可以用来创建一个导航栏:
带输入的导航栏:
带下拉菜单的导航栏:
w3-sidebar 类创建一个侧部导航:
W3.CSS 分页
W3.CSS 为页面分页提供了简单的方法 page pagination 。
幻灯片
W3.CSS 提供 slideshows 幻灯片用以循环浏览图像或其他内容:
灯箱
结合 Modals 和 Slideshows 创建灯箱（模态图像库）:
W3.CSS 动画
w3-animate 动画类提供了在元素中滑动和淡入的简便方法:
W3.CSS 图像
在 W3CSS 中设置 图像 样式很容易:
W3.CSS 效果
向任何元素添加特殊 效果(effects):
Opacity
Grayscale
Sepia
W3.CSS 输入表单
w3-input 输入类用于输入表单:
输入表单
输入表单
W3.CSS 过滤器
使用 W3.CSS Filters 过滤器用于搜索列表、表格、下拉列表等中的特定元素:
| 名称 | 地区 |
|---|---|
| Alfreds Futterkiste | Germany |
| Berglunds snabbkop | Sweden |
| Island Trading | UK |
| Koniglich Essen | Germany |
| Laughing Bacchus Winecellars | Canada |
| Magazzini Alimentari Riuniti | Italy |
| North/South | UK |
| Paris specialites | France |
W3.CSS 字体
使用 W3.CSS 向网页添加 字体 非常容易:
W3.CSS 工具提示
w3-tooltip 类可以显示各种提示:
Hover over this text! Tooltip content
Hover over this text! Tooltip content
色彩主题
颜色主题可以轻松添加到任意 Web 应用程序中:
Theme Indigo
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
Theme Teal
Movies 2014
-
Frozen
The response to the animations was ridiculous
-
The Fault in Our Stars
Touching, gripping and genuinely well made
-
The Avengers
A huge success for Marvel and Disney
颜色主题非常适合移动端应用程序。
