Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel-tutoriel CSS-php.cn

Comment écrire du code de défilement d'image CSS ? Affichage à défilement horizontal des images du carrousel

藏色散人

Libérer： 2021-02-10 09:25:08

original

15473 Les gens l'ont consulté

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>

Copier après la connexion

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.