Die Liste der Blogbeiträge von LearningjQuery.com hat auf der linken Seite ein cooles Datum, etwa dieses:
Auf dem Bild können wir erkennen, dass „2009“ auf der rechten Seite vertikal angeordnet ist. Verwenden Sie Firebug, um den Text „2009“ in der HTML-Struktur anzuzeigen. In diesem Artikel werden zwei Methoden vorgestellt, um diesen Effekt zu erzielen.
1. Verwenden Sie die Sprite-Technologie, um dies zu erreichen
Der Implementierungsprozess wurde von Chris Coyier im Artikel „ Datumsanzeigetechnik mit Sprites “ ausführlich vorgestellt. Hier finden Sie eine kurze Beschreibung des Implementierungsprozesses. Natürlich möchten wir nicht für jedes Datum ein eigenes Bild verwenden, also integrieren wir es in ein Bild und ordnen Jahr, Monat und Tag in verschiedenen Bereichen des Bildes an, wie in der Abbildung gezeigt:
1.HTML
Die HTML-Struktur auf der Seite ist wie folgt:
Jun
30
2009
Der .postdate-Container enthält drei Bereiche, die dem Jahr, dem Monat und dem Tag entsprechen, was die semantische Integrität gewährleistet.
In einem CMS-System wie WordPress sieht der Backend-Code so aus:
2. CSS
Bei CSS kommen Sprites wirklich ins Spiel, indem sie die in HTML definierten Klassenattribute verwenden, um die Anzeige der entsprechenden Bilder zu ermöglichen.
Lassen Sie zunächst den Container mit dem Klassenattribut .postdate relativ positionieren, sodass die drei darin enthaltenen Bereiche absolut positioniert sind und dasselbe Hintergrundbild verwenden. Legen Sie die entsprechende Breite und Höhe fest und verschieben Sie den Text nach außen, um das Hintergrundbild anzuzeigen.
Definieren Sie dann bestimmte Hintergrundpositionen für jeden Monat (12), jeden Tag (31) und jedes Jahr (basierend auf 10 Jahren), um die entsprechenden Bilder anzuzeigen.
.postdate {
Position: relativ;
Breite: 50px;
Höhe: 50px;
schweben: links;
}
.Monat, .Tag, .Jahr {
Position: absolut;
Texteinzug: -1000em;
Hintergrundbild: url(/wp-content/themes/ljq/images/dates.png);
Hintergrundwiederholung: keine Wiederholung;
}
.month {oben: 2px; links: 0; Breite: 32px;}
.day {oben: 25px; links: 0; Breite: 32px;}
.Jahr {unten: 0; rechts: 0; Breite: 17px;}
.m-01 {Hintergrundposition: 0 4px;}
.m-02 {Hintergrundposition: 0 -28px;}
.m-03 {Hintergrundposition: 0 -57px;}
... eher so ...
.d-01 {Hintergrundposition: -50px 0;}
.d-02 {Hintergrundposition: -50px -31px;}
.d-03 {Hintergrundposition: -50px -62px;}
... eher so ...
.y-2006 {Hintergrundposition: -150px 0;}
.y-2007 {Hintergrundposition: -150px -50px;}
.y-2008 {Hintergrundposition: -150px -100px;}
... eher so ...