W3.CSS Containers (容器)

2020-11-30 09:55 更新

实例

<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 类添加到任何元素:

实例

<div class="w3-container">

  <p>w3-container 是最重要的 W3.CSS 类之一。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

要添加颜色,只需添加 w3-color 类:

实例

<div class="w3-container w3-red">

  <p>伦敦是英格兰的首都。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

页眉和页脚

w3-container 类可以用来风格标题:

  标头

实例

<div class="w3-container w3-teal">

  <h1>标头</h1>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

W3.CSS处理<div>和<header>元素的方式没有什么不同。

w3-container 类可以用来风格页脚:

  页脚
   页脚信息在这里

实例

<div class="w3-container w3-teal">

  <h5>页脚</h5>

  <p>页脚信息在这里。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例

实例

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


网页示例

  标头

img_car

汽车是用于运输的轮式自供电汽车。该术语的大多数定义都指定汽车主要在道路上行驶。(维基百科)

  页脚

使用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>


尝试一下 »
点击“尝试一下”按钮查看在线实例

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

  我是标题
      我是一段

实例

<div class="w3-container w3-blue">

    <h1>我是标题</h1>

    <p>我是一段。</p>

</div>


尝试一下 »
点击“尝试一下”按钮查看在线实例



以上内容是否对您有帮助:

您可能还喜欢:

在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号