CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)-CSS-Tutorial-php.cn

Inhaltsverzeichnis

Ziele dieses Artikels:

Fragen:

Jetzt führen wir die spezifische Operation aus.

Zusammenfassung:

Heim

Web-Frontend

CSS-Tutorial

CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)

易达

Jun 18, 2020 pm 12:47 PM

css

Ziele dieses Artikels:

1. Beherrschen Sie die Verwendung von nth-of-type, einem strukturellen Pseudoklassenselektor in CSS

Fragen:

1. Implementieren Sie die folgende Anpassung. Um ein Navigationsmenü zu definieren und reines DIV+CSS zu verwenden, müssen Sie den strukturellen Pseudoklassenselektor verwenden – nth-of-type

CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)

Zusätzliche Hinweise:

1, die Navigationsbreite beträgt 800 Pixel, die Höhe beträgt 90 Pixel und die Anzeige ist zentriert

2 Die Breite und Höhe des Schneeflocken-Hintergrundbilds betragen 50 Pixel und die Größe der Weinflasche Das Bild ist auch dasselbe.

Jetzt führen wir die spezifische Operation aus.

1 . Bereiten Sie die Materialien vor: In Kombination mit dem Zieleffekt können wir ein Bild einer Weinflasche erstellen Dadurch ändert sich die Hintergrundfarbe und auch der transparente Teil im Inneren kann sich entsprechend ändern. Außerdem sind links und rechts zwei Schneeflocken vorhanden

CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)

2. Erstellen Sie index.html und schreiben Sie die Architektur

Ideenanalyse:

1 6 Unterelemente, damit wir das häufig verwendete Li zur Implementierung verwenden können. Das Li ist horizontal angeordnet, sodass es unbedingt schweben muss, damit wir das letzte Li aus dem Float entfernen können und das UL trotzdem erreicht wird. Es kann effektiv alle schwebenden li darin einschließen

2, 1, 3, 5 Navigationshintergrund ist blau, 2, 4, 6 Navigationshintergrund ist gelb, daher ändern sich die Farben von li regelmäßig Mal können wir nth-of-type verwenden

3 Jede Navigation besteht aus zwei Teilen, der obere Teil ist ein Bild und der untere Teil ist Text

Okay, folgen Sie zuerst der Analyse und schreiben Sie Schreiben Sie die Ideen auf und ignorieren Sie vorerst die Implementierung von CSS

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>CSS结构性伪类选择器—nth-of-type实现自定义导航菜单案例解析</title>
</head>

<body>
    <div class="container">
        <ul>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="/static/imghw/default1.png"  data-src="https://img.php.cn/upload/image/535/279/708/1592455276504427.png"  class="lazy"   / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航六
                </div>
            </li>
            <li class="clear"> </li>
        </ul>
    </div>
</body>

</html>

Nach dem Login kopieren

3. Schreiben Sie Stile, erstellen Sie einen CSS-Ordner, erstellen Sie darin eine neue index.css, wie Sie die Stile darin schreiben, das Folgende ist die Analyseidee

Ideenanalyse:

.container * Öffentlicher Stil

1 Nach dem Schreiben so vieler Fälle ist dieser Schritt grundsätzlich unerlässlich und soll auch reduziert werden Code-Redundanz. Eigenschaft, also können wir hier den öffentlichen Stil definieren