La lista de publicaciones del blog LearningjQuery.com tiene una fecha interesante a la izquierda, como esta:
Podemos ver en la imagen que "2009" está dispuesto verticalmente en el lado derecho. Utilice Firebug para ver el elemento. El texto "2009" aparece en la estructura html. Este artículo presenta dos métodos para lograr este efecto.
1. Utilice la tecnología Sprite para lograr
Chris Coyier presentó en detalle el proceso de implementación en el artículo " Técnica de visualización de fecha con Sprites ". Aquí hay una breve descripción del proceso de implementación. Obviamente, no queremos usar una imagen separada para cada fecha, por lo que la integramos en una imagen y organizamos el año, mes y día en diferentes áreas de la imagen, como se muestra en la figura:
1.html
La estructura HTML de la página es la siguiente:
<div class="fecha posterior">
<div class="mes m-06">junio</div>
<div class="día d-30">30</div>
<div class="año y-2009">2009</div>
</div>
El contenedor .postdate contiene tres áreas, correspondientes al año, mes y día, lo que garantiza la integridad semántica.
En un sistema CMS como WordPress, el código de fondo es así:
<div class="fecha posterior">
<div class="mes m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="día d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="año y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
2. CSS
CSS es donde realmente entran en juego los sprites, utilizando los atributos de clase definidos en HTML para permitir que se muestren las imágenes correspondientes.
Primero, deje que el contenedor con el atributo de clase .postdate se posicione relativamente, de modo que las tres áreas contenidas en él se posicionen de forma absoluta y utilicen la misma imagen de fondo. Establezca su ancho y alto respectivos y mueva el texto afuera para revelar la imagen de fondo.
Luego, defina posiciones de fondo específicas para cada mes (12), cada día (31) y cada año (basado en 10 años) para mostrar las imágenes correspondientes.
.postfecha {
posición: relativa;
ancho: 50px;
altura: 50 píxeles;
flotador: izquierda;
}
.mes, .día, .año {
posición: absoluta;
sangría de texto: -1000em;
imagen de fondo: url(/wp-content/themes/ljq/images/dates.png);
repetición de fondo: no repetición;
}
.mes {arriba: 2px; izquierda: 0; ancho: 32px alto: 24px;}
.día {arriba: 25px; izquierda: 0; ancho: 32px alto: 25px;}
.año {abajo: 0; derecha: 0; ancho: 17px; alto: 48px;}
.m-01 {posición-fondo: 0 4px;}
.m-02 {posición-fondo: 0 -28px;}
.m-03 {posición-fondo: 0 -57px;}
... más como esto ...
.d-01 {posición-fondo: -50px 0;}
.d-02 {posición-fondo: -50px -31px;}
.d-03 {posición-fondo: -50px -62px;}
... más como esto ...
.y-2006 {posición-fondo: -150px 0;}
.y-2007 {posición-fondo: -150px -50px;}
.y-2008 {posición-fondo: -150px -100px;}
... más como esto ...