В списке сообщений блога LearningjQuery.com слева есть интересная дата, например:
На картинке видно, что «2009» расположено вертикально справа. Используйте Firebug для просмотра элемента. В структуре HTML появляется текст «2009». В этой статье представлены два метода достижения этого эффекта.
1. Используйте технологию Sprite для достижения
Процесс реализации подробно описан Крисом Койером в статье « Техника отображения даты с помощью спрайтов ». Вот краткое описание процесса реализации. Очевидно, мы не хотим использовать для каждой даты отдельную картинку, поэтому объединяем ее в одну картинку и располагаем год, месяц и день в разных областях картинки, как показано на рисунке:
1. HTML
HTML-структура страницы выглядит следующим образом:
июнь
30
2009
Контейнер .postdate содержит три области, соответствующие году, месяцу и дню, что обеспечивает семантическую целостность.
В системе CMS, такой как WordPress, внутренний код выглядит следующим образом:
2. CSS
CSS — это то место, где спрайты действительно вступают в игру, используя атрибуты класса, определенные в HTML, чтобы обеспечить отображение соответствующих изображений.
Во-первых, пусть контейнер с атрибутом класса .postdate позиционируется относительно, чтобы три содержащиеся в нем области были позиционированы абсолютно и использовали одно и то же фоновое изображение. Установите соответствующую ширину и высоту и переместите текст наружу, чтобы открыть фоновое изображение.
Затем определите конкретные положения фона для каждого месяца (12), каждого дня (31) и каждого года (на основе 10 лет), чтобы отображать соответствующие изображения.
.postdate {
положение: относительное;
ширина: 50 пикселей;
высота: 50 пикселей;
плавать: влево;
}
.месяц, .день, .год {
позиция: абсолютная;
текстовый отступ: -1000em;
фоновое изображение: url(/wp-content/themes/ljq/images/dates.png);
фоновый повтор: без повтора;
}
.месяц { сверху: 2 пикселя; слева: 0; ширина: 32 пикселя; высота: 24 пикселя;}
.day { сверху: 25 пикселей; слева: 0; ширина: 32 пикселя; высота: 25 пикселей;}
.year { внизу: 0; справа: 0; ширина: 17 пикселей; высота: 48 пикселей;}
.m-01 {background-position: 0 4px;}
.m-02 {background-position: 0 -28px;}
.m-03 {background-position: 0 -57px;}
... еще что-то подобное...
.d-01 {background-position: -50px 0;}
.d-02 {background-position: -50px -31px;}
.d-03 {background-position: -50px -62px;}
... еще что-то подобное...
.y-2006 {background-position: -150px 0;}
.y-2007 {background-position: -150px -50px;}
.y-2008 {background-position: -150px -100px;}
... еще что-то подобное...