The LearningjQuery.com blog post list has a cool date on the left, like this:
We can see from the picture that "2009" is arranged vertically on the right side. Use Firebug to view the element. The text "2009" appears in the html structure. This article introduces two methods to achieve this effect.
1. Use Sprite technology to achieve
The implementation process has been introduced in detail by Chris Coyier in the article " Date Display Technique with Sprites ". Here is a brief description of the implementation process. Obviously, we don't want to use a separate picture for each date, so we integrate it into one picture and arrange the year, month, and day in different areas of the picture, as shown in the figure:
1.Html
The html structure in the page is as follows:
<div class="postdate">
<div class="month m-06">Jun</div>
<div class="day d-30">30</div>
<div class="year y-2009">2009</div>
</div>
The .postdate container contains three areas, corresponding to the year, month and day, which ensures semantic integrity.
In a CMS system like wordpress, the backend code is like this:
<div class="postdate">
<div class="month m-<?php the_time('m') ?>"><?php the_time('M') ?></div>
<div class="day d-<?php the_time('d') ?>"><?php the_time('d') ?></div>
<div class="year y-<?php the_time('Y') ?>"><?php the_time('Y') ?></div>
</div>
2. CSS
CSS is where sprites really come into play, using the class attributes defined in HTML to allow the corresponding images to be displayed.
First, let the container with the class attribute .postdate be positioned relatively, so that the three areas contained in it will be positioned absolutely and use the same background image. Set their respective width and height, and move the text outside to reveal the background image.
Then, define specific background positions for each month (12), every day (31), and every year (based on 10 years) to display the corresponding pictures.
.postdate {
position: relative;
width: 50px;
height: 50px;
float: left;
}
.month, .day, .year {
position: absolute;
text-indent: -1000em;
background-image: url(/wp-content/themes/ljq/images/dates.png);
background-repeat: no-repeat;
}
.month { top: 2px; left: 0; width: 32px; height: 24px;}
.day { top: 25px; left: 0; width: 32px; height: 25px;}
.year { bottom: 0; right: 0; width: 17px; height: 48px;}
.m-01 { background-position: 0 4px;}
.m-02 { background-position: 0 -28px;}
.m-03 { background-position: 0 -57px;}
... more like this ...
.d-01 { background-position: -50px 0;}
.d-02 { background-position: -50px -31px;}
.d-03 { background-position: -50px -62px;}
... more like this ...
.y-2006 { background-position: -150px 0;}
.y-2007 { background-position: -150px -50px;}
.y-2008 { background-position: -150px -100px;}
... more like this ...