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

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.

<meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>CLASSE combin茅e</title> <style> body, html { background:#fff; color: #000; font-size:12px; margin:0; line-height:150%;padding:0px; text-align:center; } /*甯</style>

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn