Introduction à l'utilisation des éléments de liste personnalisés CSS dans le style de liste

Aujourd'hui, j'ai créé une page de recrutement pour une entreprise. Je termine les dessins de conception le matin et commence la composition l'après-midi. La page copiait la page de recrutement d'un bureau de talents que j'avais créé auparavant, et la barre de navigation et la bannière sont apparues rapidement. J'ai utilisé des listes à certains endroits de ce contenu, et bien sûr, je dois utiliser les balises

Les éléments de la liste (petits points) sont transformés en petits carrés verts. À ce moment-là, je pensais s'il existait une propriété CSS pour personnaliser les éléments de la liste. Pas besoin de le savoir, ça existe vraiment. list-style peut définir list-style-type, list-style-position et list-style-image Ces trois attributs peuvent être écrits ensemble. list-style-image est exactement le modèle d'élément de liste personnalisé.

Avant de commencer à les définir, j'ai rencontré deux problèmes : 1. Le style par défaut du label

• Après vérification, j'ai constaté que la feuille de style d'initialisation
  définissait list-style: none, ce qui entraînait la suppression des petits points par défaut. Ensuite, nous devons définir le style de liste de
  . 2. List-style-position a deux valeurs facultatives : insite et outsite Il n'y a aucun problème lors de l'utilisation de insite (les éléments de la liste sont à l'intérieur de la ligne), mais lors de l'utilisation de outsite (les éléments de la liste sont en dehors de la ligne), les petits points disparaissent. Il s'avère que la feuille de style d'initialisation définit

  comme overflow: caché, et la partie qui déborde

  Et

  est contenu dans

  , donc

  coupe les éléments de liste débordants. Définissez simplement

  comme valeur par défaut visible ici.

  Vous pouvez commencer à personnaliser le modèle de liste. Tout d’abord, découpez le motif dans PS et enregistrez-le à l’emplacement désigné. Définissez l'image de style de liste : url (i/icon.gif). Le problème est que le motif n’est pas centré horizontalement avec le texte. Baidu, Japon

  • doit définir une hauteur fixe, la définir est inutile. Après une inspection minutieuse, il s'avère que les prédécesseurs avaient déjà de l'expérience avec les modèles personnalisés : Solution 1, inclure un espace vide en bas lors de la découpe du motif de l'élément de liste. Cette solution doit garantir que l'espace vide du motif est cohérent. avec la couleur de fond de la page. Je pense que cette solution n'est pas élégante car la police peut devenir plus grande ou plus petite et ne peut donc pas être réutilisée. Option 2, utilisez l'attribut background pour personnaliser le modèle de la liste d'éléments. Cette solution permet de contrôler de manière flexible la position du motif, et l'espacement entre le texte et le motif est également facile à contrôler (je ne vous dirai pas d'utiliser un remplissage pour contrôler l'espacement). Pour résumer, il est en fait logique que la feuille de style d'initialisation supprime les points par défaut
  • . Premièrement, dans la plupart des cas, les éléments de liste ne seront pas utilisés. Deuxièmement, utiliser le style de liste pour personnaliser les éléments d’une liste est vraiment difficile à contrôler.

    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!