Maison >interface Web >tutoriel CSS >Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel
Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel
- 藏色散人original
- 2018-08-06 10:14:5615474parcourir
L'affichage d'images de carrousel sur les pages Web est essentiel dans le travail quotidien, donc pour les novices qui débutent, l'introduction de cet article au code de défilement d'images CSS est encore plus facile à comprendre. J'espère que cet article sera utile à tout le monde.
L'exemple de code de défilement d'image CSS est le suivant :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>css图片滚动代码示例</title>
</head>
<body>
<style>
.imglist{
overflow-x: auto;
overflow-y: hidden;
height:180px;
white-space: nowrap;}
img{
width:auto;
height:100%;
margin-right:10px;
}
</style>
<div class="imglist">
<img src="img/1.png"/ alt="Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel" >
<img src="img/2.png"/ alt="Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel" >
<img src="img/3.png"/ alt="Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel" >
<img src="img/4.png"/ alt="Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel" >
<img src="img/5.png"/ alt="Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel" >
</div>
</body>
</html>Remarque : En HTML, la balise balise de fermeture. Et il ne peut pas flotter vers la gauche, et le conteneur externe doit être ajouté sans sauts de ligne. La balise
n'insère pas d'image dans la page Web, mais relie l'image à partir de la page Web, créant ainsi un espace réservé pour l'image référencée.
white-space: nowrap;
[Articles connexes recommandés]
Comment implémenter $.fn et les effets de défilement d'image dans jquery
Explication détaillée de la façon d'écrire un style de barre de défilement personnalisé CSS3
Un exemple pour expliquer CSS3 afin d'obtenir un défilement transparent en boucle infinie
[Tutoriels vidéo recommandés connexes]
Tag d'image - Nouveau système de curriculum 2016, vidéo html+css
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!