Heim > Web-Frontend > CSS-Tutorial > Hauptteil

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

易达
Freigeben: 2020-06-18 16:02:53
Original
2530 Leute haben es durchsucht

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>
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

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

.container *{
    padding:0;
    margin:0;
}
Nach dem Login kopieren

.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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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%;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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;
}
Nach dem Login kopieren

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>
Nach dem Login kopieren

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!

Verwandte Etiketten:
css
Quelle:php.cn
Erklärung dieser Website
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
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage