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
Lösung für Nginx-Installationsfehler
1. Entpacken Sie nginx-1.8.1.tar.gz 2. Entpacken ...
JS implementiert das Auf- und Abgleiten auf dem mobilen Endgerät, jeweils einen Bildschirm nach dem anderen
In diesem Artikel erfahren Sie den spezifischen J...
Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt
Inhaltsverzeichnis Vorwort Installieren Einführun...
Eine kurze Diskussion über den Spaß von :focus-within in CSS
Ich glaube, einige Leute haben dieses Bild gesehe...
Grafisches Tutorial zur Installation und Konfiguration von CentOS 7
In diesem Artikel wird das ausführliche Installat...
Der Prozess der schnellen Konvertierung eines MySQL-Left-Joins in einen Inner-Join
Während des täglichen Optimierungsprozesses stell...
503 Dienst nicht verfügbar Fehlerlösungserklärung
1. Beim Öffnen der Webseite wird die Meldung „503...
Die gleichzeitige Ausführung unter Linux ist einfach. Gehen Sie dazu einfach wie folgt vor
Parallelitätsfunktionen Zeit für i in `grep serve...
Einführung in die grundlegenden Konzepte und Technologien der Webentwicklung
Heute stellt dieser Artikel Anfängern einige grun...
Beispiel für die Implementierung eines globalen Wasserzeichens in Vue
Inhaltsverzeichnis 1. Erstellen Sie eine Wasserze...
CSS Sticky Footer-Implementierungscode
Dieser Artikel stellt den Implementierungscode fü...
Was tun, wenn der von Docker Run gestartete Container hängt und Daten verliert?
Szenariobeschreibung In einem bestimmten System w...
HTML CSS3 streckt den Bildanzeigeeffekt nicht
1. Verwenden Sie das Transform-Attribut, um das B...
Detaillierte Erklärung des MySQL-Triggerbeispiels
Inhaltsverzeichnis Was ist ein Auslöser Erstellen...
CentOS 7 kann nach dem Ändern der Netzwerkkarte nicht auf das Internet zugreifen
Ping www.baidu.com unbekannter Domänenname Ändern...