CSS-Beispielcode zur Implementierung von Schiebetüren

Durch die sogenannte Sliding Door-Technologie lässt sich der Box-Hintergrund automatisch ausdehnen, um unterschiedlich langen Texten Platz zu bieten. Das heißt, wenn der Text größer wird, erscheint auch der Hintergrund länger.

Die meisten davon werden in Navigationsleisten verwendet, beispielsweise in der WeChat-Navigationsleiste:

Die spezifische Implementierungsmethode ist wie folgt:

1. Zunächst besteht jeder Textinhalt aus einem Tag und einem Span-Tag

<a href="#">
        <span></span>
    </a>

2. Das „a“-Tag gibt nur die Höhe an, nicht aber die Breite.

3. Nachdem Sie das Hintergrundbild im a-Tag festgelegt haben, geben Sie einen padding-left-Wert an, der dieselbe Größe wie der linke Halbkreis hat (so wird sichergestellt, dass der linke Hintergrund unverändert bleibt und der mittlere Hintergrund gestreckt werden kann).

4. Das Span-Tag gibt auch das Hintergrundbild an, ohne die Breite anzugeben, und gibt den Padding-Right-Wert an, um die rechte Hälfte des Bildes anzuzeigen (dies ist der Fall, wenn die Bildposition nach rechts eingestellt ist).

Der spezifische Code lautet wie folgt:

A {
            Farbe: weiß;
            Zeilenhöhe: 33px;
            Rand: 100px;
            Anzeige: Inline-Block;
            Textdekoration: keine;
            /* a kann keine Breite angeben*/
            /* */
            Höhe: 33px;
            Hintergrund: URL (Bilder/vx.png) keine Wiederholung;
            Polsterung links: 15px;
        }
        
        eine Spanne {
            Anzeige: Inline-Block;
            Höhe: 33px;
            Hintergrund: URL (Bilder/vx.png) keine Wiederholung rechts;
            Polsterung rechts: 15px;
        }

Der Hintergrund von span sollte als rechts angegeben werden

 <a href="#">
        <span>Groß</span>
    </a>
    <a href="#">
        <span>Ein Satz</span>
    </a>
    <a href="#">
        <span>Ein Satz</span>
    </a>
    <a href="#">
        <span>Ein langer Satz</span>
    </a>
    <a href="#">
        <span>Ein super super super super super langer Satz</span>
    </a>

Die Ergebnisse werden wie folgt angezeigt:

Es lässt sich feststellen, dass sich das Hintergrundbild dehnt, wenn sich die Länge des Textes im Span-Tag ändert.

Zusammenfassen

Oben ist der Beispielcode, den ich Ihnen vorgestellt habe, wie man Schiebetüren mit CSS implementiert. Ich hoffe, er wird Ihnen hilfreich sein. Wenn Sie Fragen haben, hinterlassen Sie mir bitte eine Nachricht und ich werde Ihnen rechtzeitig antworten. Ich möchte auch allen für ihre Unterstützung der Website 123WORDPRESS.COM danken!