So implementieren Sie erweiterbare Etiketten mit abgerundeten Ecken

Bei der Erstellung von Webseiten ist es sehr beliebt, Tags für die Klassifizierung zu verwenden. Tags mit abgerundeten Ecken haben den Vorteil, dass sie einen schönen Stil und einen lebendigen Ausdruck haben Dies ist: Wenn sich die Anzahl der Wörter im Etikettentext ändert (wie in Abbildung 1 dargestellt), kann das feste Hintergrundbild nicht entsprechend erweitert werden. Auf diese Weise müssen wir viele Hintergrundbilder mit unterschiedlichen Breiten erstellen, was sehr unpraktisch ist. Hier sind zwei Möglichkeiten, erweiterbare Etiketten mit abgerundeten Ecken zu erstellen.

Abbildung 1

Wie in Abbildung 1 gezeigt, unterscheidet sich der Rand des abgerundeten Etiketts von der Hintergrundfarbe. Zuerst müssen wir in Photoshop ein Hintergrundbild erstellen (Abbildung 2). Die Breite des Bildes ist etwas breiter als die mögliche Textlänge Die Höhe entspricht mindestens der tatsächlichen Beschriftung, die Kante ist auf die Strichfarbe eingestellt und die Innenseite ist transparent, der Bereich außerhalb der abgerundeten Ecken kann jedoch nicht auf transparent eingestellt werden und sollte mit der Hintergrundfarbe der Seite gefüllt werden. Hier wird Weiß verwendet und wir nennen es tab_bg.gif.

Abbildung 2

Der Code lautet wie folgt:

1. Die Implementierungsidee besteht darin, den rechten Hintergrund des Etiketts für das Tag <a> und den linken Hintergrund des Etiketts für das Tag <span> festzulegen, um die Erweiterung des abgerundeten Etiketts zu realisieren.

2. Bei dieser Methode muss nur ein Hintergrundbild heruntergeladen werden, wodurch das Problem der nicht synchronisierten Hintergrundanzeige auf beiden Seiten des Etiketts gelöst wird. Wenn jedoch die Anzahl der Wörter im Etikett die Breite des Hintergrundbilds überschreitet, treten Probleme auf auftreten (wie in Abbildung 3 dargestellt), daher sollte bei der Erstellung eines Hintergrundbilds die Bildbreite so weit wie möglich die längste Zeichenbreite berücksichtigen.

Abbildung 3

 

Da im obigen Fall der Stricheffekt erzielt werden muss, kann der Text nur innerhalb der Breite des Hintergrunds erweitert werden, was bestimmte Einschränkungen mit sich bringt. Wenn es sich um ein einfarbiges Etikett mit abgerundeten Ecken handelt, kann es vollständig erweitert werden (Abbildung 4).

Abbildung 4

Schneiden Sie die linke und rechte Seite des erstmals verwendeten Hintergrundbilds in Hintergrundbilder (wie in Abbildung 5 gezeigt) und benennen Sie sie tab_left.gif und tab_right.gif.

Abbildung 5

Der Code lautet wie folgt:

Codebeschreibung:

1. Verwenden Sie unterschiedliche Hintergründe für <a> und <span> und stellen Sie die Hintergrundfarbe des Links auf die Strichfarbe ein, um einen monochromen Etiketteneffekt zu erzielen.

2. Mit dieser Methode können beliebige Erweiterungseffekte erzielt werden.