recherche

Maison  >  Article  >  interface Web  >  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)

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)

易达
易达original
2020-06-18 12:47:282533parcourir

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)

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="images/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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>

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

Ajoutez donc le code suivant à index.css : 

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

.container conteneur externe

1. Selon les instructions, largeur 600, hauteur 90, intervalles de remplissage gauche et droit de 100, couleur de fond terreux, avec coins arrondis, à centrer, il y a plusieurs images de fond, la première image de fond est horizontalement à gauche, la deuxième image de fond est horizontalement à droite, verticalement Ils sont tous centrés et la taille de l'image d'arrière-plan est de 50px

Ajoutez donc le code suivant à index.css :

.container{
    width: 600px;
    height: 90px;
    background-color: burlywood;
    color: white;
    margin: 0 auto;
    border-radius: 15px;
    padding:0 100px;
    background-image: url(../images/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)),url(../images/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));
    background-size: 50px 50px;
    background-position-x: left,right;
    background-repeat: no-repeat;
    background-position-y: center;
}

li Column

1 . Il n'y a pas de point noir par défaut, donc list- style:none, disposé horizontalement, donc float:left, la largeur est la même, donc width=600/6=100px, la police est centrée text-align: center;


Ajoutez donc le code suivant à index.css : 

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

img image

1 Selon les exigences, la largeur et la hauteur sont toutes deux de 50 et doivent être centrées. , donc la largeur et la hauteur de l'image à l'intérieur sont exactement égales à la taille du conteneur d'image, donc la largeur est de 100 %. High 100%

Ajoutez donc le code suivant à index.css :

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

effacer la colonne flottante

1 Parce que le but de cette colonne est d'effacer le flottant

Ajoutez donc le code suivant à index.css : 

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

title. text

1. Il y a une distance de remplissage de haut en bas, alors ajoutez le code suivant à index.css : 

.title{
    padding:10px;
}

li Paramètres individuels :

L'arrière-plan de navigation de 1, 1, 3 et 5 sont bleus et l'arrière-plan de navigation de 2, 4 et 6 est jaune, cela signifie donc que l'arrière-plan des colonnes impaires est bleu et que l'arrière-plan des colonnes paires est jaune, ce qui est juste un nième de type peut prendre des expressions, alors ajoutez le code suivant à index.css : 

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

Jusqu'à présent, le code index.css est le suivant : 

.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/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)),url(../images/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));
    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;
}

Ensuite, introduisez index .css dans index L'effet opérationnel final de 

<!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/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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="images/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)" / 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>

en .html est le suivant :

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) Résumé :

1. J'ai appris le sélecteur de pseudo-classe structurel—nième utilisation de type, la difficulté ici réside également dans l'expression, vous devez donc faire preuve de plus de patience pour résumer les règles lors de l'écriture du code

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

架构 css html Float 选择器 伪类 ul li
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Implémenter un écran squelette simple en utilisant CSSArticle suivant：Implémenter un écran squelette simple en utilisant CSS

Articles Liés

Voir plus