Zeitleistenimplementierungsmethode basierend auf ccs3
|
In Webprojekten nutzen wir häufig die Zeitleistensteuerung. Dieser Artikel stellt eine CSS3-basierte Zeitleiste bereit, die Element für Element erweitert werden kann. In jedes erweiterte Element können Text, Bilder, Videos und andere Elemente eingebettet werden. Der Operationseffekt ist wie folgt:
erreichen Der Implementierungsprozess dieses Steuerelements ist relativ einfach und besteht hauptsächlich aus der Datei 1. test.html-Datei
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<meta name="viewport" content="width=Gerätebreite, Anfangsmaßstab=1.0">
<meta http-equiv="X-UA-kompatibel" content="ie=edge">
<link rel="stylesheet" href="timeline.css"/>
<title>Zeitleiste</title>
</Kopf>
<Text>
<div id='ZeitDiv'>
<ul id='Zeitleiste'>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk1' Name='Werke' Typ='Radio' aktiviert>
<div Klasse="relativ">
<label for='work1'>1. Titel 1</label>
<span class='date'>T1</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im ersten Jahr von Chang'an (701) lebte Li Bai, dessen Höflichkeitsname Taibai war. Es wird allgemein angenommen, dass sein Geburtsort die Gemeinde Qinglian, Changlong (später in Changming geändert, um das Tabu des Kaisers Xuanzong zu umgehen), Mianzhou (Kreis Baixi), Jiannan Road, in der Tang-Dynastie war. Sein Stammsitz ist Tianshui, Gansu.
Sein familiärer Hintergrund und seine Familie sind unbekannt. Laut dem „Neuen Buch von Tang“ war Li Bai der Enkel in neunter Generation von Kaiser Xingsheng (Li Hao, König Wuzhao von Liang). Dieser Aussage zufolge gehörte Li Bai demselben Clan an wie die Könige der Li-Tang-Dynastie und war ein Cousin von Kaiser Taizong von Tang, Li Shimin.
Einige sagen auch, dass sein Vorfahre Li Jiancheng oder Li Yuanji war.
</p>
<p><img src="http://i.qulishi.com/UploadFile/2014-7/2014725171362.jpg" /></p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk2' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work2'>2. Titel 2</label>
<span class='date'>T2</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im November des ersten Jahres von Shenlong (705) starb Wu Zetian. Li Bai war fünf Jahre alt. In diesem Jahr begann ich, lesen zu lernen.
Im „Brief an Pei Changshi aus Anzhou“ heißt es: „Ich habe Liujia im Alter von fünf Jahren rezitiert.“ Liujia ist ein Lese- und Schreibbuch für Grundschulen in der Tang-Dynastie. Changshi ist der stellvertretende Leiter einer Präfektur.
</p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk3' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work3'>3. Titel 3</label>
<span class='date'>T3</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im dritten Jahr des Kaiyuan (715) war Li Bai fünfzehn Jahre alt.
Er hatte bereits viele Gedichte geschrieben, das Lob und die Unterstützung einiger Prominenter erhalten und begann, sich sozial zu engagieren.
Er begann sich auch vom taoistischen Gedankengut beeinflussen zu lassen, entwickelte eine Vorliebe für die Schwertkunst und genoss sein Leben als fahrender Ritter. In diesem Jahr wurde Cen Shen geboren.
</p>
</div>
</li>
<li Klasse='Arbeit'>
<Eingabeklasse='Radio' ID='Werk4' Name='Werke' Typ='Radio'>
<div Klasse="relativ">
<label for='work4'>4. Titel 4</label>
<span class='date'>T4</span>
<span class='Kreis'></span>
</div>
<div Klasse='Inhalt'>
<p>
Im sechsten Jahr von Kaiyuan (718) war Li Bai achtzehn Jahre alt.
Er lebte zum Studieren zurückgezogen auf dem Berg Dakuang in Daitian (heute in der Stadt Jiangyou, Provinz Sichuan).
Er reiste in die benachbarten Landkreise und besuchte Jiangyou, Jiange, Zizhou (die Präfekturhauptstadt lag in der heutigen Provinz Sichuan) usw., was ihm viel Erfahrung und Wissen einbrachte.
</p>
</div>
</li>
</ul>
</div>
</body>
</html>2. timeline.css-Datei
#zeitDiv{
maximale Breite: 1200px;
Rand: 0 automatisch;
Polsterung: 0,5 %;
Schriftgröße: 100 %;
Schriftfamilie: „Noto Sans“, serifenlos;
Farbe: Schwarz;
Hintergrund: weiß;
}
/* -------------------------------------
* Zeitleiste
* ------------------------------------- */
#Zeitleiste {
Listenstil: keiner;
Rand: 50px 0 30px 120px;
Polsterung links: 30px;
Rahmen links: 8px durchgehend grau;
}
#Zeitleiste li {
Rand: 40px 0;
Position: relativ;
}
#Zeitleiste p {
Rand: 0 0 15px;
}
.Datum {
Rand oben: -10px;
oben: 50 %;
links: -80px;
Schriftgröße: 0,95em;
Zeilenhöhe: 20px;
Position: absolut;
}
.Kreis {
Rand oben: -15px;
oben: 50 %;
links: -49px;
Breite: 20px;
Höhe: 20px;
Hintergrund: weiß;
Rand: 5px durchgehend grau;
Randradius: 50 %;
Anzeige: Block;
Position: absolut;
}
.Inhalt {
maximale Höhe: 20px;
Polsterung: 70px 20px 0;
Rahmenfarbe: transparent;
Rahmenbreite: 2px;
Rahmenstil: durchgezogen;
Rahmenradius: 0,5em;
Position: relativ;
}
.content:vorher, .content:nachher {
Inhalt: "";
Breite: 0;
Höhe: 0;
Rand: durchgehend transparent;
Position: absolut;
Zeigerereignisse: keine;
rechts: 100%;
}
.Inhalt:vor {
Rahmenfarbe rechts: erben;
Rahmenbreite: 20px;
oben: 50 %;
Rand oben: -20px;
}
.Inhalt:nach {
Rahmenfarbe rechts: weiß;
Rahmenbreite: 17px;
oben: 50 %;
Rand oben: -17px;
}
.Inhalt p {
maximale Höhe: 0;
Farbe: transparent;
Textausrichtung: Blocksatz;
Worttrennung: Worttrennung;
Bindestriche: auto;
Überlauf: versteckt;
}
Etikett {
Schriftgröße: 1,3em;
Position: absolut;
Z-Index: 100;
Cursor: Zeiger;
oben: 35px;
Übergang: Transformation 0,2 s linear;
Schriftstärke: fett;
}
.radio {
Anzeige: keine;
}
.radio:geprüft + .relative Bezeichnung {
Cursor: automatisch;
transformieren: übersetzenX(42px);
}
.radio:geprüft + .relative .circle {
Hintergrund: rot;
}
.radio:geprüft ~ .content {
maximale Höhe: 200000px;
Rahmenfarbe: hellgrau;
Rand rechts: 20px;
transformieren: übersetzenX(20px);
Übergang: max. Höhe 0,4 s linear, Rahmenfarbe 0,5 s linear, Transformation 0,2 s linear;
}
.radio:geprüft ~ .content p {
maximale Höhe: 200000px;
Farbe: Schwarz;
Übergang: Farbe 0,3 s linear 0,3 s;
}
/* -------------------------------------
* Mobiltelefone (nur vertikale Version)
* ------------------------------------- */
@media screen und (max-width: 767px) {
#Zeitleiste {
Rand links: 0;
Polsterung links: 0;
Rand links: keiner;
}
#Zeitleiste li {
Rand: 50px 0;
}
Etikett {
Breite: 85 %;
Schriftgröße: 1,1em;
Leerzeichen: Nowrap;
Textüberlauf: Auslassungspunkte;
Überlauf: versteckt;
Anzeige: Block;
transformieren: übersetzenX(18px);
}
.Inhalt {
Polsterung oben: 60px;
Rahmenfarbe: #eee9dc;
}
.content:vorher, .content:nachher {
Rand: durchgehend transparent;
unten: 100 %;
}
.Inhalt:vor {
Rahmenunterseite-Farbe: erben;
Rahmenbreite: 17px;
oben: -16px;
links: 50px;
Rand links: -17px;
}
.Inhalt:nach {
Farbe des unteren Rahmens: weiß;
Rahmenbreite: 20px;
oben: -20px;
links: 50px;
Rand links: -20px;
}
.Inhalt p {
Schriftgröße: 0,9em;
Zeilenhöhe: 1,4;
}
.Kreis, .Datum {
Anzeige: keine;
}
}【Referenzen】 CSS3-ZEITPLAN Dies ist das Ende dieses Artikels über die auf ccs3 basierende Methode zur Implementierung von Zeitleisten. Weitere relevante Inhalte zur Implementierung von CSS3-Zeitleisten finden Sie in den vorherigen Artikeln von 123WORDPRESS.COM oder in den folgenden verwandten Artikeln. Ich hoffe, dass jeder 123WORDPRESS.COM in Zukunft unterstützen wird! |
<<: Die Tabelle fügt Zellen und das img-Bild zusammen, um das gesamte td-HTML auszufüllen
Artikel empfehlen
Eine kleine Frage zur Ausführungsreihenfolge von SQL in MySQL
Ich bin heute bei der Arbeit auf ein SQL-Problem ...
So ändern Sie Port 3389 des Remotedesktops von Windows Server 2008 R2
Die Standardportnummer des Remotedesktops des Win...
Detaillierte Erklärung des VUE-Reaktionsprinzips
Inhaltsverzeichnis 1. Grundlage des Responsive-Pr...
Detaillierte Schritte für QT zum Herstellen einer Verbindung zur MySQL-Datenbank
Der erste Schritt besteht darin, das entsprechend...
Lernen wir JavaScript objektorientiert kennen
Inhaltsverzeichnis JavaScript-Prototypenkette Obj...
Lösung für das 404/503-Problem beim Anmelden bei TeamCenter12
TeamCenter12 gibt das Kontokennwort ein und klick...
Bringen Sie Ihnen bei, schnell ein Webclusterprojekt basierend auf Nginx zu erstellen
Inhaltsverzeichnis 1. Projektumgebung 2. Projektb...
Diagramm des Tutorials zum Herunterladen und Installieren von MySQL8.0 für Win10 64-Bit
Wie lade ich MySQL von der offiziellen Website he...
Eine kurze Analyse zum Verständnis von Vue-Komponenten aus einer objektorientierten Perspektive
Wenn dieselbe Funktion und derselbe HTML-Code meh...
Implementierungscode für die Schiebeschalterfunktion der Registerkarte „Links“ und „Rechts“ des WeChat-Applet
Effektbild: 1. Einleitung Ihr eigenes Applet muss...
Detaillierte Erklärung zu MySQL-Phantomlesevorgängen und wie man sie eliminiert
Inhaltsverzeichnis Transaktionsisolationsebene Wa...
JS berechnet die Gewinnwahrscheinlichkeit basierend auf dem Preisgewicht
Inhaltsverzeichnis 1. Beispielszenario 1.1. Legen...
So betreiben Sie eine MySQL-Datenbank mit dem ORM-Modell-Framework
Was ist ORM? ORM steht für Object Relational Mapp...
Wie kann das Front-End die 100.000 vom Back-End zurückgegebenen Daten besser anzeigen?
Inhaltsverzeichnis Vorarbeit Backend-Konstruktion...
Grundlegende MySQL-Grundlagen: Gruppierungsfunktion, Aggregatfunktion, Gruppierungsabfrage – ausführliche Erklärung
Inhaltsverzeichnis 1. Einfach zu bedienen 2. Verw...