Heim >Web-Frontend >CSS-Tutorial >Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern
Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern
- 藏色散人Original
- 2018-08-06 10:14:5615478Durchsuche
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!