Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern-CSS-Tutorial-php.cn

Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern

藏色散人

Freigeben： 2021-02-10 09:25:08

Original

15473 Leute haben es durchsucht

Die Anzeige von Karussellbildern auf Webseiten ist für die tägliche Arbeit unerlässlich. Daher ist die Einführung in den CSS-Bildlaufcode in diesem Artikel für Anfänger, die gerade erst anfangen, noch einfacher zu verstehen. Ich hoffe, dieser Artikel ist für alle hilfreich.

Das CSS-Bildlaufcode-Beispiel lautet wie folgt:

<!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="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/2.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/3.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/4.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
    <img  src="img/5.png"/ alt="Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern" >
</div>
</body>
</html>

Nach dem Login kopieren

Hinweis: In HTML hat das -Tag kein schließendes Tag und nicht möglich. Für den linken Floating-Bereich muss der äußere Container ohne Zeilenumbrüche hinzugefügt werden. Das -Tag fügt kein Bild in die Webseite ein, sondern verlinkt das Bild von der Webseite und erstellt so einen Platzhalter für das referenzierte Bild.

white-space: nowrap;

Nach dem Login kopieren

Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern

[Empfehlungen für verwandte Artikel]

So implementieren Sie $.fn- und Bildlaufeffekte in jquery

Ausführliche Erklärung, wie man einen benutzerdefinierten CSS3-Bildlaufleistenstil schreibt

Ein Beispiel zur Erläuterung von CSS3, um nahtloses Scrollen in Endlosschleife zu erreichen

Kein Bild-Seam-Scroll-Plug-In-Code für nahtloses Scrollen von Bildern nach oben, unten, links und rechts

Javascript, um den Scrolleffekt von Bildern nach links und rechts zu erzielen [kann automatisch scrollen, mit linken und rechten Tasten]

[Verwandte Video-Tutorials empfohlen]

Image tag-2016 neues Lehrplansystem HTML+CSS-Video

Das obige ist der detaillierte Inhalt vonWie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!