Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML
|
HTML zum Erreichen eines einfachen ListViews-Effekts Ergebnis:
CSS-Style-Datei listviewTest.css
Körper{
Hintergrund: weißer Rauch;
}
#mainContentDiv{
Position: absolut;
Breite: 70 %;
Höhe: 100 %;
Hintergrund: weißer Rauch;
oben: 10 %;
links: 10%;
}
.mainDivMainImgDiv{
Position: absolut;
Breite: 100 %;
Höhe: 50px;
Hintergrund: weiß;
}
.mainDivMainInfoiv{
Position: absolut;
Breite: 100 %;
Höhe: 100 %;
Hintergrund: weißer Rauch;
oben: 60px;
}
/*js implementiert div mit schwebenden Spezialeffekten*/
.occlusionDiv{
Position: absolut;
Breite: 100 %;
Höhe: 100%;
Hintergrund: rgba(0,0,0,0,3);
Deckkraft: 0;
Z-Index: 14;
}
.headLeftDiv{
Position: absolut;
Breite: 50%;
Höhe: 100%;
links: 4%;
oben: 25 %;
}
.headLeftDivFont{
Schriftstärke: 500;
/*Zeilenhöhe: 58px;*/
Schriftgröße: 20px;
Farbe: #333;
}
/*---------------------------subInfoDiv--------------*/
.mainDIvMainInfoDivSubInfoDiv{
Position: absolut;
Breite: 100 %;
Höhe: 13%;
Hintergrund: weiß;
Rand: 1px durchgezogen #eaeaea;
}
.mainDIvMainInfoDivSubInfoDiv:hover{
Hintergrund: rgba(0,0,0,0,3);
}
.mainDivMainInfoiv_HeadTextDiv{
Position: absolut;
oben: 10 %;
links: 3%;
Breite: 30 %;
Höhe: 30%;
Hintergrund: rgba (0,0,0,0);
}
.mainDivMainInfoiv_mainTextDiv{
Position: absolut;
oben: 52 %;
links: 3%;
Breite: 95 %;
Höhe: 20%;
Hintergrund: rgba (0,0,0,0);
}
.mainDivMainInfoiv_TrailTextDiv{
Position: absolut;
unten: 3%;
links: 3%;
Breite: 30 %;
Höhe: 30%;
Hintergrund: rgba (0,0,0,0);
}
.mainDivMainInfoiv_HeadTextDiv_TextBox{
Position: absolut;
oben: 25 %;
Breite: 100 %;
Höhe: 50%;
Hintergrund: rgba (0,0,0,0);
}
.cardInfoTitle {
Schriftstärke: 700;
/*Farbe: #1f264d;*/
Höhe: 22px;
Anzeige: Inline-Block;
maximale Breite: 600px;
Überlauf: versteckt;
Textüberlauf: Auslassungspunkte;
Leerzeichen: Nowrap;
Cursor: Zeiger;
}
.flexFont{
Anzeige: Flex; Schriftgröße: 12px; Farbe: RGB (102, 102, 102); Höhe: 20px;
}
.rightFlexFont{
Farbe: #b3b3b3;
Schriftstärke: 500;
Textausrichtung: rechts;
Schriftgröße: 12px;
Farbe: rgb(179, 179, 179);
}
.InfoDiv_Right_1{
Position: absolut;
oben: 30%;
rechts: 2%;
Breite: 30 %;
Höhe: 30%;
Hintergrund: rgba (0,0,0,0);
}
.InfoDiv_Right_2{
Position: absolut;
oben: 55 %;
rechts: 2%;
Breite: 30 %;
Höhe: 30%;
Hintergrund: rgba (0,0,0,0);
}
.mainDivMainInfoiv_TrailTextDiv_TextBox{
Position: absolut;
oben: 25 %;
Breite: 100 %;
Höhe: 50%;
Hintergrund: rgba (0,0,0,0);
}
.mainDivMainInfoiv_mainTextDiv_TextBox{
Position: absolut;
oben: 25 %;
Breite: 100 %;
Höhe: 50%;
Hintergrund: rgba (0,0,0,0);
}html-Seite:
<!DOCTYPE html>
<html lang="de">
<Kopf>
<meta charset="UTF-8">
<title>ListenansichtTest</title>
<link rel="stylesheet" href="listviewTest.css">
<script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
</Kopf>
<Text>
<Skript>
$(Funktion () {
//Erzeugen Sie schwebende Spezialeffekte, Sie können dies auch mit css:hover erreichen. //Die Kopfzeile wird durch js implementiert, und die Unterelemente in der folgenden Liste werden durch css:hover implementiert. $(".occlusionDiv").mouseover(function () {
// Transparenz festlegen, undurchsichtig bei 1, transparent bei 0 $(this).css("opacity", "1");
}).mouseout(Funktion () {
$(this).css("Deckkraft", "0");
});
});
</Skript>
<div id="HauptinhaltDiv">
<div Klasse="mainDivMainImgDiv" Stil="">
<!-- Ein Div, das den Schwebeeffekt implementiert. Der Header wird durch js implementiert, und die folgenden Unterelemente werden durch css:hover implementiert -->
<div Klasse = "occlusionDiv"></div>
<div class="headLeftDiv headLeftDivFont">Ich habe erhalten</div>
</div>
<div Klasse="mainDivMainInfoiv" Stil="">
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 0 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont">
Zurückgezogen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
<div></div>
</div>
<div Klasse = "mainDIvMainInfoDivSubInfoDiv" Stil = "Position: absolut; links: 0 %; oben: 13 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont" Stil="Farbe: #6db56d;">
Abgeschlossen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 26 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont" Stil="Farbe: #6db56d;">
Abgeschlossen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 39 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont">
Zurückgezogen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 52 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont">
Zurückgezogen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 65 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont" Stil="Farbe: #6db56d;">
Abgeschlossen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
<div Klasse="mainDIvMainInfoDivSubInfoDiv" Stil="Position: absolut; links: 0 %; oben: 78 %;">
<div Klasse="mainDivMainInfoiv_HeadTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_HeadTextDiv_TextBox KarteInfoTitle" Stil="">
Zur Rechtswirkung und den Problemen elektronischer Verträge_Yu Xiaosong</div>
</div>
<div Klasse="mainDivMainInfoiv_mainTextDiv"
Stil="Anzeige: flex; Schriftgröße: 12px; Farbe: rgb(102, 102, 102); Höhe: 20px;">
Initiator: Zhang San<div class="mainDivMainInfoiv_mainTextDiv_TextBox" style=""></div>
</div>
<div Klasse="mainDivMainInfoiv_TrailTextDiv" Stil="">
<div Klasse="mainDivMainInfoiv_TrailTextDiv_TextBox flexFont" style="">
Teilnehmer: Zhang San, Li Si</div>
</div>
<div Klasse="InfoDiv_Right_1 rightFlexFont">
Zurückgezogen</div>
<div Klasse="InfoDiv_Right_2 rightFlexFont">
12.02.2020 18:41:11 Uhr
</div>
</div>
</div>
</div>
</body>
</html>Zusammenfassen Dies ist das Ende dieses Artikels über den detaillierten Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML. Weitere relevante Inhalte zur Implementierung von ListViews in HTML finden Sie in früheren Artikeln auf 123WORDPRESS.COM oder in den verwandten Artikeln weiter unten. Ich hoffe, Sie werden 123WORDPRESS.COM auch in Zukunft unterstützen! |
<<: Anwendungsszenario für die MySQL-Konfiguration mehrerer Instanzen
>>: Kreisförmiger Fortschrittsbalken mit CSS implementiert
Artikel empfehlen
13 JavaScript-Einzeiler, die Sie wie einen Experten aussehen lassen
Inhaltsverzeichnis 1. Holen Sie sich einen zufäll...
Details zur Überwachung von DOM-Elementen durch MutationObServer in JavaScript
1. Grundlegende Verwendung Es kann über den Mutat...
Implementieren der Formularübermittlung ohne Aktualisierung der Seite basierend auf HTML
Die Verwendung von Ajax zum Implementieren der For...
Ein Beispiel für die Verwendung eines Lvs+Nginx-Clusters zum Erstellen einer Architektur mit hoher Parallelität
Inhaltsverzeichnis 1. Lvs-Einführung 2. Lvs-Lasta...
jQuery implementiert Formularvalidierungsfunktion
Beispiel für die Validierung eines jQuery-Formula...
Grafisches Tutorial zur Installation und Konfiguration von MySQL 5.7.25
Es gibt zwei Arten von MySQL-Installationsdateien...
Der vollständige Code der im Uniapp-Applet enthaltenen Radardiagrammkomponente
Effektbild: Der Implementierungscode lautet wie f...
Beispielcode zur Implementierung der gleichzeitigen Anforderungssteuerung in JavaScript/TypeScript
Szenario Angenommen, es gibt 10 Anfragen, aber di...
Beispielcode zur Implementierung des Schaltflächeneffekts „Wassertropfen-Wellenanimation“ mit CSS+JS
Der Code sieht folgendermaßen aus: <!DOCTYPE h...
React realisiert sekundären Verknüpfungseffekt (Treppeneffekt)
In diesem Artikel wird der spezifische Code von R...
Verwenden Sie natives JS, um den Scroll-Effekt des Live-Bullet-Bildschirms zu simulieren
Inhaltsverzeichnis 1. Grundprinzipien 2. Spezifis...
8 Beispiele für die Verwendung des Killall-Befehls zum Beenden von Prozessen in Linux
Die Linux-Befehlszeile bietet viele Befehle zum B...
Lösung für die Eingabeaufforderung „Keine solche Datei oder kein solches Verzeichnis“ beim Ausführen ausführbarer Dateien unter Linux
Als ich kürzlich das Linux-Betriebssystem zum Aus...
W3C Tutorial (4): W3C XHTML Aktivitäten
HTML ist eine Hybridsprache, die zum Veröffentlic...
Welche Funktion ist !-- -- im HTML-Seitenstil?
Hauptsächlich für Browser mit niedriger Version &l...