Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)-tutoriel CSS-php.cn

Objectifs de cet article :

1. Maîtriser l'utilisation de nth-of-type, un sélecteur de pseudo-classe structurel en CSS

Questions :

1. Implémentez la personnalisation suivante Pour définir un menu de navigation et utiliser du DIV+CSS pur, vous devez utiliser le sélecteur de pseudo-classe structurelle—nth-of-type

Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)

Remarques supplémentaires :

1 , la largeur de navigation est de 800px, la hauteur est de 90px et l'affichage est centré

2 La largeur et la hauteur de l'image d'arrière-plan du flocon de neige sont de 50px et la taille de la bouteille de vin. l'image est également la même

Faisons maintenant l'opération spécifique

1 . Préparer les matériaux : En combinaison avec l'effet cible, nous pouvons créer une image d'une bouteille de vin. de cette façon, la couleur du fond change, et la partie transparente à l'intérieur peut également changer en conséquence. Il y a aussi deux flocons de neige à gauche et à droite, qui sont également requis. Matériel

Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)

2. Créer un index.html et écrire l'architecture

Analyse des idées :

1. 6 sous-éléments, nous pouvons donc utiliser le li couramment utilisé pour l'implémenter. Le li est disposé horizontalement, il doit donc absolument être flottant, afin que nous puissions effacer le flotteur du dernier li, et l'ul sera toujours atteint. Il peut effectivement envelopper tous les li flottants à l'intérieur

2, 1, 3, 5 l'arrière-plan de navigation est bleu, 2, 4, 6 l'arrière-plan de navigation est jaune, donc les couleurs de li sont des changements réguliers, donc à ce stade. fois, nous pouvons utiliser le nième de type

3. Chaque navigation comporte deux parties, la partie supérieure est une image et la partie inférieure est du texte

D'accord, suivez d'abord l'analyse et écrivez. les idées et ignorez l'implémentation du CSS pour le moment

<!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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </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="Sélecteur de pseudo-classe structurel CSS : le nth-of-type implémente une analyse de cas de menu de navigation personnalisée (exemple de code)" >
                </div>
                <div class="title">
                    导航六
                </div>
            </li>
            <li class="clear"> </li>
        </ul>
    </div>
</body>

</html>

Copier après la connexion

3. Écrivez des styles, créez un dossier CSS, créez un nouvel index.css dedans, comment écrire les styles à l'intérieur, ce qui suit est l'idée d'analyse

Analyse de l'idée :

.container * Style public

1 Après avoir écrit autant de cas, cette étape est fondamentalement essentielle et doit également être réduite. propriété de redondance du code, nous pouvons donc définir ici le style public