简体中文（ZH-CN）English（EN）繁体中文（ZH-TW）日本語（JA）한국어（KO）Melayu（MS）Français（FR）Deutsch（DE）
Heim
Artikel
Fragen und Antworten
Kurs
Thema
Herunterladen
Spiel
Wörterbuch
kürzliche Updates

Heim  >  Artikel  >  Web-Frontend  >  CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)

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

易达
易达Original
2020-06-18 12:47:282503Durchsuche

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)

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="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / 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>

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

Fügen Sie also den folgenden Code zu index.css hinzu: 

.container *{
    padding:0;
    margin:0;
}

.container äußerer Container

1. Gemäß Die Anweisungen, Breite 600, Höhe 90, Füllintervalle links und rechts 100, Hintergrundfarbe erdig, mit abgerundeten Ecken, zentriert werden, es gibt mehrere Hintergrundbilder, das erste Hintergrundbild ist horizontal links, das zweite Hintergrundbild ist horizontal rechts, vertikal Sie sind alle zentriert und die Hintergrundbildgröße beträgt 50 Pixel

Fügen Sie also den folgenden Code zu index.css hinzu:

.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)),url(../images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel));
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li Column

1 . Es gibt keinen Standard-Schwarzpunkt, also list-style:none, horizontal angeordnet, also float:left, die Breite ist gleich, also width=600/6=100px, die Schriftart ist zentriert text-align: center;

Fügen Sie also den folgenden Code zu index.css hinzu: 

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}

img image

1 Gemäß den Anforderungen betragen Breite und Höhe jeweils 50 und müssen zentriert sein , sodass die Breite und Höhe des Bildes im Inneren genau der Größe des Bildcontainers entsprechen, sodass die Breite 100 % beträgt. Hoch 100 %

Fügen Sie also den folgenden Code zu index.css hinzu:

.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}

lösche die schwebende Spalte

1. Da der Zweck dieser Spalte darin besteht, die schwebende Spalte zu löschen

Fügen Sie also den folgenden Code zu index.css hinzu: 

li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}

Titel Text

1. Es gibt einen Auffüllabstand nach oben und unten, also fügen Sie den folgenden Code zu index.css hinzu: 

.title{
    padding:10px;
}

li Individuelle Einstellungen:

Der Navigationshintergrund von 1, 1, 3 und 5 sind blau und der Navigationshintergrund von 2, 4 und 6 ist gelb, was bedeutet, dass der Hintergrund der Spalten mit ungeraden Nummern blau und der Hintergrund der Spalten mit geraden Nummern gelb ist genau der richtige n-te Typ kann Ausdrücke annehmen, also fügen Sie den folgenden Code zu index.css hinzu: 

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

Bisher lautet der index.css-Code wie folgt: 

.container *{
    padding:0;
    margin:0;
}
.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)),url(../images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel));
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li{
    list-style: none;
    float: left;
    width:100px;
    text-align: center;
}
.img{
    width: 50px;
    height: 50px;
    margin:0 auto;
    
}
.img img{
    width:100%;
    height: 100%;
}
li.clear{
    width:0;
    height: 0;
    clear: both;
    float: none;
}
.title{
    padding:10px;
}

li:nth-of-type(2n){
    background-color:lightgoldenrodyellow;
    color:peru;
}
li:nth-of-type(2n+1){
    background-color:lightblue;
}

Dann führen Sie index ein .css in den Index einfügen Der endgültige Betriebseffekt von 

<!DOCTYPE html>
<html>

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

<body>
    <div class="container">
        <ul>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航一
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航二
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航三
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航四
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / alt="CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" >
                </div>
                <div class="title">
                    导航五
                </div>
            </li>
            <li>
                <div class="img">
                    <img  src="images/CSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel)" / 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>

in .html ist wie folgt:

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

Zusammenfassung:

1. Gelernt Struktureller Pseudoklassenselektor – n-te Verwendung des Typs, die Schwierigkeit liegt auch hier im Ausdruck, sodass Sie beim Schreiben von Code mehr Geduld aufwenden müssen, um die Regeln zusammenzufassen

Das obige ist der detaillierte Inhalt vonCSS-Struktur-Pseudoklassenselektor – nth-of-type implementiert benutzerdefinierte Navigationsmenü-Fallanalyse (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

架构 css html Float 选择器 伪类 ul li
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
Vorheriger Artikel：Implementieren Sie einen einfachen Skelettbildschirm mit CSSNächster Artikel：Implementieren Sie einen einfachen Skelettbildschirm mit CSS

In Verbindung stehende Artikel

Mehr sehen