W3.CSS 容器
这是我的标题
这是我的文章
这篇文章是浅灰色的，文字是棕色的。 这篇文章是浅灰色的，文字是棕色的。 这篇文章是浅灰色的，文字是棕色的。 这篇文章是浅灰色的，文字是棕色的。 这篇文章是浅灰色的，文字是棕色的。
这是我的页脚
容器类
w3-container 类向任何 HTML 元素添加 16px 的左右填充。
w3-container 类是用于所有 HTML 容器元素的完美类，例如:
<div>, <article>, <section>, <header>, <footer>, <form>, and more.
容器提供了相等性
w3-container 为所有 HTML 容器元素提供相等性:
- 通用边距
- 通用填充
- 通用的对齐方式
- 通用字体
- 通用颜色
要使用容器，只需将 w3-container 类添加到任何元素:
要添加颜色，只需添加一个w3-color类:
页眉和页脚
w3-container 类可用于设置标题样式:
页眉
W3.CSS 处理 <div> 和 <header> 元素的方式没有区别。
w3-container 类可用于设置页脚样式:
实例
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
亲自试一试 »
Many web pages use <div> elements instead of <header> and <footer> elements.
文章和章节
w3-container 类可用于设置 <article> 和 <section> 元素的样式:
实例
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
亲自试一试 »
许多网页使用 <div> 元素而不是 <article> 和 <section> 元素。
Web Page 实例
Header
汽车是一种用于运输的轮式、自行驱动的机动车辆。 该术语的大多数定义都指定汽车主要设计用于在道路上行驶。 （维基百科）
使用 HTML <div> 元素的示例
<div class="w3-container w3-red">
<h1>Header</h1>
</div>
<img src="img_car.jpg" alt="Car" style="width:100%">
<div
class="w3-container">
<p>汽车是一种用于运输的轮式、自行驱动的机动车辆。 该术语的大多数定义都指定汽车主要设计用于在道路上行驶。 （维基百科）</p>
</div>
<div class="w3-container
w3-red">
<h5>Footer</h5>
</div>
亲自试一试 »
使用 HTML 语义元素的示例
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
<img src="img_car.jpg" alt="Car" style="width:100%">
<article
class="w3-container">
<p>汽车是一种用于运输的轮式、自行驱动的机动车辆。 该术语的大多数定义都指定汽车主要设计用于在道路上行驶。 （维基百科）</p>
</article>
<footer class="w3-container
w3-teal">
<h5>Footer</h5>
</footer>
亲自试一试 »
容器填充
w3-container 类有默认的 16px 左右内边距，没有上下内边距:
我没有顶部或底部填充
通常您不必更改容器的默认填充，因为段落和标题提供的边距将模拟填充。
我是标题
我是段落。
