Kombinieren Sie CLASS, um den Stil des Webseitenlayouts_CSS/HTML zu vervollständigen-CSS-Tutorial-php.cn

Kombinieren Sie CLASS, um den Stil des Webseitenlayouts_CSS/HTML zu vervollständigen

WBOY

Freigeben： 2016-05-16 12:11:03

Original

1841 Leute haben es durchsucht

So erstelle ich den DIV-Layoutcode. Ich weiß nicht, ob es klar ist oder nicht, schauen wir uns das gemeinsam an
Meine Idee ist, dass in Zukunft: Standardteile verwenden, um das DIV-Layout der Webseite zusammenzustellen

I Unterteilen Sie die Klassen in zwei Typen: Layoutklasse, Stilklasse. Die Layoutklasse ist das Grundgerüst, die Stilklasse ist die Kleidung.
Zum Beispiel:
Zum Beispiel die linke Spalte im Layout.
Zunächst einmal ihre Attribute sind: linke Spalte, Breite, Hintergrundfarbe, Schriftfarbe usw.

1. Zunächst wird eine Klasse definiert, wie zum Beispiel: .layout, die hauptsächlich zur Steuerung der gesamten Seitengröße verwendet wird
.layout{width:98%;margin:0 auto;text-align:left;}

2. Dann 3 Grundlayouts Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
Ich habe die 2- Das Spaltenlayout wird auch als 3-Spalten-Layout klassifiziert, da im 3-Spalten-Layout, wenn die Breite der linken und rechten Spalte jeweils 0 beträgt, aus 3 Spalten 2 Spalten werden.
Wenn wir den grundlegenden Layoutcode schreiben, ist es am besten, ihn in einem 3-Spalten-Format zu schreiben.

３． Definieren Sie entsprechend der Layout-Klasse die erforderliche Stilklasse, z. B. Breite, Höhe, Hintergrundfarbe usw. Dies sind alles Stilelemente
.class_l{background:#ff0;margin-right: -150px;width:150px; } } Da es sich nur um einen Satz von Layoutklassen handelt, können viele Stilklassen definiert werden.
Wenn Sie beispielsweise ein kleines zweispaltiges Layout in der mittleren Spalte erstellen möchten
, können Sie eine andere Stilklasse definieren
. mid_l{background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4 und die Stilklasse und verweisen Sie im Code wie folgt darauf

Ziehen Sie beide Klassen in Anführungszeichen und trennen Sie sie durch Leerzeichen. Die vordere ist die Layoutklasse, die letztere ist die Stilklasse, und Sie können später weiterhin Leerzeichen verwenden. Wenn Sie sie speziell definieren müssen, können Sie dies angeben div eine zu definierende ID.

Einige andere häufig verwendete Stilklassen Es kann auch allgemein geschrieben werden. Beispielsweise kann implizit als
.hide{display:none}
definiert werden Bei Bedarf kann dann class="xxx hide" als Referenz verwendet werden, was sehr praktisch ist.