W3.CSS-Fallstudie
Aufbau einer responsiven Website von Grund auf neu
In diesem Kapitel werden wir eine responsive W3.CSS-Website von Grund auf neu erstellen.
Beginnen Sie zunächst mit einer einfachen HTML-Seite mit einem anfänglichen Ansichtsfenster und einem Link zu W3.CSS.
Beispiel
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<h1>My first W3.CSS website!</h1>
<p>This site
will grow as we add more ...</p>
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</body>
</html>
Legen Sie Elemente in Container
Um gemeinsame Ränder und Auffüllungen hinzuzufügen, fügen Sie die HTML-Elemente in Container ein (<div class="w3-container">).
Trennen Sie den Header vom Rest des Inhalts, indem Sie zwei separate <div>-Elemente verwenden:
Beispiel
<div class="w3-container">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Farbklassen
Farbklassen definieren die Farbe von Elementen.
Dieses Beispiel fügt dem ersten <div>-Element eine Farbe hinzu:
Beispiel
<div class="w3-container w3-light-grey">
<h1>My
First W3.CSS Website!</h1>
<p>This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Größenklassen
Größenklassen definieren die Textgröße für Elemente.
Dieses Beispiel fügt beiden Header-Elementen eine Größe hinzu:
Beispiel
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</div>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
Verwenden Sie semantische Elemente
Wenn Sie möchten, folgen Sie den HTML5-Semantikempfehlungen. Bitte!
Für W3.CSS spielt es keine Rolle, ob Sie <div> oder <header> verwenden.
Beispiel
<!DOCTYPE html>
<html lang="en">
<title>W3.CSS Case</title>
<meta name="viewport"
content="width=device-width, initial-scale=1">
<link rel="stylesheet"
href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<header class="w3-container
w3-light-grey">
<h1 class="w3-jumbo">My first W3.CSS website!</h1>
<p
class="w3-xxlarge">This site
will grow as we add more ...</p>
</header>
<div
class="w3-container">
<p>This is another
paragraph.</p>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
</div>
<footer
class="w3-container">
<p>This is my footer</p>
</footer>
</body>
</html>
Responsives Layout mit mehreren Spalten
Mit W3.CSS ist es einfach, ein mehrspaltiges responsives Layout zu erstellen.
Die Spalten ordnen sich automatisch neu an, wenn sie auf verschiedenen Bildschirmgrößen angezeigt werden.
Einige Gitterregeln:
- Beginnen Sie mit einer Zeilenklasse <div class="w3-row-padding">
- Verwenden Sie vordefinierte Klassen wie „w3-third“, um schnell Rasterspalten zu erstellen
- Platzieren Sie Ihren Textinhalt innerhalb der Rasterspalten
Dieses Beispiel zeigt, wie Sie drei gleich breite Spalten erstellen:
Beispiel
<div class="w3-row-padding">
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-third">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Dieses Beispiel zeigt, wie Sie vier gleich breite Spalten erstellen:
Beispiel
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div
class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Spalten mit unterschiedlichen Breiten
Dieses Beispiel erstellt ein dreispaltiges Layout, bei dem die Spalte in der Mitte breiter ist als die erste und letzte Spalte:
Beispiel
<div class="w3-row-padding">
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-half">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
<div class="w3-quarter">
<p>Lorem ipsum
dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor
incididunt ut labore et dolore magna aliqua.</p>
</div>
</div>
Navigationsleisten
Eine Navigationsleiste ist eine Navigationskopfzeile, die oben auf der Seite platziert wird.
Beispiel
<nav class="w3-bar w3-black w3-large">
<a href="#"
class="w3-bar-item w3-button">Home</a>
<a
href="#" class="w3-bar-item w3-button">Link 1</a>
<a
href="#" class="w3-bar-item w3-button">Link 2</a>
<a href="#"
class="w3-bar-item w3-button">Link 3</a>
</nav>
Seitennavigation
Bei der Seitennavigation haben Sie mehrere Möglichkeiten:
- Zeigen Sie den Navigationsbereich immer links neben dem Seiteninhalt an.
- Verwenden Sie eine zusammenklappbare, "vollautomatisch" reagierende Seitennavigation.
- Öffnen Sie den Navigationsbereich über dem linken Teil des Seiteninhalts.
- Öffnen Sie den Navigationsbereich über den gesamten Seiteninhalt.
- Schieben Sie den Seiteninhalt beim Öffnen des Navigationsbereichs nach rechts.
- Zeigen Sie den Navigationsbereich auf der rechten statt auf der linken Seite an
Dieses Beispiel öffnet den Navigationsbereich über dem linken Teil des Seiteninhalts:
<nav class="w3-sidebar w3-bar-block w3-black w3-card" style="display:none"
id="mySidebar">
<a class="w3-bar-item w3-button" href="#">Link 1</a>
<a
class="w3-bar-item w3-button" href="#">Link 2</a>
<a
class="w3-bar-item w3-button"
href="#">Link 3</a>
</nav>
JavaScript zum Öffnen und Ausblenden des Menüs:
function w3_open() {
document.getElementById("mySidebar").style.display = "block";
}
function w3_close() {
document.getElementById("mySidebar").style.display = "none";
}