Einfache einspaltige Website-Layouts in CSS
In dieser Lektion werden wir üben, einfache einspaltige Website-Layouts zu erstellen. Lassen Sie uns zum Beispiel ein solches Layout erstellen:
Beginnen wir mit der Umsetzung. Jedes Layout beginnt in der
Regel mit einem allgemeinen Div mit dem Namen
wrapper, das den Rest der Website enthält:
<div id="wrapper">
</div>
In unserem Fall wird der Wrapper zentriert ausgerichtet:
#wrapper {
width: 800px;
margin: 50px auto;
}
Er wird auch einen Rahmen haben:
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
Lassen Sie uns nun die grundlegende Struktur der Seite erstellen. Sie besteht aus einem Menü und dem Hauptinhalt:
<div id="wrapper">
<div id="menu">
</div>
<div id="content">
</div>
</div>
Fügen wir den Inhalt unserer Blöcke hinzu:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
Jetzt können wir unseren Blöcken Stile hinzufügen. Lassen Sie uns das Menü gestalten:
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
Und jetzt fügen wir den Inhaltselementen Stile hinzu:
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Jetzt können wir den gesamten Code zusammenfassen:
<div id="wrapper">
<div id="menu">
<a href="#">link text 1</a>
<a href="#" class="active">link text 2</a>
<a href="#">link text 3</a>
<a href="#">link text 4</a>
<a href="#">link text 5</a>
</div>
<div id="content">
<h1>Proin tristique lorem</h1>
<p>
...
</p>
<p>
...
</p>
</div>
</div>
#wrapper {
width: 800px;
margin: 50px auto;
border: 1px solid black;
}
#menu {
display: flex;
justify-content: center;
margin-bottom: 20px;
background-color: #484848;
}
#menu a {
margin: 0 5px;
padding: 15px 25px;
text-decoration: none;
color: #fff;
font: bold 14px Arial;
}
#menu a:hover, #menu a.active {
color: #484848;
background-color: #fff;
}
#content {
padding: 0 30px 20px;
}
#content h1 {
text-align: center;
margin-top: 0;
margin-bottom: 10px;
}
#content p {
padding: 0 10px;
margin-bottom: 5px;
font: 18px/1.3 Arial;
text-align: justify;
}
Tipp 1
Am bequemsten ist es, Abstände von oben nach unten zu vergeben.
Zum Beispiel haben wir ein Menü und einen Inhalt,
und dazwischen - leerer Raum. Offensichtlich
kann dieser Raum durch einen unteren Abstand
des Menüs, einen oberen Abstand des Inhalts
oder durch deren gleichzeitige Beeinflussung entstanden sein.
In diesem Fall ist es besser, dem Menü einen unteren Abstand zu geben,
und dem Inhalt den oberen Standard-padding und margin
für h1 zu entfernen.
Tipp 2
Nachkommen sollten keinen Abstand zwischen
Elternelementen bilden. Zum Beispiel haben wir ein Menü.
Der untere Abstand dieses Menüs kann entweder
durch den margin des Divs mit dem Menü oder durch den margin
der Links gebildet werden. Besser ist die erste Variante,
da die Links nicht über den Kopf des
Elternelements hinweg agieren sollten.
Tipp 3
Angenommen, zwischen zwei Elementen gibt es einen Abstand
und in diesem Fall gibt es visuell keinen Unterschied,
was man für den Abstand wählt - margin oder padding.
In diesem Fall wählen Sie margin, da
genau dieser Abstände zwischen
Elementen erzeugen soll.
