Beispielcode zur Implementierung eines einfachen ListViews-Effekts in HTML

HTML zum Erreichen eines einfachen ListViews-Effekts

Ergebnis:

Bildbeschreibung hier einfügen

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