W3.CSS- Container
Das ist meine Überschrift
Dies ist mein Artikel
Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun. Dieser Artikel ist hellgrau und der Text ist braun.
Das ist meine Fußzeile
Die Containerklasse
Die w3-Container- Klasse fügt jedem HTML-Element eine linke und rechte Auffüllung von 16 Pixeln hinzu.
Die w3-Container- Klasse ist die perfekte Klasse für alle HTML-Container-Elemente wie:
<div>, <article>, <section>, <header>, <footer>, <form> und mehr.
Container sorgen für Gleichheit
Der w3-Container bietet Gleichheit für alle HTML-Container-Elemente:
- Gemeinsame Margen
- Gemeinsame Polsterung
- Gemeinsame Ausrichtungen
- Gängige Schriftarten
- Gemeinsame Farben
Um einen Container zu verwenden, fügen Sie einfach eine w3-Container- Klasse zu einem beliebigen Element hinzu:
Beispiel
<div class="w3-container">
<p>The w3-container class is an important
w3.CSS class.</p>
</div>
Um eine Farbe hinzuzufügen, fügen Sie einfach eine w3 -Farbklasse hinzu :
Beispiel
<div class="w3-container w3-red">
<p>London is the capital city of England.</p>
</div>
Kopf-und Fußzeilen
Die Klasse w3-container kann verwendet werden, um Header zu stylen:
Header
Beispiel
<div class="w3-container w3-teal">
<h1>Header</h1>
</div>
Beispiel
<header class="w3-container w3-teal">
<h1>Header</h1>
</header>
Es gibt keinen Unterschied in der Art und Weise, wie W3.CSS <div>- und <header>-Elemente behandelt.
Die w3-Container- Klasse kann verwendet werden, um Fußzeilen zu stylen:
Beispiel
<div class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</div>
Beispiel
<footer class="w3-container w3-teal">
<h5>Footer</h5>
<p>Footer information goes here</p>
</footer>
Viele Webseiten verwenden <div>-Elemente anstelle von <header>- und <footer>-Elementen.
Artikel und Abschnitte
Die Klasse w3-container kann verwendet werden, um die Elemente <article> und <section> zu stylen:
Beispiel
<div class="w3-container">
<h2>London</h2>
<p>London
is the most populous city in the United Kingdom,
with a
metropolitan area of over 9 million inhabitants.</p>
</div>
<article class="w3-container">
<h2>Paris</h2>
<p>The
Paris area is one of the largest population centers in Europe,
with more than 2 million inhabitants.</p>
</article>
<section
class="w3-container">
<h2>Tokyo</h2>
<p>Tokyo is the
center of the Greater Tokyo Area,
and the most populous
metropolitan area in the world.</p>
</section>
Viele Webseiten verwenden <div>-Elemente anstelle von <article>- und <section>-Elementen.
Beispiel für eine Webseite
Header
Ein Auto ist ein fahrbares, selbstangetriebenes Kraftfahrzeug, das für den Transport verwendet wird. Die meisten Definitionen des Begriffs geben an, dass Autos hauptsächlich für den Straßenverkehr konzipiert sind. (Wikipedia)
Beispiel mit HTML-<div>-Elementen
<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>
Beispiel mit semantischen HTML-Elementen
<header class="w3-container w3-teal">
<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-teal">
<h5>Footer</h5>
</footer>
Behälterpolsterung
The w3-container class has a default 16px left and right padding, and no top or bottom padding:
Example
<div class="w3-container w3-blue">
I have no top or bottom padding.
</div>
Normally you will not have to change the default padding of a container, because paragraphs and heading provide margins that will simulate padding.
I am a Heading
I am a paragraph.
Example
<div class="w3-container w3-blue">
<h1>I am a Heading</h1>
<p>I am a paragraph.</p>
</div>