Partagez trois méthodes pour ajouter des icônes aux balises li

Nous utilisons souvent la balise li lors de la mise en page de la page. Utiliser la balise li seule est relativement monotone. Parfois, pour des raisons d'effet de page, des images doivent être ajoutées. Cet article partagera avec vous trois méthodes pour ajouter des icônes aux balises li. J'espère qu'il vous sera utile.

1. Utiliser les attributs spéciaux de CSS

ul{list-style-type:disc;} //Le rôle du disque Il s'agit d'ajouter un point noir avant chaque li. Les autres points couramment utilisés sont carré : carré noir ; aucun : pas de style de liste ;

Vous pouvez également contrôler si l'icône est à l'extérieur ou à l'intérieur. la balise li, telle que

ul{list-style-position:inside;} ou outside

Si vous souhaitez ajouter votre propre motif personnalisé, vous pouvez utiliser

ul{list-style-image:url (adresse de l'image);}

Bien sûr, cela peut également être utilisé avec la position.

Mais je n’ai jamais appliqué les attributs ci-dessus, et je ne les recommande pas à tout le monde. Pourquoi ?

Tout d'abord, le type de style liste de ul affiche différentes tailles de points ou de cases dans différents navigateurs, ce qui est très inesthétique.

De plus, l'attribut positon n'est pas facile à utiliser. J'ai essayé d'utiliser cet attribut. Le résultat est que l'orientation affichée dans IE6 et supérieur et Firefox est difficile à unifier.

2. Je recommande d'utiliser background

ul{….;list-style-type:none;….}

li{…. ;background:url (icône d'arrière-plan) no-repeat 0px 0px;….}

La fonction de no-repeat ici est d'empêcher l'image de produire un effet de mosaïque, et 0px et 0px sont les coordonnées de positionnement l’affichage de l’image.

Encore un point ici, lors de l'ajout d'une image d'arrière-plan à li, vous devez également ajouter padding-left : n'importe quel nombre px, sinon le texte bloquera l'icône d'arrière-plan, mais en même temps, vous ne devez pas ajoutez de la largeur à li, sinon ce sera différent. Il y a un problème de compatibilité sous le navigateur. Pour plus de détails, veuillez consulter le positionnement en CSS et utiliser l'attribut padding avec prudence

3. Utilisez l'arrière-plan. pour mettre en place le classement

En fait, c'est très simple, il suffit de s'adapter. Il suffit de le faire en un clic

ul{….;background:url(path) no-repeat 1px 2px;….}

Vous devriez savoir, ajoutez simplement l'image à ul au lieu de li, mais la différence est que les images sont 1, 2, 3... images soigneusement disposées en colonne ordre, ou d'autres effets que vous souhaitez. Il convient de noter que la hauteur de chaque rangée correspond étroitement à l'image.

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!