Der Aufbau einer Responsive Web-Site von Grund auf neu
In diesem Kapitel werden wir eine W3.CSS ansprechende Website von Grund auf neu zu bauen.
Starten Sie zunächst mit einer einfachen HTML-Seite, mit einem anfänglichen Ansichtsfenster und einen 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="http://www.w3ii.com/lib/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> Versuch es selber " Setzen Sie Elemente in Container
Jetzt brauchen wir eine gemeinsame margin und padding auf alle Elemente hinzuzufügen.
Um dies zu erreichen, setzen Sie Ihre HTML-Elemente im Inneren von Behältern (<div class = "w3-Container">)
Damit können sie separate Klassen für Header definieren. Trennen Sie die Header aus dem Rest des Inhalts, ein separates <div> Element mit:
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> Versuch es selber " Farbklassen
Farbklassen definiert die Farbe der Elemente.
In diesem Beispiel wird eine Farbe auf den ersten <div> Element:
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>
Versuch es selber " Größenklassen
Die Größenklassen definiert die Textgröße für Elemente.
In diesem Beispiel wird eine Größe an beiden Kopfelemente:
Beispiel
<div class="w3-container w3-light-grey">
<h1
class="w3-jumbo">My
First W3.CSS Website!</h1>
<p
class="w3-xxlarge">This sage
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>
Versuch es selber " Verwenden Sie semantische Elemente
Wenn Sie möchten die HTML5 semantische Empfehlungen zu folgen. Bitte!
 | Es ist nicht für W3.CSS Rolle, ob Sie verwenden <div> oder <header>. |
|---|
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="http://www.w3ii.com/lib/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> Versuch es selber " Mehrspaltigen Layout-Responsive
Mit W3.CSS ist es leicht, einen mehrspaltigen ansprechenden Layout zu erstellen.
Die Spalten werden sich automatisch neu anordnen, wenn sie auf unterschiedlichen Bildschirmgrößen betrachtet.
Einige Raster-Regeln:
- Beginnen Sie mit einer Reihe Klasse <div class = "w3-Reihe-Polsterung">
- Verwenden Sie vordefinierte Klassen wie "w3 Drittel", um schnell Rasterspalten machen
- Platzieren Sie Ihren Text Inhalt innerhalb der Rasterspalten
Dieses Beispiel zeigt, wie drei Spalten mit gleicher Breite zu erzeugen:
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> Versuch es selber " Dieses Beispiel zeigt, wie vier Spalten mit gleicher Breite zu erzeugen:
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> Versuch es selber " Spalten unterschiedlicher Breite
In diesem Beispiel wird eine Drei-Spalten-Layout, wo die Säule in der Mitte breiter ist als die erste und die letzte Spalte ist:
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> Versuch es selber " Navigationsleisten
Eine Navigationsleiste ist ein Navigations-Header, der am oberen Rand der Seite platziert wird.
Beispiel
<nav class="w3-topnav w3-green">
<a href="#">Home</a>
<a
href="#">Link 1</a>
<a
href="#">Link 2</a>
<a href="#">Link 3</a>
<a href="#">Link 4</a>
</nav> Versuch es selber " Side Navigation
Mit Seiten Navigation, haben Sie mehrere Möglichkeiten:
- Immer zeigen den Navigationsbereich auf der linken Seite des Seiteninhalts.
- Öffnen Sie den Navigationsbereich, den linken Teil des Inhalts der Seite versteckt.
- Öffnen Sie den Navigationsbereich versteckt alle Seiteninhalt.
- Verschieben Sie den Seiteninhalt auf der rechten Seite, wenn das Navigationsfenster zu öffnen.
Dieses Beispiel öffnet den Navigationsbereich, einen Teil des Inhalts der Seite versteckt:
<nav class="w3-sidenav w3-black w3-card-2" style="display:none">
<a href="#">Link 1</a>
<a href="#">Link 2</a>
<a
href="#">Link 3</a>
<a href="#">Link 4</a>
<a
href="#">Link 5</a>
</nav>
JavaScript verwendet, um das Menü zu öffnen und zu verstecken:
function w3_open() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "block";
}
function w3_close() {
document.getElementsByClassName("w3-sidenav")[0].style.display = "none";
}
Versuch es selber "