Heim >Web-Frontend >CSS-Tutorial >Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

易达Original: 2020-06-10 11:08:471881Durchsuche

Ziele dieses Artikels:

1. Beherrschen Sie die Verwendung von Target, einem strukturellen Pseudoklassenselektor in CSS.

Fragen:

1 Beim Klicken auf das offizielle Konto werden 4 Untermenüs angezeigt. Wenn Sie auf das Miniprogramm klicken, müssen die zuvor angezeigten Untermenüs automatisch verkleinert werden. Sie müssen das strukturelle Pseudo-CSS verwenden. Klassenselektor – Ziel

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

Zusätzliche Hinweise:

Die Gesamtbreite beträgt 140px

2 Die Schriftart des Menüs der ersten Ebene ist 16 Pixel und wird in Fettschrift angezeigt. Wir werden feststellen, dass es sich bei den oben genannten Materialien um mehrere kleine Logobilder handelt, und wir sind bereit, sie als Hintergrundbild zu verwenden

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

2. Wie analysiert man die Architektur?

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel) Ideenanalyse:

1. Das Ziel ist in zwei Teile unterteilt. Jeder Teil verfügt über ein Menü der ersten Ebene. Wenn Sie auf das Menü klicken, muss das folgende Untermenü angezeigt werden , und hier können wir die erforderlichen Wissenspunkte verwenden: struktureller Pseudoklassenselektor – Ziel

2 Der obere und untere Teil sind ähnlich, außer dass das Hintergrundbild jedes Menüs unterschiedlich ist, also a Viele Codes im zweiten Teil können den ersten Teil wiederverwenden, aber sie benötigen separate Einstellungen, daher müssen Sie separate Klassennamen für sie festlegen Okay, folgen Sie zuerst der Analyse, schreiben Sie die Ideen auf und ignorieren Sie sie Implementierung von CSS vorerst

Der Code lautet wie folgt:

<!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. Schreibstil, einen CSS-Ordner erstellen, einen neuen index.css darin erstellen, wie man schreibt Der Stil im Inneren ist die Analyseidee

Ideenanalyse:

1. Unterelemente des Gesamtcontainers

Ideenanalyse

1. Um die gemeinsamen Stile aller Elemente im Container festzulegen, können wir diese gemeinsamen Codes in den .container *-Stil schreiben, z. B. Polsterung und Rand. Wenn sie nicht auf diese Weise festgelegt werden, wird in jedem Element ein Code festgelegt Redundanz, also beginnen Sie wie in anderen Fällen mit dem einfachsten

, also fügen Sie den folgenden Code zu index.css hinzu:

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

2. Der äußere Container selbst.container

Denken Sie an die Analyse:

1. Je nach Anforderung beträgt die Breite 140, mit einem hellgrauen Rand und einer gewissen Polsterung oben, unten, links und rechts

Fügen Sie also den folgenden Code zu index.css hinzu:

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

3. Title.title

1 Gemäß den Anforderungen beträgt die Schriftgröße 16px, die Farbe ist hellgrau, Die Schriftart ist fett und dann ist bei jedem Titel das Hintergrundbild nicht wiederholt, die horizontale Richtung ist rechts und die vertikale Richtung ist in der Mitte,

. Fügen Sie daher den folgenden Code hinzu 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;
}

Zwei Titel Separate Einstellungen

1. Der Unterschied zwischen den beiden Titeln besteht darin, dass die Hintergrundbilder unterschiedlich sind

Fügen Sie also die hinzu Folgender Code für index.css:

.title1{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.title2{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}

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/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li2{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li3{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li4{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li5{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li6{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}

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/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.title2{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.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/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li2{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li3{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li4{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li5{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
.li6{
   background-image: url(../images/Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel));
}
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>

运行效果如下：

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

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

Struktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel)

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

总结：

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

Das obige ist der detaillierte Inhalt vonStruktureller Pseudoklassenselektor – Zielimplementierung des durchsuchbaren Menüs (Codebeispiel). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

架构 css html 选择器 display margin padding 伪类 ul li

Stellungnahme：

Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn

Vorheriger Artikel：Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichenNächster Artikel：Drei Möglichkeiten, Hintergrundtransparenz in CSS zu erreichen

In Verbindung stehende Artikel

Mehr sehen