CSS redéfinissant les puces et les conseils de numérotation

Tous ceux qui ont utilisé Word savent que Word a une fonction "puces et numérotation", très pratique à utiliser. Le panneau de propriétés de Dreamweaver3 comporte également un bouton icône similaire à "Puces et chiffres" qui génère une fonction de liste automatique, mais il n'a que deux formes, à savoir des carrés et des chiffres arabes. Cependant, nous pouvons utiliser la fonction de définition CSS de Dreamweaver3 pour redéfinir le « format des symboles de liste ». Ce qui suit prend la définition d'un « symbole de liste à puces en chiffres romains majuscules » comme exemple pour illustrer son utilisation :

1. F7 (ou cliquez sur l'icône qui ressemble à "Diagramme Bagua" dans la barre de lancement rapide), affichez le panneau CSS, sélectionnez "aucun", puis cliquez sur l'icône d'édition en bas du panneau et appuyez sur le bouton "Nouveau". dans la boîte de dialogue contextuelle "Modifier la feuille de style", après avoir sélectionné "Redéfinir la balise HTML (redéfinir la balise HTML)" dans la boîte de dialogue contextuelle "Nouveau style", sélectionnez "ol" dans la boîte de sélection "Tag" ci-dessous, appuyez sur OK et la boîte de dialogue "Définition de style pour l'ancien" apparaîtra immédiatement, comme indiqué ci-dessous :

Sélectionnez "liste" dans la fenêtre de sélection sur le côté gauche de l'écran. Boîte de dialogue "Définition de style pour l'ancien", et sur le panneau de droite, nous devons simplement définir "Type", cliquez sur le bouton triangle à droite, vous pouvez voir la liste comme indiqué ci-dessous :

2. Laissez-moi vous expliquer La signification de chaque élément de la liste dans l'image ci-dessus :

disque : cercle plein

cercle : creux ; cercle ;

carré : carré plein ;

décimal : chiffres décimaux ;

minuscule romain : chiffres romains minuscules

majuscule romain ; chiffres ;

alpha minuscule : lettres anglaises minuscules ;

alpha majuscule : lettres anglaises majuscules

aucun : ne pas afficher les puces ni les chiffres.

Évidemment, dans cet exemple, sélectionnez "haut-roman" puis appuyez sur OK pour revenir (notez que l'attribut "Bullet" ne doit pas être sélectionné maintenant, sinon le résultat attendu pourrait ne pas l'être). Terminez en appuyant sur le bouton "Terminé" dans la boîte de dialogue "Modifier la feuille de style". Le code CSS visible entre 〈head〉 et 〈/head〉 du code source de la page Web est le suivant :

〈style type="text/css"〉
〈!--
ol { list-style-type: upper-romancircle}
--〉
〈/style〉

Pour les internautes qui n'utilisent pas Dreamweaver3, copiez directement le code ci-dessus entre 〈head〉 et 〈/tête〉 〈/tête〉, l'effet est le même.

3. De cette façon, lorsque nous concevons une page Web, cliquez sur l'icône du numéro d'article

pour obtenir la majuscule romaine. Il existe une liste de nombres, mais les nombres décimaux sont toujours visibles lors de l'édition et leurs vraies couleurs ne sont affichées que lors de la navigation. Si vous avez besoin de nombres dans d'autres formats, sélectionnez simplement d'autres styles dans la liste lors de la deuxième étape.

Si vous souhaitez appuyer sur l'icône

, le graphique devant la puce (la valeur par défaut est un carré plein) sera également remplacé par un numéro numérique, aussi long que le premier. Lors de la sélection de la marque "Tag" en une seule étape, ne sélectionnez pas "ol" mais sélectionnez plutôt "ul". Les autres opérations sont exactement les mêmes. Si vous souhaitez le modifier pour utiliser des puces en chiffres romains majuscules, le code CSS résultant ressemble à ceci :

〈style type="text/css"〉
〈!--
ul { list-style-type: upper-romancircle}
--〉
〈/style〉

Comme vous pouvez le voir ici, ces deux icônes jouent fondamentalement le même rôle, mais ont des étiquettes différentes. .C'est tout.