Utilisation de compteurs CSS et de plusieurs colonnes

Cette fois, je vais vous présenter l'utilisation des compteurs CSS et des multi-colonnes. Quelles sont les précautions lors de l'utilisation des compteurs CSS et des multi-colonnes ?

Définissez un compteur via CSS, et le nombre généré par le compteur peut être utilisé dans d'autres éléments.
Attributs :
1. compteur-reset
Fonction : Utilisé pour définir le compteur et définir la valeur initiale
Si la valeur initiale n'est pas définie , la valeur par défaut est 0, si elle est définie, elle peut être positive, négative, 0
Sélecteur

{
   counter-reset:counter1 10;
    }

Sélecteur

{
   counter-reset:counter1 10 counter2 20;
   }

Remarque : Si un élément du la page entière est Si vous souhaitez utiliser le compteur, il est préférable de le définir dans le corps. N'oubliez pas de définir le compteur dans un certain élément (sauf le corps). S'il est défini de cette manière, ce sera toujours la valeur initiale lors d'une nouvelle utilisation.

   body{
   counter-reset:c1 10 c2 20;
   }

2. Compteur-incrément
Fonction : Définit l'incrément à chaque utilisation du compteur La valeur par défaut est 1
Valeur de l'attribut : Elle peut être positive (incrémentation). , ou Peut être négatif (décroissant)
Remarque : quelle balise est utilisée, déclarez l'attribut de contre-incrément
dans cette balise Syntaxe :
contre-incrément : valeur d'incrément du nom du compteur
div{
counter-increment:c1 10;
}
Fonction:
counter(counterName) Function
Fonction : Utiliser le texte numérique créé par le compteur.
counterName : nom du compteur
2. Plusieurs colonnes

Attributs :
1, nombre de colonnes
Le nombre de colonnes dans lesquelles l'élément est séparé 3
2, column- gap
L'écart entre les colonnes px
3, column-rule
Règle de colonne, largeur, style, couleur du séparateur de colonne
column-rule:1px solid red;
Parcourir Problèmes de compatibilité du serveur :

Internet 10 和 Opera 支持多列Firefox : -moz-Chrome 和 Safari : -webkit-div{column-count:3;column-gap:50px;column-rule:2px solid red;
-o-column-count:3;/*Opera*/-o-column-gap:50px;-o-column-rule:2px solid red;
-moz-column-count:3; /*火狐中的多列设置*/-moz-column-gap:50px;-moz-column-rule:2px solid green;
-webkit-column-count:3;/*Chrome 与 Safari*/-webkit-column-gap:50px;-webkit-column-rule:2px solid red;}

Méthode d'écriture courante de Firefox

-moz-column-count:3;
-moz-column-gap:50px;

Écrire séparément

-moz-column-rule-style:dashed/dotted(点状)/double(双线)/solid(实线);
-moz-column-rule-width:thin/medium/thick/length;
-moz-column-rule-color:orange;

Global

-moz-column-rule:2px dashed red;

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres articles connexes sur le site Web chinois de php !

Lecture connexe :

Que dois-je faire si le navigateur n'est pas compatible avec le code que j'ai écrit

Dernière version 2018 Questions d'entrevue frontale 11

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!