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 类提供所有尺寸和类型的按钮。