get新技能是需要付出行动的，即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS网页制作实例教程:非常酷的日期效果，一起来学习了解下吧！
【 tulaoshi.com - Web开发 】
LearningjQuery.com的博客日志上的日期效果非常的酷，如下图：
其中文字的样式和垂直的年份就会告诉你这不是用图片来完成的。而且在标记语言中日期信息是是以文字出现的，就像通常的那样。
通过Firebug查看，代码非常简洁漂亮！
很明显每一个日期并没有各自的图片。它们都出自同一张图片（css sprites!），图片的不同地方被放置上了不同的内容：天、月和年。也许你会记得这和一年前Joost de Valk posted about 上的技术是一样的。
来看一下这张漂亮的图片：
HTML代码：
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
在一个CMS（内容管理系统），例如wordpress中，背后的代码应该是这样：
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 CSS代码
CSS才是精灵发挥作用的地方。利用我们已经在HTML代码中设置的特殊的类名称，我们可以设置使用图片的哪一部分。
首先，我们给父元素应用相对位置定位。然后我们给其中的三个部分应用绝对定位。我们让这三部分使用相同的图片（我们的精灵），设置它们各自的高度和宽度，再将文字移除出页面。
然后，我们设置每一月（12种可能），每一天（31种可能）和每一年（设置了10年）使用背景图片的不同位置。
.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;} .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;} 
希望你能喜欢！
原文：Date Display Technique with Sprites
来源:https://www.tulaoshi.com/n/20160220/1631857.html
看过《CSS网页制作实例教程:非常酷的日期效果》的人还看了以下文章 更多>>
