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