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!
lte
Was ist der Grund dafür, dass keine Verbindung zum Server hergestellt werden konnte?
Was sind die Produktionsmethoden der HTML5-Animationsproduktion?
Was sind die häufigsten Tomcat-Schwachstellen?
So löschen Sie die letzte leere Seite in Word
So ändern Sie Dateinamen stapelweise
So löschen Sie Float in CSS
Konvertierung von FLAC-Dateien
![[Web-Frontend] Node.js-Schnellstart](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
