Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

藏色散人
Freigeben: 2021-02-10 09:25:08
Original
15432 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 Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern-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 Wie schreibe ich CSS-Bildlaufcode? Horizontal scrollende Anzeige von Karussellbildern-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!

Verwandte Etiketten:
Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage