Painéis W3.CSS
Eu sou um painel.
Eu sou um painel.
Eu sou um recipiente.
Eu sou um recipiente.
A classe do painel
A classe w3-panel adiciona uma margem superior e inferior de 16px e um preenchimento esquerdo e direito de 16px a qualquer elemento HTML.
Exemplo
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Painéis para Notas
A classe w3-panel é perfeita para exibir notas.
As notas são frequentemente exibidas com uma cor pálida:
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-panel w3-pale-green">
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Para saber mais sobre o W3.CSS Notes, visite o capítulo W3.CSS Notes .
Painéis para Cotações
A classe w3-panel é perfeita para exibir cotações.
Exemplo
<div class="w3-panel w3-leftbar w3-sand w3-xxlarge w3-serif">
<p><i>"Make it as simple as possible, but not simpler."</i></p>
</div>
Para saber mais sobre as Cotações W3.CSS, visite o capítulo Cotações W3.CSS .
Painéis para Alertas
A classe w3-panel é perfeita para exibir alertas.
Os alertas geralmente são exibidos usando uma cor forte:
Perigo!
O vermelho geralmente indica uma situação perigosa ou negativa.
Exemplo
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Para saber mais sobre os Alertas W3.CSS, visite o capítulo Alertas W3.CSS .
Painéis como Cartões
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-panel w3-blue w3-card-4">
<p>London is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
Painéis arredondados
Londres é a cidade mais populosa do Reino Unido, com uma área metropolitana de mais de 9 milhões de habitantes.
Exemplo
<div class="w3-panel w3-blue w3-round-xlarge">
<p>London is the most populous city in the United Kingdom,
with
a metropolitan area of over 9 million inhabitants.</p>
</div>
Ocultar (fechar) um painel
Ocultar um painel é fácil.
Clique no X para fechar este painel.
Clique no X para fechar este painel.
Exemplo
<div class="w3-panel
w3-display-container">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>
Mostrar (abrir) um painel
Mostrar um painel (oculto) é fácil:
Exemplo
<button class="w3-btn" onclick="document.getElementById('id01').style.display='block'">Show
panel</button>
<div id="id01" class="w3-panel w3-green
w3-display-container" style="display:none">
<span onclick="this.parentElement.style.display='none'"
class="w3-button
w3-display-topright">X</span>
<p>Click on the X to close this panel.</p>
<p>Click on the X to close this panel.</p>
</div>