, wie in der Abbildung gezeigt, sind zwei seitliche Pfeilbilder.
Reines HTML und CSS, um den JD-Karusselleffekt zu erzielen
|
Das JD-Karussell wurde mit reinem HTML und CSS implementiert, ohne dynamische Effekte hinzuzufügen und hauptsächlich unter Verwendung von Positionierungswissen.
<!DOCTYPE html>
<html lang="de">
<Kopf> <Meta-Zeichensatz="UTF-8">
<Titel>LunBo</Titel>
<Stil>
*{
Polsterung: 0;
Rand: 0;
}
li{
Listenstil: keiner;
}
.lunbo{
Rand: 40px automatisch;
Höhe: 470px;
Breite: 590px;
Position: relativ;
}
.links rechts{
Position: absolut;
oben: 50 %;
Rand oben: -18px;
Breite: 24px;
Höhe: 36px;
}
.links{
links: 0;
}
.Rechts{
rechts: 0;
}
.lunbo ul{
Höhe: 18px;
Breite: 151px;
Hintergrund: rgba(255,255,255,.3);
Position: absolut;
unten: 10px;
links: 50%;
Rand links: -76px;
Rahmenradius: 10px;
}
.lunbo li{
Höhe: 14px;
Breite: 14px;
Randradius: 50 %;
Hintergrundfarbe: #fff;
schweben: links;
Rand: 2px;
}
.lunbo .aktuell{
Hintergrundfarbe: #f40;
}
</Stil>
</Kopf>
<Text>
<div Klasse="lunbo">
<img src="images/lunbo.jpg" alt="">
<div class="left"><img src="images/left.png" alt=""></div>
<!-- Sie können auch einen Link verwenden und dann den Hintergrund verwenden -->
<div class="right"><img src="images/right.png" alt=""></div>
<ul>
<li Klasse="aktuell"></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</body>
</html>Folgende Effekte wurden erzielt
Zusammenfassen Das Obige ist reines HTML und CSS, um den vom Editor eingeführten JD-Karusselleffekt zu erzielen. Ich hoffe, es wird allen helfen. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und der Editor wird Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken! |
<<: Die unangemessenen MaxIdleConns von MySQL führen zu kurzen Verbindungen
>>: Fünf praktische Tipps zur Gestaltung von Webformularen
Artikel empfehlen
So verhindern Sie eine Verlangsamung des Computers, wenn unter WIN10 mehrere Datenbanken installiert sind
Aktivieren Sie den Dienst, wenn Sie ihn benötigen...
Erste Schritte mit der Konvertierung von Vue in React
Inhaltsverzeichnis Design Komponentenkommunikatio...
Der Unterschied zwischen den Feldtypen char, varchar und Text in MySQL
In MySQL können alle Felder der Typen char, varch...
Führen Sie die folgenden Schritte aus, damit Docker Images abrufen kann
1. Docker Pull zieht das Image Wenn Sie zum Abruf...
Vollständige Schritte zur Verwendung von Nginx+Tomcat zum Lastenausgleich unter Windows
Vorwort Heute erklärt Ihnen Prince die vollständi...
Funktionsprinzip und Implementierungsmethode der Vue-Anweisung
Einführung in Vue Die aktuelle Ära der großen Fro...
Prinzip der Ereignisdelegierung in JavaScript
Inhaltsverzeichnis 1. Was ist Eventdelegation? 2....
Responsive Layout-Zusammenfassung (empfohlen)
Grundkenntnisse der responsiven Layoutentwicklung...
Detaillierte Erläuterung der Linux-Textverarbeitungstools
1. Zählen Sie die Anzahl der Benutzer, deren Stan...
Detaillierte Erläuterung der MySQL Master-Slave-Replikationspraxis - GTID-basierte Replikation
GTID-basierte Replikation Einführung Die GTID-bas...
js implementiert das Ein- und Ausblenden von Inhalten mit der Maus über die Karte
In diesem Artikel wird der spezifische Code von j...
Der vollständige Implementierungsprozess von Sudoku mit JavaScript
Inhaltsverzeichnis Vorwort So lösen Sie Sudoku Fü...
MySQL-Schleife fügt zig Millionen Daten ein
1. Erstellen Sie eine Testtabelle Tabelle `mysql_...
Grafisches Tutorial zur Installation von MySQL 8.0.15 und Datenbankgrundlagen
Die Installation der MySQL-Software und die Daten...
Windows verhindert, dass der Remote-Desktop für längere Zeit automatisch getrennt wird
Jeder, der schon einmal Windows Remote Desktop zu...