A classe Container
A classe W3-recipiente é o mais importante das classes W3.CSS.
A classe w3-contêiner é usado para todos os tipos de elementos de contêiner HTML como:
<Div>, <header>, <footer>, <article>, <section>, <blockquote>, <form>, e muito mais.
Este cabeçalho é verde.
Este rodapé é vermelho.
Este artigo é cinza claro eo texto é marrom.
Containers Fornece Igualdade
A classe w3-container é importante para proporcionar a igualdade:
- margens comuns
- paddings comuns
- alinhamentos verticais comuns
- alinhamentos horizontais comuns
- fontes comuns
- As cores comuns
Exemplo
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Tente você mesmo " Para adicionar uma cor, basta adicionar uma classe cor w3-:
Exemplo
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Tente você mesmo " Cabeçalhos e rodapés
A classe w3-container pode ser usado para denominar um cabeçalho:
Título 1
A classe w3-container pode ser usado para denominar um rodapé:
Exemplo
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Tente você mesmo " Artigos e Secções
A classe w3-container pode ser usado para estilo <article> e <section> elementos:
Exemplo
<article class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</article>
<section class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</section>
<div class="w3-container">
<h1>London</h1>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 13 million inhabitants.</p>
</div> Tente você mesmo "  | Muitas páginas da web utiliza elementos <div> em vez de <artigo> e <section> elementos. |
|---|
Notas, painéis e Cotações
A classe w3-container pode ser usado para exibir todos os tipos de notas:
Exemplo
<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> Tente você mesmo " A classe w3-container pode ser usado para exibir todos os tipos de painéis:
Londres é a cidade capital da Inglaterra. É a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 13 milhões de habitantes.
Exemplo
<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> Tente você mesmo " A classe w3-container pode ser usado para exibir todos os tipos de citações:
Exemplo
<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>
Tente você mesmo " Vá para o capítulo W3.CSS Fronteiras para saber mais sobre notas exibindo, painéis e citações.
combinações
Cabeçalho
Um carro é um veículo motorizado rodado, auto-alimentado utilizado para o transporte. A maioria das definições do termo especifica que os carros são projetados para funcionar primeiramente em estradas. (Wikipedia)
Exemplo usando <div> elementos HTML
<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> Tente você mesmo " Exemplo usando elementos semânticos HTML
<header class="w3-container w3-red">
<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-red">
<h5>Footer</h5>
</footer> Tente você mesmo " Container Padding
A classew3-container tem uma 16px padrão esquerda e estofamento direita, e nenhum superior ou preenchimento de fundo:
Exemplo
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Tente você mesmo " Normalmente, você não terá que mudar o padrão do preenchimento de um recipiente, porque parágrafos e título fornecer margens que simulam estofamento.
Estou Título 1
Eu sou um parágrafo.
Exemplo
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Tente você mesmo " Container Seccionamento
A classew3-container não tem alto padrão ou margem inferior.
Dois recipientes irá mostrar wothout uma margem entre eles:
Estou Título 1
Eu sou um parágrafo.
Estou Título 1
Eu sou um parágrafo.
A classede secção W3 pode ser usado para separar recipientes.Tem 16px margem superior e inferior:
Estou Título 1
Eu sou um parágrafo.
Estou Título 1
Eu sou um parágrafo.
Exemplo
<div class="w3-container w3-section w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
<div class="w3-container w3-section
w3-green">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Tente você mesmo " Escondendo Containers (fechamento)
Esconder ou fechar um recipiente é fácil:
Para fechar este contêiner, clique no X no canto superior direito.
Exemplo
<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>
Tente você mesmo " abrindo Containers
Abrindo recipientes fechados é fácil:
Exemplo
<div id="id01"class="w3-container w3-margin-top w3-green" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-closebtn">X</span>
<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>
Tente você mesmo "