Paneles W3.CSS
soy un panel
soy un panel
Soy un contenedor.
Soy un contenedor.
La clase del panel
La clase w3-panel agrega un margen superior e inferior de 16 píxeles y un relleno izquierdo y derecho de 16 píxeles a cualquier elemento HTML.
Ejemplo
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Paneles para Notas
La clase w3-panel es perfecta para mostrar notas.
Las notas a menudo se muestran con un color pálido:
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Ejemplo
<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 obtener más información sobre las notas de W3.CSS, visite el capítulo Notas de W3.CSS .
Paneles para Cotizaciones
La clase w3-panel es perfecta para mostrar cotizaciones.
Ejemplo
<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 obtener más información sobre las cotizaciones de W3.CSS, visite el capítulo de cotizaciones de W3.CSS .
Paneles de Alertas
La clase w3-panel es perfecta para mostrar alertas.
Las alertas a menudo se muestran usando un color fuerte:
¡Peligro!
El rojo a menudo indica una situación peligrosa o negativa.
Ejemplo
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Para obtener más información sobre las alertas W3.CSS, visite el capítulo Alertas W3.CSS .
Paneles como tarjetas
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Ejemplo
<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>
Paneles redondeados
Londres es la ciudad más poblada del Reino Unido, con un área metropolitana de más de 9 millones de habitantes.
Ejemplo
<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 (cerrar) un panel
Ocultar un panel es fácil.
Haga clic en la X para cerrar este panel.
Haga clic en la X para cerrar este panel.
Ejemplo
<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) un panel
Mostrar un panel (oculto) es fácil:
Ejemplo
<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>