get新技能是需要付出行动的,即使看得再多也还是要动手试一试。今天图老师小编跟大家分享的是CSS网页制作实例教程:非常酷的日期效果,一起来学习了解下吧!
【 tulaoshi.com - Web开发 】
LearningjQuery.com的博客日志上的日期效果非常的酷,如下图:
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)其中文字的样式和垂直的年份就会告诉你这不是用图片来完成的。而且在标记语言中日期信息是是以文字出现的,就像通常的那样。
通过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
;}
(本文来源于图老师网站,更多请访问http://www.tulaoshi.com/webkaifa/)希望你能喜欢!
原文:Date Display Technique with Sprites
来源:http://www.tulaoshi.com/n/20160220/1631857.html
看过《CSS网页制作实例教程:非常酷的日期效果》的人还看了以下文章 更多>>