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="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</a></li> 
<li><a href="http://www.php.cn/">欢迎您访问</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}

/* L'arrière-plan introduit uniquement l'image et peut être carrelé en plein écran dans l'objet sans définir d'autres paramètres*/

ul.licss li{ width:100% ;

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

/* La hauteur doit être calculée et a un certaine relation avec l'image de mise en page*/

ul.licss li:hover{ background:#EBEBEB}

/* Afin d'avoir un changement dynamique de couleur d'arrière-plan, définissez la pseudo-classe de survol pour li*/

Associez-le séparément ici, ul définit une classe. Explication : Dans la mise en page actuelle, la mise en page ul li sera utilisée à de nombreux endroits. Afin de distinguer l'utilisation de ul à d'autres endroits, la classe est nommée séparément pour l'instance ici.

Extension CSS : Si vous souhaitez changer la couleur lorsque la souris passe sur li, vous pouvez définir CSS ul.licss li:hover{set background color}.

Utilisation flexible : selon des exemples, vous pouvez étendre les compétences de mise en page ul li aux mises en page non-li pour implémenter la couleur de l'intervalle d'arrière-plan de la mise en page de type liste.

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

Lecture connexe :

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!