Einführung
In "Pet's House", einem virtuellen Bereich für Tierliebhaber, beginnt Alex, ein Webdesigner, eine Reise, um ihre Servicepräsentation mit CSS Grid zu verbessern.
Dieses Labziel ist es, Benutzer durch eine organisierte und visuell ansprechende Darstellung von Services zu begeistern. Alex' Mission ist es, den "Display"-Abschnitt in ein Grid-Layout zu verwandeln, das Haustierdienste mit Eleganz und Effizienz hervorhebt.
Position-Eigenschaft
Die CSS-position-Eigenschaft ist ein leistungsstarkes Werkzeug, das es Entwicklern ermöglicht, die genaue Platzierung von Elementen auf einer Seite zu steuern. Es ermöglicht es, Elemente basierend auf ihrem normalen Fluss, relativ zu ihrem übergeordneten Element, relativ zur Viewport oder relativ zu ihrem nächsten scrollenden Vorfahren zu positionieren.
Statische Positionierung
static ist der Standardwert für alle Elemente, was bedeutet, dass Elemente gemäß dem normalen Dokumentfluss angeordnet werden. Statisch positionierte Elemente werden nicht von den top-, right-, bottom- oder left-Eigenschaften beeinflusst.
Wenn Sie möchten, dass Elemente dem Standardfluss folgen, ist die statische Positionierung Ihre beste Wahl.
Zum Beispiel befindet sich auf der linken Seite der Seite ein Bild eines Roboters, und wenn wir dieses Element auf position:static setzen, wird sich dieses Bild beim Scrollen der Seite ebenfalls mit dem Seitenfluss bewegen.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: static;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Fixierte Positionierung
Die fixed-Positionierung platziert ein Element relativ zur Viewport des Browserfensters. Das Element bleibt an der gleichen Stelle, auch wenn die Seite scrolled wird.
Zum Erstellen einer Navigationsleiste, die sich oben oder unten auf der Seite befestigt.
Zum Beispiel befindet sich auf der linken Seite der Seite ein Bild eines Roboters, wenn wir dieses Element auf position:fixed setzen, wird sich dieses Bild beim Scrollen der Seite nicht aufgrund des Scrollens der Seite verschwinden, das Bild wird an einer festen Position bleiben.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.full-page-img {
width: 100%;
margin-left: 15%;
}
.box img {
width: 90%;
}
.ad-l {
position: fixed;
top: 100px;
left: 0;
width: 150px;
}
</style>
</head>
<body>
<img src="robot.png" class="ad-l" />
<div class="full-page-img">
<img src="page.png" />
</div>
</body>
</html>
Relative Positionierung
Die relative-Positionierung ermöglicht es Ihnen, ein Element relativ zu seiner normalen Position zu versetzen. Auch wenn es versetzt wird, nimmt das Element weiterhin seinen ursprünglichen Platz ein.
Wenn Sie die Position eines Elements leicht anpassen müssen, ohne die anderen Teile des Layouts zu beeinflussen.
Zum Beispiel haben wir das Roboterbild auf der linken Seite der Seite um eine bestimmte Anzahl von Pixeln in top- und left-Richtung relativ zu seiner normalen Position verschoben.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: relative;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
Absolute Positionierung
Die absolute-Positionierung platziert ein Element relativ zu seinem nächsten positionierten Vorfahren, sofern vorhanden, oder andernfalls relativ zum initialen enthaltenden Block. Es wird aus dem Dokumentfluss entfernt und nimmt keinen Platz ein.
Wenn Sie ein fließendes Element erstellen müssen, wie z. B. ein Modal oder ein Dropdown-Menü.
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
.box {
width: 100%;
}
.box img {
width: 90%;
}
.ad-l {
position: absolute;
top: 70px;
left: 70px;
}
</style>
</head>
<body>
<img src="labby.png" class="ad-l" />
<div class="box">
<img src="page.png" />
</div>
</body>
</html>
Sobald Sie die Verwendung der Positionseigenschaft verstanden haben, können wir Folgendes zu style.css hinzufügen:
header {
position: fixed;
display: flex;
flex-direction: row;
background-color: rgb(233, 174, 87);
width: 100%;
max-height: max-content;
min-height: 1em;
padding-top: 1%;
padding-bottom: 1%;
text-transform: uppercase;
}
.navigation li {
position: relative;
display: inline-block;
}
.service figure {
position: relative;
}
.service figcaption {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background-color: rgba(0, 0, 0, 0.5);
color: #fff;
padding: 10px;
}
Grundlagen des Gitters
Im vorherigen Lab haben wir Flexbox gelernt, aber die Gestaltung der Haustierseite hat den gewünschten Effekt nicht erzielt. Deshalb lernen wir im nächsten Schritt eine andere Layoutmethode: das Grid-Layout.
Das CSS Grid Layout (Grid) ist ein auf Gitter basierendes Layoutsystem, das es Entwicklern ermöglicht, responsive Webanwendungslayouts zu erstellen. Mit Grid können Sie Seiten in Hauptbereiche unterteilen oder die Gestaltung kleinerer Komponenten definieren.
Um das Grid-Layout zu verwenden, müssen Sie zunächst die Eigenschaft display: grid; auf einem Container-Element festlegen. Wir können Folgendes zu style.css hinzufügen:
.container {
display: grid;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
margin: 20px auto;
}
Definition von Zeilen und Spalten
Als nächstes verwenden Sie die Eigenschaften grid-template-columns und grid-template-rows, um die Zeilen und Spalten im Container zu definieren.
Zum Beispiel legt .container einen Gitteranzeigemodus mit bestimmten Abmessungen für Spalten und Zeilen fest:
display: grid;aktiviert das Gitterlayout für den Container.grid-template-columns: 50px 100px;definiert zwei Spalten, wobei die erste Spalte 50 Pixel breit und die zweite Spalte 100 Pixel breit ist.grid-template-rows: 30px 60px;definiert zwei Zeilen, wobei die erste Zeile 30 Pixel hoch und die zweite Zeile 60 Pixel hoch ist.
Wir können Folgendes zu style.css hinzufügen:
.container {
display: grid;
grid-template-columns: 100%;
padding: 0px;
padding-top: 1em;
width: 100%;
}
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
margin: 20px auto;
}
Die fr ist eine flexible Längeneinheit, die einen Bruch des verfügbaren Raums im Gittercontainer darstellt.
Gitterabstand
Die grid-gap-Eigenschaft (heute wird empfohlen, gap, row-gap und column-gap zu verwenden) kann den Abstand zwischen den Gitterzeilen und -spalten einstellen.
Wir können Folgendes zu style.css hinzufügen:
.services {
width: 90%;
display: grid;
grid-template-columns: 2fr 2fr 2fr;
gap: 5%;
margin: 20px auto;
}
Zusammenfassung
In diesem Lab hat Alex erfolgreich CSS Grid genutzt, um den Anzeigebereich von "Pet's House" neu zu gestalten und die Haustierdienste in einem strukturierten und attraktiven Gitterlayout zu präsentieren. Dieser Ansatz hat nicht nur die visuelle Präsentation verbessert, sondern auch die Flexibilität und Stärke von CSS Grid in der Webdesign gezeigt.
