W3.CSS 容器
这是我的标题
这是我的文章
这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。
这是我的页脚
容器类
w3-container 类为任何 HTML 元素添加了 16px 的左内边距和右内边距。
w3-container 类是所有 HTML 容器元素（如
<div>、<article>、<section>、<header>、<footer>、<form> 等）的理想类。
容器提供平等
w3-container 为所有 HTML 容器元素提供平等
- 通用外边距
- 通用内边距
- 通用对齐方式
- 通用字体
- 通用颜色
要使用容器，只需将 w3-container 类添加到任何元素即可
要添加颜色，只需添加一个 w3-颜色 类
标题和页脚
w3-container 类可用于设置标题的样式
Header
W3.CSS 对 <div> 和 <header> 元素的处理方式没有区别。
w3-container 类可用于设置页脚的样式
许多网页使用 <div> 元素而不是 <header> 和 <footer> 元素。
文章和章节
w3-container 类可用于设置 <article> 和 <section> 元素的样式
示例
<div class="w3-container">
<h2>伦敦</h2>
<p>伦敦是英国人口最多的城市，</p>
大都市区人口超过 900 万。（维基百科）</p>
</div>
<article class="w3-container">
<h2>巴黎</h2>
<p>巴黎地区是欧洲最大的聚居区之一，
居民超过 200 万。</p>
</article>
<section class="w3-container">
<h2>东京</h2>
<p>东京是大东京都市圈的中心，
也是世界上人口最多的都市圈。</p>
</section>
自己试试 »
许多网页使用 <div> 元素而不是 <article> 和 <section> 元素。
网页示例
Header
汽车是一种带轮子的、自给动力的机动车辆，用于交通运输。该术语的大多数定义规定，汽车主要设计用于在道路上行驶。（维基百科）
使用 HTML <div> 元素的示例
<div class="w3-container w3-red">
<h1>页眉</h1>
</div>
<img src="img_car.jpg" alt="汽车" style="width:100%">
<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="img_car.jpg" alt="汽车" style="width:100%">
<article class="w3-container">
<p>汽车是一种带轮子的、自给动力的机动车辆，用于交通运输。该术语的大多数定义规定，汽车主要设计用于在道路上行驶。（维基百科）</p>
</article>
<footer class="w3-container w3-teal">
<h5>页脚</h5>
</footer>
自己试试 »
容器内边距
w3-container 类默认有 16px 的左内边距和右内边距，没有上内边距或下内边距。
我没有上内边距或下内边距
通常，您不必更改容器的默认内边距，因为段落和标题提供的外边距可以模拟内边距。
我是一个标题
我是一个段落。
