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)
1. Maîtriser l'utilisation de nth-of-type, un sélecteur de pseudo-classe structurel en CSS
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
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
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
<!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
.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 50pxAjoutez 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 Column1 . 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 :
Résumé :
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!