Mehrere Implementierungsmethoden der Tab-Leiste (empfohlen)

Registerkarten: Kategorie + Beschreibung

Tag-Leiste: Kategorie => Lassen Sie die Benutzer wissen, wo sie sind und wohin sie gehen

1. CSS-Benennungsmethode:

XML/HTML-CodeInhalt in die Zwischenablage kopieren

< div Klasse = "Service-Tabs Service-Tabs1" >
　　< ul Klasse = "service-tabs-inner" >
　　　　< Klasse = "ein" > < ein href = " #nogo " > Folgen </a> </li>
　　　　< li > < ein href = "#nogo" > Empfehlung </ a > </ li >
　　　　< li > < ein href = "#nogo" > Navigation </ a > </ li >
　　　　< li > < ein href = "#nogo" > Einkaufen </ a > </ li >
　　</ ul >
</div>

Tab: Registerkarte

Vorteile: 1. Leicht zu finden 2. Erfüllt SEO-Standards

2. Layout:

1.<ul><li> </div>
1) Float: Float-Überlauf löschen: versteckt; /Pseudoklasse: nach/
2) display:inline-block IE7 ist nicht kompatibel: *display:inline;*zoom:1; Leerzeichen: font-size:0;/gleiche Zeile/negativer Rand/Buchstabenabstand

2.<Tabelle>

3. Vorlagencode:

1. Bewegen Sie den Mauszeiger und fügen Sie eine Hintergrundfarbe hinzu

CSS- CodeInhalt in die Zwischenablage kopieren

.service-tabs li a { Breite : 160px ; Höhe : 80px ; Anzeige : Block ; Farbe : #666 ; Schriftgröße : 32px ;}
.service-tabs1 li a:hover{ Farbe : #2CC185 ;}
.service-tabs1 li.on a{ background-color : #2CC185 ; color : #fff ;} /*Hintergrundfarbe*/

2. Kleines Dreieck, offensichtlich

CSS- CodeInhalt in die Zwischenablage kopieren

.service-tabs4 li{ position : relative ;}
.service-tabs4 li a:hover{ Farbe : #2CC185 ;}
.service-tabs4 li.on a{ Hintergrundfarbe : #2CC185 ; Farbe : #fff ;}
.service-tabs4 li i{ Breite : 11px ; Höhe : 7px ; Position : absolut ; unten : - 6px ; links : 76px ; Hintergrund : URL (Bilder/Pfeil.png); Anzeige : keine ;}
.service-tabs4 li.on i{ Anzeige : Block ;}

3. Unterstreichungsmarkierung

CSS- CodeInhalt in die Zwischenablage kopieren

.service-tabs2 li a:hover{ Farbe : #2CC185 ;}
.service-tabs2 li.on a{ Höhe : 78px ; Rahmen unten : 2px solide #2CC185 ; Farbe : #2CC185 ;}

4. Skriptimplementierung

JavaScript CodeInhalt in die Zwischenablage kopieren

$( Funktion () { $( ".service-tabs ul li" ).click( Funktion () { $( diese ).addClass( "auf" ).siblings().removeClass( "auf" ); }); })

Einfach + Praktisch

Die oben aufgeführten Implementierungsmethoden der Registerkartenleiste (empfohlen) sind alle Inhalte, die der Editor mit Ihnen teilt. Ich hoffe, sie können Ihnen als Referenz dienen. Ich hoffe auch, dass Sie 123WORDPRESS.COM unterstützen.

<<: Slot-Anordnung und Nutzungsanalyse in Vue

>>: So versuchen Sie, Ihrem CSS einen Sticky-Effekt hinzuzufügen