Je crois que les amis qui ont étudié CSS connaissent tous CLASS. Je ne sais pas comment vous l'utilisez lors de la création de pages Web. C'est ainsi que je crée du code de mise en page DIV. Je ne sais pas si c'est clair ou pas, jetons un coup d'oeil.
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
. La colonne de la mise en page
a d'abord ses attributs : : C'est 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 est principalement utilisée pour contrôler la taille entière de la page
layout{width:98%;margin:0 auto;text-align:left;}
2. Ensuite, 3 mises en page de base Class(l,m,r)
.l{float:left}
.m{width:auto}
.r{float:right}
Je classe également la mise en page à 2 colonnes dans la mise en page à 3 colonnes, car dans une disposition à 3 colonnes, lorsque les largeurs des colonnes de gauche et de droite sont respectivement 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{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;}
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 devez le faire dans la colonne du milieu. Une petite mise en page à 2 colonnes peut 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. Combinez la classe de mise en page et la classe de style et référencez-les dans le code comme ceci
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. id à définir.
Autres Certaines classes de style couramment utilisées peuvent également être écrites comme universelles. Par exemple, implicite peut être défini comme
.hide{display:none}.
Dans ce cas, il peut être directement référencé avec class="xxx hide" dans. des endroits utiles. N'est-ce pas très pratique ? Vous pouvez également noter vos bonnes expériences et les partager