C'est ainsi que je crée le code de mise en page DIV. Je ne sais pas si c'est clair ou pas, jetons un oeil
Mon idée est qu'à l'avenir, nous pourrons utiliser des pièces standard pour assembler la mise en page DIV d'une page Web.
Je divise les classes en deux types, la classe de mise en page et la classe de style sont le squelette et 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 propriétés sont : la colonne de gauche, la largeur, la couleur de fond, 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. Ensuite, 3 classes de mise en page de base (l, m, r) seront définies
.l{float:gauche}
.m{largeur:auto}
.r{float:droite}
Je classe également la disposition à 2 colonnes dans la disposition à 3 colonnes, car dans la disposition à 3 colonnes, lorsque la largeur des colonnes de gauche et de droite est de 0, 3 colonnes deviennent 2 colonnes.
Lorsque nous écrivons du code de mise en page de base, il est préférable de l'écrire dans un format à 3 colonnes.
3. 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{arrière-plan :#ff0;marge-droite : -150px;largeur :150px;}
.class_m{arrière-plan :#f00;marge :0 140px 0 150px;}
.class_r{arrière-plan :#00f;marge gauche : -140px;largeur :140px;}
Il n'existe qu'un seul ensemble de classes de mise en page, mais de nombreuses classes de style peuvent être définies.
Par exemple, 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{arrière-plan :#ff0;marge-droite : -100px;largeur :100px;}
.mid_m{arrière-plan :#f00;marge :0 0 0 100px;}
4. Combinez la classe de mise en page et la classe de style et référencez-les dans le code comme ceci
<div class=l classe＿l></div>
<div class=l mid_l></div>
Citez les deux classes, séparées par des espaces. La première est la classe de mise en page et la seconde est la classe de style. Vous pouvez continuer à citer les deux classes avec des espaces. Si vous avez besoin de la définir spécialement, vous pouvez attribuer un nom à ce div. identifiant à définir.
Certaines autres classes de style couramment utilisées peuvent également être écrites comme universelles, par exemple, implicite peut être défini comme
.hide{affichage:aucun}
Ensuite, si nécessaire, utilisez class=xxx hide pour le référencer, ce qui est très pratique.
Code: