Kombinieren Sie CLASS, um den Layoutstil der Webseite zu vervollständigen

Autor：Eve Cole Aktualisierungszeit：2025-01-21 14:24:01

So erstelle ich den DIV-Layoutcode. Ich weiß nicht, ob es klar ist oder nicht. Werfen wir einen Blick darauf.

Meine Idee ist, dass wir in Zukunft Standardteile verwenden können, um das DIV-Layout einer Webseite zusammenzustellen

Ich unterteile Klassen in zwei Typen: Die Layout-Klasse ist das Grundgerüst und die Stil-Klasse ist die Kleidung.

Zum Beispiel:

Zum Beispiel die linke Spalte im Layout

Seine Eigenschaften sind zunächst: linke Spalte, Breite, Hintergrundfarbe, Schriftfarbe usw.

1． Zunächst wird eine Klasse definiert, z. B. .layout, die hauptsächlich zur Steuerung der gesamten Seitengröße verwendet wird.

.layout{width:98%;margin:0 auto;text-align:left;}

2. Dann werden 3 grundlegende Layoutklassen (l, m, r) definiert

.l{float:left}

.m{width:auto}

.r{float:right}

Ich klassifiziere das 2-Spalten-Layout auch in das 3-Spalten-Layout, denn im 3-Spalten-Layout werden aus 3 Spalten 2 Spalten, wenn die Breite der linken und rechten Spalte 0 beträgt.

Wenn wir grundlegenden Layoutcode schreiben, ist es am besten, ihn in einem 3-Spalten-Format zu schreiben.

3. Definieren Sie entsprechend der Layoutklasse die erforderliche Stilklasse, z. B. Breite, Höhe, Hintergrundfarbe usw. Dies sind alles Stilelemente.

.class_l{background:#ff0;margin-right: -150px;width:150px;}

.class_m{background:#f00;margin:0 140px 0 150px;}

.class_r{background:#00f;margin-left: -140px;width:140px;}

Es gibt nur einen Satz von Layoutklassen, es können jedoch viele Stilklassen definiert werden.

Beispielsweise möchten Sie in der mittleren Spalte ein kleines zweispaltiges Layout erstellen.

Sie können eine andere Stilklasse definieren

.mid_l{background:#ff0;margin-right: -100px;width:100px;}

.mid_m{background:#f00;margin:0 0 0 100px;}

4. Kombinieren Sie die Layout-Klasse und die Style-Klasse und referenzieren Sie sie im Code wie folgt

Zitieren Sie beide Klassen, getrennt durch Leerzeichen, und die zweite ist die Stilklasse. Sie können die beiden Klassen weiterhin mit Leerzeichen zitieren Zu definierende ID.

Einige andere häufig verwendete Stilklassen können auch als universell geschrieben werden, beispielsweise kann implizit als definiert werden

.hide{display:none}

Verwenden Sie dann bei Bedarf class=xxx hide, um darauf zu verweisen, was sehr praktisch ist.

Code:

<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> <html xmlns=http://www. w3.org/1999/xhtml> <head> <meta http-equiv=Content-Type content=text/html; /> <title>Combination CLASS</title> body, html { background:#fff; color: #000; line-height:150%;padding:0px; -align:center; } /*Der große Rahmen des Layouts wird verwendet, um die Gesamtgröße der Seite zu steuern. Die Größe wird von Ihnen selbst gesteuert*/ #layout{width:98%;margin:0 auto;text-align:left; } /*Linkes, mittleres und rechtes Layout der Seite*/ .l{float:left} .r{float:right} .m{width:auto} /*Klasse für das linke, mittlere und rechte Layout der Seite */ .lclass{background: #ff0;margin-right: -150px;width:150px;} .mclass{background:#f00;margin:0 140px 0 150px;} .rclass{background:#00f;margin-left: -140px;width:140px;} .l1{background:#dd0;margin-right: -200px;width:200px;} .m1{background:#ee0 ;margin:0 0 0 200px;} .l2{background:#dd0;margin-right: -50px;width:50px;} .m2{background:#ee0;margin:0 0 0 50px;} </style> </head> <body> <div id =layout> <div class=l lclass> Links<br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div class=r rclass> <div class=l l2>Hier</div> <div class=m m2>Da</div> Richtig <br /> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> <div class=m mclass > Mitte <div class=l l1>Hier1</div> <div class=m m1>Da1</div> <br /><br /><br /><br /><br /><br /><br /><br /><br /><br /> </div> </div> </ div body> </html>