Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code)-tutoriel CSS-php.cn

Objectifs de cet article :

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

Questions :

1. effet de menu, lorsque vous cliquez dessus. Le compte officiel affiche 4 sous-menus. Lorsque vous cliquez sur le mini-programme, 2 autres sous-menus apparaissent. Les sous-menus précédemment affichés doivent être automatiquement réduits et utiliser du DIV+CSS pur. sélecteur de classe — cible

Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code)

Remarques supplémentaires :

1 La largeur totale est de 140 px

2. La police du menu de premier niveau est de 16 pixels, affichage en gras

Faisons maintenant l'opération spécifique

1 Préparer les matériaux : créez un dossier d'images dans le répertoire racine et stockez ici toutes les images de matériaux pertinentes. Nous constaterons que les matériaux ci-dessus sont plusieurs petites images de logo, et nous sommes prêts à l'utiliser comme image d'arrière-plan

Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code)

2. Créer index.html et écrire l'architecture. Comment analyser l'architecture ?

Analyse des idées :

1. La cible est divisée en 2 parties, chaque partie a un menu de premier niveau. Lorsque vous cliquez sur le menu, le sous-menu suivant doit être affiché. , et ici nous pouvons utiliser les points de connaissances requis : sélecteur de pseudo-classe structurel — cible

2 Les parties supérieure et inférieure sont similaires, sauf que l'image d'arrière-plan de chaque menu est différente, donc un. beaucoup de code dans la deuxième partie peut réutiliser la première partie, mais ils ont besoin de paramètres séparés, vous devez donc leur définir des noms de classe distincts

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

Le code est le suivant :

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>

</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

Copier après la connexion

3. Écrivez Style, créez un dossier css, créez un nouvel index.css à l'intérieur, comment écrire le style à l'intérieur, voici l'idée d'analyse

Analyse de l'idée :

1. Sous-éléments du conteneur global

Analyse de l'idée

1. Afin de définir les styles communs de tous les éléments du conteneur, nous pouvons écrire ces codes communs dans le style .container *, tels que le remplissage et la marge, s'ils ne sont pas définis comme ceci, alors dans chaque paramètre, le code sera généré à l'intérieur de chaque élément. redondance, donc comme dans les autres cas, commencez par le plus basique

, ajoutez donc le code suivant à index.css :

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

Copier après la connexion

2. Le conteneur externe lui-même.container

Pensez analyse :

1. Selon les exigences, la largeur est de 140, avec une bordure gris clair et une certaine quantité de rembourrage en haut, en bas, à gauche et à droite

Ajoutez donc le code suivant à index.css :

.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}

Copier après la connexion

3. Title.title

1 Selon les exigences, la taille de la police est de 16px, la couleur est gris clair, la police est en gras, puis chaque titre Nous avons constaté que son image d'arrière-plan n'est pas répétée, et la direction horizontale est vers la droite et la direction verticale est au centre,

Ajoutez donc le code suivant à l'index .css :

.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}

Copier après la connexion

4. Deux titres Paramètres séparés

1 La différence entre les deux titres est que les images d'arrière-plan sont différentes

Ajoutez donc ce qui suit. code vers index.css :

.title1{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.title2{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}

Copier après la connexion

5.Menu.menu

1、一级菜单下面的子菜单首先是要隐藏起来的，只是当点击标题菜单的时候就需要展开，此刻我们可以把子菜单当做是标题菜单的目标即target，而CSS中:target其实表示所有的target,在此文档中target为id=wechataccount和id=applet的2个div，但是每次只对某一个target生效，当另外一个target被触发了，其他的target的样式就会失效，恢复成默认状态，就好像此页面中默认状态是隐藏，但是当公众号点击了，它下面的target就会应用当前的:target样式，但另外一个target触发了，此刻它的样式就又恢复成display:none了

所以index.css中添加代码如下：

.menu{
   display: none;
 }
 :target{
   display:block;
 }

Copier après la connexion

6、列表公共样式 ul li

1、因为根据实现效果可以看出没有黑色圆点，然后因为每个li都有背景图片，所以一定会有间距padding,且背景图片垂直方向居中，背景图片不重复

所以index.css中添加代码如下：

ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

Copier après la connexion

7、每个li的单独样式

1、每个li的唯一不同就是背景图片不同

所以index.css中添加代码如下：

.li1{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li2{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li3{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li4{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li5{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li6{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}

Copier après la connexion

8、链接设置a

1、每个链接默认是有颜色的，一般为蓝色，但是这里的连接颜色为灰色，不带默认的下划线

所以index.css中添加代码如下：

a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

Copier après la connexion

到此为止，index.css的全部内容如下：

.container *{
   padding:0;
   margin:0;
}
.container{
   width: 140px;
    border: 1px solid lightgray;
    padding: 10px;
}
.title{
   font-size: 16px;
   color:lightgray;
   padding:10px;
   font-weight: bold;
   background-repeat: no-repeat;
   background-position-y:center;
   background-position-x:right;
}
.title1{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.title2{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.menu{
   display: none;
 }
 :target{
   display:block;
 }
ul li{
   list-style: none;
   padding:10px 10px 10px 29px!important;
   background-position-y:center;
   background-repeat: no-repeat;
}

.li1{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li2{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li3{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li4{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li5{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
.li6{
   background-image: url(../images/Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code));
}
a{
   color:rgb(5, 5, 5);
   text-decoration: none;
}

Copier après la connexion

然后将index.css引入index.html中

<!DOCTYPE html>
<html>
<head> 
<meta charset="utf-8">
<title>结构性伪类选择器—target实现可搜索菜单案例</title>
<link href="css/index.css" rel="stylesheet" type="text/css">
</head> 
<body>
    <div class="container">
        <div class="title title1"><a href="#wechataccount">公众号</a></div>
        <div class="menu" id="wechataccount">
           <ul>
               <li class="li1"><a href="">微信公众号</a></li>
               <li class="li2"><a href="">公众号应用</a></li>
               <li class="li3"><a href="">公众号模板</a></li>
               <li class="li4"><a href="">微信开放平台</a></li>
           </ul>
        </div>
        <div class="title title2"><a href="#applet">小程序</a></div>
        <div class="menu" id="applet">
           <ul>
               <li class="li5"><a href="">微信小程序</a></li>
               <li class="li6"><a href="">小程序应用</a></li>
           </ul>
        </div>
    </div>
    
</body>
</html>

Copier après la connexion

运行效果如下：

Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code)