日期布局

最新推荐文章于 2024-06-29 22:58:59 发布

原创最新推荐文章于 2024-06-29 22:58:59 发布 · 616 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#class #div #float #url

css 专栏收录该内容

0 篇文章

订阅专栏

<html>
<head>
  <style type="text/css">
    .postdate {
      position: relative;
      width: 50px;
      height: 50px;
      float: left;
    }
    .month, .day, .year {
      position: absolute;
      text-indent: -1000em;
      background-image: url(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;}
    .m-04 { background-position: 0 -90px;}

    .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;}
    .y-2009 { background-position: -150px -150px;}
</style>
</head>
<div class="postdate">
        <div class="month m-04"></div>
        <div class="day d-03"></div>
        <div class="year y-2009"></div>
</div>
</html>