Es gibt zwei Arten von Site-Layouts: tabellarisch und blockweise. Und während ersteres für die Erstellung einfacher HTML-Seiten bequemer ist, ist letzteres ideal, wenn Sie einzelne Elemente in Form von Blöcken hinzufügen müssen.
Anleitung
Schritt 1
Es gibt zwei Techniken, mit denen Sie ein Blockdesign selbst entwickeln können: indem Sie Cascading Stylesheets in ein Dokument einbetten oder indem Sie sie von einer externen Ressource aus verbinden. Beide liefern das gleiche Ergebnis, daher gibt es keinen grundlegenden Unterschied zwischen ihnen. Fügen Sie im ersten Fall den folgenden Code an einer beliebigen Stelle in die Datei style.css ein:
. Block 1 {
}
Block1 - der Name des Blocks, Sie können einen anderen schreiben. Geben Sie zwischen den geschweiften Klammern die Parameter im folgenden Format an: Attributname> Doppelpunkt> Wert> Semikolon (einschließlich der Platzierung vor der geschweiften Klammer). Die folgenden Elemente werden häufig verwendet:
- Breite - Breite (500px, 100% usw.);
- Höhe - Höhe (200px, 25% usw.);
- Hintergrund - Hintergrundfarbe (Gelb, Rot, # 000000);
- Auffüllen - Auffüllen um den Inhalt innerhalb des Blocks (0px, 20%);
- Marge - Außenränder vom Block (15px, 40%);
- Rahmen - Rahmen (Rahmen: durchgehend 0px schwarz;);
- float - Ausrichtung (links, rechts);
- border-radius - Abrunden von Ecken (border-radius: 10px;).
Schritt 2
Fügen Sie bei der zweiten Verwendung von CSS das Styling zwischen den und -Tags hinzu:
. Block 1 {
}
Und fügen Sie die gewünschten Parameter hinzu.
Schritt 3
Fügen Sie den Block an der gewünschten Stelle auf der Site mit dem Befehl ein:
Block 1
Speichern und aktualisieren Sie die Seite, sie sollte angezeigt werden. Beachten Sie, dass die Höhenausrichtung je nach Inhalt variieren kann. Wenn Sie beispielsweise 300px einstellen, aber nur eine Textzeile geschrieben haben, wird diese nicht vollständig angezeigt. Dies kann z. B. durch eine Tabelle mit den benötigten Parametern korrigiert werden, die innerhalb des Blocks platziert werden sollte, d.h. zwischen Tags u. Und damit die Grenzen nicht sichtbar sind, fügen Sie das Attribut ein
