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>
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;
[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
[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!