Die Container-Klasse
Der w3-Container - Klasse ist die wichtigste der W3.CSS Klassen.
Der w3-Container - Klasse ist für alle Arten von HTML - Container - Elemente verwendet , wie:
<Div>, <header>, <footer>, <article>, <section>, <blockquote>, <form> und vieles mehr.
Dieser Header ist grün.
Diese Fußzeile ist rot.
Dieser Artikel ist hellgrau und der Text ist braun.
Container Bietet Gleichheit
Der w3-Container - Klasse ist wichtig für die Bereitstellung von Gleichheit:
- Gemeinsame Margen
- Gemeinsame Polsterungen
- Gemeinsame vertikale Ausrichtungen
- Gemeinsame horizontale Ausrichtungen
- Gemeinsame Schriftarten
- Gemeinsame Farben
Beispiel
<div class="w3-container">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Versuch es selber " Um eine Farbe hinzufügen, fügen Sie einfach eine w3- Farbklasse:
Beispiel
<div class="w3-container w3-red">
<p>London is the most populous city in the United Kingdom.</p>
</div>
Versuch es selber " Kopf-und Fußzeilen
Der w3-Container - Klasse kann verwendet werden , um einen Header - Stil:
Überschrift 1
Der w3-Container - Klasse kann verwendet werden , um eine Fußzeile zu gestalten:
Beispiel
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Versuch es selber " Artikel und Rubriken
Der w3-Container - Klasse kann auf Stil <article> verwendet werden und <section> Elemente:
Beispiel
<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> Versuch es selber "  | Viele Web-Seiten verwendet <div> Elemente anstelle von <article> und <section> Elemente. |
|---|
Hinweise, Panels, und Zitate
Der w3-Container - Klasse kann verwenden , um alle Arten von Notizen anzuzeigen:
Beispiel
<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> Versuch es selber " Der w3-Container - Klasse kann verwenden , um alle Arten von Platten anzuzeigen:
London ist die Hauptstadt von England. Es ist die bevölkerungsreichste Stadt im Vereinigten Königreich, mit einem Ballungsgebiet von mehr als 13 Millionen Einwohnern.
Beispiel
<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> Versuch es selber " Der w3-Container - Klasse kann verwenden , um alle Arten von Anführungszeichen angezeigt werden :
Beispiel
<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>
Versuch es selber " Gehen Sie auf die Kapitel W3.CSS Grenzen mehr über die Anzeige Notizen zu lernen, Panels und Zitate.
Kombinationen
Kopfzeile
Ein Auto ist ein fahrbares, selbstbetriebenen Kraftfahrzeug für den Transport verwendet. Die meisten Definitionen des Begriffs angeben, dass Autos in erster Linie auf den Straßen zu laufen. (Wikipedia)
Beispiel mit Hilfe von HTML <div> Elemente
<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> Versuch es selber " Beispiel mit Hilfe von HTML semantische Elemente
<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> Versuch es selber " Container Padding
Derw3-Container - Klasse hat einen Standard 16px links und rechts Polsterung und keine oberen oder unteren padding:
Beispiel
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Versuch es selber " Normalerweise werden Sie nicht die Standard-Polsterung eines Containers ändern müssen, weil Absätze und Überschrift Margen erzielen, die Polsterung simulieren.
Ich bin Überschrift 1
Ich bin ein Absatz.
Beispiel
<div class="w3-container w3-blue">
<h1>I am Heading 1</h1>
<p>I am a paragraph.</p>
</div>
Versuch es selber " Container Sectioning
Derw3-Container - Klasse hat keinen Standard oberen oder unteren Rand.
Zwei Container wird angezeigt wothout eine Marge zwischen ihnen:
Ich bin Überschrift 1
Ich bin ein Absatz.
Ich bin Überschrift 1
Ich bin ein Absatz.
Derw3 Schnitt - Klasse kann verwendet werden , um Behälter zu trennen.Es hat 16px oberen und unteren Rand:
Ich bin Überschrift 1
Ich bin ein Absatz.
Ich bin Überschrift 1
Ich bin ein Absatz.
Beispiel
<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>
Versuch es selber " Hiding (Closing) Container
Ausblenden oder Verschließen eines Behälters ist einfach:
Um diesen Behälter zu schließen, klicken Sie auf das X in der rechten oberen Ecke.
Beispiel
<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>
Versuch es selber " Öffnungs Container
geschlossene Behälter zu öffnen, ist einfach:
Beispiel
<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>
Versuch es selber "