W3.CSS 容器
这是我的标题
这是我的文章
这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。这篇文章是浅灰色，文字是棕色。
这是我的页脚
容器类
w3-container 类为任何 HTML 元素添加 16 像素的左右填充。
w3-container 类是用于所有 HTML 容器元素的完美类，例如
<div>, <article>, <section>, <header>, <footer>, <form> 等等。
容器提供一致性
w3-container 为所有 HTML 容器元素提供一致性。
- 常用边距
- 常用填充
- 常用对齐方式
- 常用字体
- 常用颜色
要使用容器，只需将 w3-container 类添加到任何元素
要添加颜色，只需添加 w3-color 类
标题和页脚
w3-container 类可用于设置标题的样式
标题
W3.CSS 对 <div> 和 <header> 元素的处理方式没有区别。
w3-container 类可用于设置页脚的样式
许多网页使用 <div> 元素而不是 <header> 和 <footer> 元素。
文章和部分
w3-container 类可用于设置 <article> 和 <section> 元素的样式
例子
<div class="w3-container">
<h2>伦敦</h2>
<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> 元素。
网页示例
标题
汽车是一种有轮子、自驱动的机动车辆，用于交通运输。汽车一词的大多数定义都规定汽车主要是为了在道路上行驶而设计的。（维基百科）
使用 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 类默认具有 16 像素 的左右填充，并且没有顶部或底部填充
我没有顶部或底部填充
通常你不需要更改容器的默认填充，因为段落和标题提供了模拟填充的边距。
我是一个标题
我是一个段落。
