Maison >interface Web >tutoriel CSS >Sélecteur de pseudo-classe structurelle : implémentation cible du cas de menu consultable (exemple de code)

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

易达original: 2020-06-10 11:08:471879parcourir

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>

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;
}

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;
}

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;
}

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));
}

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;
 }

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;
}

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));
}

8、链接设置a

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

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

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

到此为止，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;
}

然后将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>

运行效果如下：

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

点击小程序的时候运行效果如下：

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

到此为止，我们就实现了全部的需求

总结：

1、学习了CSS中结构性伪类选择器—target的用法

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 选择器 display margin padding 伪类 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：Trois façons d'obtenir la transparence de l'arrière-plan en CSSArticle suivant：Trois façons d'obtenir la transparence de l'arrière-plan en CSS

Articles Liés

Voir plus