W3.CSS 集装箱

这是我的标题

这是我的文章

这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。这篇文章是浅灰色的，文字是棕色的。

这是我的页脚

容器类

这个w3-容器类向任何 HTML 元素添加 16px 左右填充。

这个w3-容器class 是用于所有 HTML 容器元素的完美类，例如：

<div>、<article>、<section>、<header>、<footer>、<form> 等。

容器提供平等

这个w3-容器为所有 HTML 容器元素提供平等性：

共同边距
常用填充物
常见的对齐方式
常用字体
常见颜色

要使用容器，只需添加一个w3-容器任何元素的类：

示例

<div class="w3-container">
<p>The w3-container class is an important w3.CSS class.</p>
</div>

亲自试一试»

要添加颜色，只需添加w3-颜色类：

示例

<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>

亲自试一试»

页眉和页脚

这个w3-容器类可用于设置标题样式：

标头

示例

<div class="w3-container w3-teal">
<h1>Header</h1>
</div>

亲自试一试»

示例

<header class="w3-container w3-teal">
<h1>Header</h1>
</header>

亲自试一试»

W3.CSS 处理 <div> 和 <header> 元素的方式没有区别。

这个w3-容器类可用于设置页脚样式：

示例

<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>

亲自试一试»

示例

<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>

亲自试一试»

许多网页使用 <div> 元素而不是 <header> 和 <footer> 元素。

文章和章节

这个w3-容器类可用于设置 <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> 元素。

网页示例

标头

汽车是一种用于运输的轮式自驱动机动车辆。该术语的大多数定义都指定汽车主要在道路上行驶。（维基百科）

使用 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>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</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>A car is a wheeled, self-powered motor vehicle used for transportation. Most definitions of the term specify that cars are designed to run primarily on roads. (Wikipedia)</p>
</article>

<footer class="w3-container w3-teal">
<h5>Footer</h5>
</footer>

亲自试一试»

集装箱填料

这个w3-容器类有一个默认值16像素左右内边距，没有顶部或底部内边距：

我没有顶部或底部填充

示例

<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>

亲自试一试»

通常，您不必更改容器的默认填充，因为段落和标题提供了模拟填充的边距。

我是一个标题

我是一个段落。

示例

<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>

亲自试一试»