Tutoriel de changement de couleur entrelacé CSS

Nous savons qu'en HTML, l'effet de mise en page de différence de couleur est nécessaire avant les listes ul et li. Alors, comment utiliser CSS pour changer la couleur de ul li sur des lignes alternées ? Aujourd'hui, je vais vous donner un exemple à démontrer.

Afin de ne pas affecter les appels du programme et de simplifier le programme, utilisez la disposition de la liste ul li pour obtenir la disposition des couleurs d'arrière-plan espacées ci-dessus. En même temps, la souris survole le li et l'arrière-plan change. couleur. Il existe généralement deux méthodes.

La première méthode : image d'arrière-plan, coupez une étroite bande verticale de matériau d'image d'arrière-plan, utilisez l'image d'arrière-plan comme arrière-plan ul, et laissez l'image d'arrière-plan être utilisée comme arrière-plan ul, puis carrelée de haut en bas, à gauche et à droite, vous pouvez facilement obtenir l'effet d'espacement.

Deuxième type : utilisez les effets spéciaux JQ pour obtenir un tel effet d'espacement de la couleur d'arrière-plan et de modification de la couleur d'arrière-plan lorsque la souris passe dessus via les effets spéciaux JS. et doivent introduire des fichiers et des codes JS.

Ensuite, nous présenterons ces deux méthodes à travers des exemples graphiques et textuels + démonstration en ligne .

Le matériel d'image d'arrière-plan implémente la couleur d'intervalle d'arrière-plan de la liste li

Ce cas DIV+CSS est une méthode recommandée, qui est simple et pratique, enregistre le code et permet d'obtenir le changement de couleur d'arrière-plan effet lorsque la souris est déplacée au-dessus du li.

La méthode de fonctionnement est la suivante :

Découpez un li d'une largeur de 1 pixel et d'une hauteur d'exactement deux couleurs comme matériau de l'image

Code source HTML correspondant

<ul class="licss"> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
<li><a href="//m.sbmmt.com/">欢迎您访问</a></li> 
</ul>

Ce qui précède est le contenu de la mise en page de ul li. La clé est de voir l'écriture et l'explication du code CSS ci-dessous.

4. Code CSS correspondant

ul.licss{ margin:0 auto background:url(ul-bg.gif); text-align:left}

text-indent:10px; line-height:34px}

Comment convertir du HTML 2D et 3D

HTML5 vidéo Étapes de mise en œuvre audio

Js façons courantes d'obtenir des styles

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!