W3CSS 教程

W3.CSS Containers 容器

这是我的标题

这是我的文章

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

这是我的页脚

容器类

的W3-容器类增加了一个16像素左右填充到任何HTML元素。

在W3容器类是用于所有HTML容器元素像是一个完美的类：

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

容器提供平等

在W3容器提供了所有的HTML容器元素的平等：

  • 常见边距

  • 常见的填充

  • 常见的对齐方式

  • 常用字体

  • 常用颜色

要使用容器，只需将w3-container类添加到任何元素：

例子 (Example)

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

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

例子 (Example)

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

页眉和页脚

在W3容器类可以用来风格标题：

标题

例子 (Example)

<div class="w3-container w3-teal">
  <h1>Header</h1>
</div>
       自己试试 »

例子 (Example)

<header class="w3-container w3-teal">
  <h1>Header</h1>
</header>
       自己试试 »

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

在W3容器类可以用来风格页脚：


页脚

页脚信息在这里


例子 (Example)

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

例子 (Example)

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

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

文章和章节

的W3-容器类可以用来风格<文章>和<段>的元素：

例子 (Example)

<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> 元素。

网页示例

标题

车

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


页脚


例子 (Example)

<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>
       自己试试 »

例子 (Example)

<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容器类有一个默认的16px的左右填充，没有顶部或底部填充：

我没有顶部或底部填充

例子 (Example)

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

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

我是标题

我是一个段落。

例子 (Example)

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


上一主题 W3.CSS Colors 颜色 下一主题 W3.CSS Panels 面板
  • 使用社交账号登录,本站支持
全部评论(0)

便捷工具