Share
Was Sie erstellen werdenWenn Sie meinem vorherigen Lernprogramm gefolgt sind, haben Sie jetzt ein Thema auf Ihrer Website (oder ein untergeordnetes Thema), das Links zu den übergeordneten Seiten im Kopfbereich der Website enthält.
Ich habe ein Kinderthema aus 26 erstellt, und so sehen meine Links jetzt aus:
In diesem Tutorial zeige ich Ihnen, wie Sie Ihrem Design CSS hinzufügen können, um diese Links ein wenig schöner zu gestalten. Beginnen wir damit, die Kugeln loszuwerden und Schwimmer hinzuzufügen.
Öffnen Sie das Stylesheet Ihres Themes. Wenn Sie ein untergeordnetes Thema erstellt haben, ist es leer. Wenn Sie jedoch mit Ihrem eigenen Thema arbeiten, sollten Sie dieses Styling in den Teil des Stylesheets einfügen, an dem Sie die Kopfzeile verwenden.
Eine Zusammenfassung des Codes, der die Seitenverknüpfungen ausgibt (wenn Seiten vorhanden sind, auf die verlinkt werden kann):
Das heißt, wir zielen auf eine ul Element mit der Top-Level-Seiten-Links Klasse und darin, li Elemente mit der Seiten-Link Klasse gefolgt von ein Elemente (d. h. Links).
Zuerst entfernen wir die Kugeln. Füge das hinzu:
ul.top-level-page-links list-style: none;
Lassen Sie uns nun die Auffüllung jedes Listenelements los und fügen Sie ein Rand links Erklärung:
ul.top-level-page-links list-style-type: none; Rand links: 0;
Aktualisieren Sie jetzt Ihren Bildschirm und Sie sehen, dass das Listen-Styling weg ist:
Als nächstes wollen wir diese Links nebeneinander schweben lassen. Fügen Sie dies Ihrem Stylesheet hinzu:
.page-link float: left;
Nun sind Ihre Links alle nebeneinander:
Als Nächstes wollen wir die Links ein bisschen wie Buttons aussehen lassen.
Damit unsere Links wie Buttons aussehen, fügen wir den Links einen Rand, eine Auffüllung und einen Hintergrund hinzu.
Fügen Sie dies Ihrem Stylesheet hinzu:
.Seitenlink a Margin-Right: 10px; Polsterung: 0.5em 10px; Hintergrundfarbe: # 454545;
Beachten Sie, dass ich nur einen rechten Rand verwendet habe, da die linke Schaltfläche links neben der Seite ausgerichtet werden soll.
Wenn Sie Ihren Bildschirm aktualisieren, sehen Ihre Schaltflächen schaltflächenartiger aus:
Sie sehen viel besser aus, brauchen aber ein bisschen Finesse. Bearbeiten Sie die Farbe des Textes und des Hintergrunds so, dass sich die Farbe ändert, wenn sich jemand über der Schaltfläche befindet.
Jetzt lassen Sie uns diese Knöpfe etwas attraktiver machen.
Fügen Sie Ihrem Stylesheet zwei weitere Deklarationsblöcke hinzu. Stellen Sie sicher, dass Sie diese nach dem Deklarationsblock für soeben hinzugefügte Links hinzufügen:
.Seiten-Link a: Link, .Seite-Link a: besuchte color: #fff; Textdekoration: keine; .page-link a: hover, .page-link a: active Hintergrundfarbe: #dddddd; Farbe: # 454545; Textdekoration: keine;
Dadurch wird die Farbe der Links geändert, die Unterstreichung entfernt und die Farbe geändert, wenn jemand über einen Link zeigt oder aktiv ist.
Mal sehen, wie das auf der Seite aussieht:
Und wenn ich über einem Link schwebe:
Viel besser!
In diesem zweiteiligen Lernprogramm haben Sie gelernt, wie Sie Links zu den Top-Level-Seiten Ihrer Site erstellen, die automatisch generiert werden, und dann diese Links mit CSS so gestalten, dass sie wie Schaltflächen aussehen.
Auf diese Weise können Sie Ihre Besucher direkt auf diese Seiten bringen. Dies ist hilfreich, wenn Sie über Top-Level-Seiten verfügen, auf die Sie zugreifen möchten.
Accentsconagua