W3.CSS Containers (容器)
实例
<div class="w3-container w3-black">
<h2><font style="vertical-align: inherit;"><font style="vertical-align: inherit;">这是我的标题</font></font></h2>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
集装箱类
w3-container 类增加了一个16像素左右填充到任何HTML元素。
w3-container 类是用于所有HTML容器元素像是一个完美的类：
<div>，<article>，<section>，<header>，<footer>，<form>等。
容器提供平等
w3-container 提供了所有的 HTML 容器元素的平等：
- 共同利润
- 常用填充
- 常见比对
- 常用字体
- 常用颜色
要使用容器，只需将 w3-container 类添加到任何元素：
要添加颜色，只需添加 w3-color 类：
页眉和页脚
w3-container 类可以用来风格标题：
W3.CSS处理<div>和<header>元素的方式没有什么不同。
w3-container 类可以用来风格页脚：
页脚信息在这里
实例
<footer class="w3-container w3-teal">
<h5>页脚</h5>
<p>页脚信息在这里。</p>
</footer>
尝试一下 »
点击“尝试一下”按钮查看在线实例
许多网页使用<div>元素而不是<header>和<footer>元素。
文章和章节
w3-container 类可以用来风格<article>和<section>的元素：
实例
<div class="w3-container">
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，拥有超过900万居民。</p>
<hr>
</div>
<article class="w3-container">
<h2>巴黎</h2>
<p>巴黎地区是欧洲最大的人口中心之一，人口超过200万。</p>
<hr>
</article>
<section class="w3-container">
<h2>东京</h2>
<p>东京是大东京地区的中心，也是世界上人口最多的都市区。</p>
<hr>
</section>
尝试一下 »
点击“尝试一下”按钮查看在线实例
许多网页使用<div>元素而不是<article>和<section>元素。
网页示例
汽车是用于运输的轮式自供电汽车。该术语的大多数定义都指定汽车主要在道路上行驶。（维基百科）
使用HTML<div>元素的示例
<div class="w3-container">
<p>汽车是用于运输的轮式自供电汽车。该术语的大多数定义都指定汽车主要在道路上行驶。（维基百科）</p>
</div>
<div class="w3-container w3-red">
<h5>页脚</h5>
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
使用HTML语义元素的示例
<header class="w3-container w3-teal">
<h1>标头</h1>
</header>
<img src="https://atts.w3cschool.cn/img_car.jpg" alt="Car" style="width:100%">
<article class="w3-container">
<p>汽车是用于运输的轮式自供电汽车。该术语的大多数定义都指定汽车主要在道路上行驶。（维基百科）</p>
</article>
<footer class="w3-container w3-teal">
<h5>页脚</h5>
</footer>
尝试一下 »
点击“尝试一下”按钮查看在线实例
容器填充
在 w3-container 类有一个默认的 16px 的左右填充，没有顶部或底部填充：
实例
<div class="w3-container w3-blue">
w3-container类具有默认的16px左右填充，没有顶部或底部填充。
</div>
尝试一下 »
点击“尝试一下”按钮查看在线实例
通常，您不必更改容器的默认填充，因为段落和标题提供了可模拟填充的边距。
我是一段