W3.CSS- Panels
Ich bin ein Gremium.
Ich bin ein Gremium.
Ich bin ein Behälter.
Ich bin ein Behälter.
Die Panel-Klasse
Die w3-panel- Klasse fügt jedem HTML-Element einen oberen und unteren Rand von 16 Pixel sowie eine linke und rechte Auffüllung von 16 Pixel hinzu.
Beispiel
<div class="w3-panel w3-red">
<p>I am a panel.</p>
</div>
Tafeln für Notizen
Die w3-Panel- Klasse eignet sich perfekt zum Anzeigen von Notizen.
Notizen werden oft mit einer blassen Farbe dargestellt:
London ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 9 Millionen Einwohnern.
Beispiel
<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>
Um mehr über W3.CSS-Notizen zu erfahren, besuchen Sie bitte das Kapitel W3.CSS-Notizen .
Panels für Zitate
Die w3-Panel- Klasse eignet sich perfekt zum Anzeigen von Zitaten.
Beispiel
<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>
Um mehr über W3.CSS-Zitate zu erfahren, besuchen Sie bitte das Kapitel W3.CSS-Zitate .
Bedienfelder für Warnungen
Die w3-Panel- Klasse ist perfekt für die Anzeige von Warnungen.
Warnungen werden oft mit einer kräftigen Farbe angezeigt:
Achtung!
Rot weist oft auf eine gefährliche oder negative Situation hin.
Beispiel
<div class="w3-panel w3-red">
<h3>Danger!</h3>
<p>Red often
indicates a dangerous or negative situation.</p>
</div>
Um mehr über W3.CSS-Warnungen zu erfahren, besuchen Sie bitte das Kapitel W3.CSS-Warnungen .
Tafeln als Karten
London ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 9 Millionen Einwohnern.
Beispiel
<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>
Abgerundete Platten
London ist die bevölkerungsreichste Stadt im Vereinigten Königreich mit einem Ballungsgebiet von über 9 Millionen Einwohnern.
Beispiel
<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>
Ausblenden (Schließen) eines Panels
Das Ausblenden eines Panels ist einfach.
Klicken Sie auf das X, um dieses Fenster zu schließen.
Klicken Sie auf das X, um dieses Fenster zu schließen.
Beispiel
<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>
Ein Panel anzeigen (öffnen).
Das Anzeigen (eines versteckten) Panels ist einfach:
Beispiel
<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>