Heim >Web-Frontend >CSS-Tutorial >Tutorial zur Implementierung einer Baumstruktur mit reinem CSS

Tutorial zur Implementierung einer Baumstruktur mit reinem CSS

小云云
小云云Original
2018-01-04 17:10:433876Durchsuche

In diesem Artikel werden hauptsächlich relevante Informationen zum Beispielcode von reinem CSS zur Implementierung einer Baumstruktur vorgestellt. Mit CSS und HTML können Sie die Knoten einer mehrstufigen ungeordneten Liste in einer Baumstruktur anzeigen , und ich werde es jetzt für alle und als Referenz für alle teilen. Folgen wir dem Herausgeber und schauen wir uns das an. Ich hoffe, es kann allen helfen.

Reines CSS zur Implementierung der Attributstruktur

Die Idee von CSS zur Implementierung der Attributstruktur besteht darin, Pseudoklassen zur Implementierung von Baumstruktur-Verbindungslinien zu verwenden Sie möchten eine Klickerweiterung, -kontraktion und -auswahl implementieren. Der Rahmeneffekt muss mit js erreicht werden. Tatsächlich sind Erweiterung und Verkleinerung ein Wechsel zwischen dem Ausblenden und Anzeigen der untergeordneten Elemente eines angeklickten Elements.

Rendering

HTML-Struktur


    <ul class="domtree">
        <li>
            1级菜单
            <ul>
                <li>2级菜单</li>
                <li>
                    2级菜单
                    <ul>
                        <li>3级菜单</li>
                        <li>3级菜单</li>
                    </ul>
                </li>
            </ul>
        </li>
        <li>
            1级菜单
            <ul>
                <li>2级菜单</li>
                <li>2级菜单</li>
            </ul>
        </li>
    </ul>

CSS


        ul.domtree,
        ul.domtree ul {
            margin: 0;
            padding: 0 0 0 2em;
        }

        ul.domtree li {
            list-style: none;
            position: relative;
        }

        ul.domtree>li:first-child:before {
            border-style: none none solid none;
        }

        ul.domtree li:before {
            position: absolute;
            content: &#39;&#39;;
            top: -0.01em;
            left: -0.7em;
            width: 0.5em;
            height: 0.615em;
            border-style: none none solid solid;
            border-width: 0.05em;
            border-color: #aaa;
        }

        ul.domtree li:not(:last-child):after {
            position: absolute;
            content: &#39;&#39;;
            top: 0.7em;
            left: -0.7em;
            bottom: 0;
            border-style: none none none solid;
            border-width: 0.05em;
            border-color: #aaa;
        }

Verwandte Empfehlungen:

Beispiel ausführliche Erklärung jQuery EasyUI kombiniert mit zTree-Baumstruktur zum Erstellen einer Webseite

PHP-Baum Analyse des Entwicklungsprozesses von Beispielen für den Datenzugriff auf geformte Strukturen

Detaillierte Erläuterung des Implementierungscodes für die JQuery-Baumstruktur

Das obige ist der detaillierte Inhalt vonTutorial zur Implementierung einer Baumstruktur mit reinem CSS. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Stellungnahme:
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn