Combinez CLASS pour compléter le style de mise en page Web

Combinez CLASS pour compléter le style de mise en page Web_CSS/HTML

WBOY

Libérer： 2016-05-16 12:11:03

original

1819 Les gens l'ont consulté

C'est ainsi que je crée le code de mise en page DIV. Je ne sais pas si c'est clair ou pas, regardons ensemble
Mon idée est qu'à l'avenir : Utiliser des pièces standards pour assembler la mise en page DIV de la page web

I diviser les classes en 2 types, la classe de mise en page, la classe de style, la classe de mise en page est le squelette, la classe de style est les vêtements
Par exemple :
Par exemple, la colonne de gauche dans la mise en page
Tout d'abord, ses attributs sont : la colonne de gauche, la largeur, la couleur d'arrière-plan, la couleur de la police, etc.

1. Tout d'abord, une classe sera définie, telle que : .layout, qui sert principalement à contrôler la taille entière de la page
.layout{width:98%;margin:0 auto;text-align:left;}

2. Puis 3 mises en page de base Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
Je mets Le 2- La disposition en colonnes est également classée comme disposition à 3 colonnes, car dans la disposition à 3 colonnes, lorsque la largeur des colonnes de gauche et de droite est respectivement de 0, 3 colonnes deviennent 2 colonnes.
Lorsque nous écrivons le code de mise en page de base, il est préférable de l'écrire dans un format à 3 colonnes.

３． Correspondant à la classe de mise en page, définissez la classe de style requise, telle que la largeur, la hauteur, la couleur d'arrière-plan, etc. Ce sont tous des éléments de style
.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;}

Là n'est qu'un ensemble de classes de mise en page , de nombreuses classes de style peuvent être définies.
Par exemple, si vous souhaitez créer une petite mise en page à deux colonnes dans la colonne du milieu
, vous pouvez définir une autre classe de style
. mid_l{background:#ff0;margin-right: - 100px;width:100px;}
.mid_m{background:#f00;margin:0 0 0 100px;}

4. et la classe de style, et référencez-la dans le code comme ceci

Citez les deux classes et séparez-les par des espaces. , le front est la classe de mise en page, cette dernière est la classe de style, et vous pouvez continuer à utiliser des guillemets d'espace plus tard. Si vous avez besoin de la définir spécialement, vous pouvez la donner. div un identifiant à définir.

Certaines autres classes de style couramment utilisées. Il peut également être écrit de manière générale. Par exemple, implicit peut être défini comme
.hide{display:none}
et. puis, si nécessaire, class="xxx hide" peut être utilisé pour le référencer, ce qui est très pratique.