W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

W3.CSS 容器



HTML 容器

典型的HTML容器元素有:

  • <div>
  • <header>
  • <footer>
  • <article>
  • <section>
  • <blockquote>

容器类

容器类对于提供以下功能很重要:

  • Common margins
  • Common paddings
  • Common vertical alignments
  • Common horizontal alignments
  • Common fonts
  • Common colors

W3.CSS w3-container 类是一个完美的HTML容器CSS类。 它可用于显示各种 headers,footers, articles,sections,alerts,notes,panels 或 quotes。

It only depends on what colors you choose !!!

Example

<div class="w3-container">
  <p>London is the most populous city in the United Kingdom.</p>
</div>
尝试一下 »

要添加颜色,只需添加一个 w3-color 类即可:

Example

<div class="w3-container w3-red">
  <p>London is the most populous city in the United Kingdom.</p>
</div>
尝试一下 »

显示面板和提示

提示通常以浅色和彩色条显示:

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Example

<div class="w3-container w3-pale-blue w3-leftbar w3-border-blue">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div>
尝试一下 »

面板可以以百万种方式显示:

London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.


London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.

Example

<div class="w3-container w3-light-grey w3-border">
  <p>London is the most populous city in the United Kingdom,
  with a metropolitan area of over 13 million inhabitants.</p>
</div> 
尝试一下 »

显示引用

w3-container 类经常用于显示引用。

"Make it as simple as possible, but not simpler."

Albert Einstein


"Make it as simple as possible, but not simpler."

Albert Einstein


"Make it as simple as possible, but not simpler."

Albert Einstein

Example

<div class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</div> 
尝试一下 »

如果你使用 HTML <blockquote>, 请记住HTML会添加额外的左边距:

"Make it as simple as possible, but not simpler."

Albert Einstein

Example

<blockquote class="w3-container w3-leftbar w3-light-grey">
  <p><i>"Make it as simple as possible, but not simpler."</i></p>
  <p>Albert Einstein</p>
</blockquote> 
尝试一下 »

页眉和页脚

如果想要创建一个页眉样式,请使用 w3-container 类:

Heading 1

Example

<header class="w3-container w3-teal">
  <h1>Heading 1</h1>
</header>
尝试一下 »

如果想要创建一个页脚样式,请使用 w3-container 类:

Footer

Footer information goes here

Example

<footer class="w3-container w3-teal">
  <h5>Footer</h5>
  <p>Footer information goes here</p>
</footer>
尝试一下 »


文章和章节

在HTML中,<article> 和 <section> 元素的样式通常与 <div> 元素相似。

如果想要创建一个文章样式,请使用 w3-container 类:

Example

<div class="w3-container">
  <p>Some text.</p>
</div>

<article class="w3-container">
  <p>Some text.</p>
</article>

<section class="w3-container">
  <p>Some text.</p>
</section>
尝试一下 »

填充

w3-container 类有1px(顶部和底部)和16px(左和右)的填充。

如果要更改容器的填充,可以使用 w3-padding 类:

Example

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

<h2>London</h2>

<p>London is the capital city of England.
It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>

</div>
尝试一下 »

代码容器

HTML Example

<div class="w3-code htmlHigh">

.. HTML code goes here

</div>
尝试一下 »

CSS Example

<div class="w3-code cssHigh">

.. CSS code here

</div>
尝试一下 »

JavaScript Example

<div class="w3-code jsHigh">

.. JavaScript code here

</div>
尝试一下 »

隐藏(关闭)容器

隐藏或关闭容器很容易:

Example

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

<span class="w3-closebtn" onclick="this.parentElement.style.display='none'">X</span>

<p>To close this container, click on the X in the upper right corner.</p>

</div>
尝试一下 »

组合

Header

Car

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)

Footer

Example 使用HTML<div>元素

<div class="w3-container w3-red">
  <h1>Header</h1>
</div>

<img src="img_car.png" 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 使用HTML语义元素

<header class="w3-container w3-red">
  <h1>Header</h1>
</header>

<img src="img_car.png" 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-red">
  <h5>Footer</h5>
</footer>
尝试一下 »