几年前我们做一个日历图标必须要用GIF或PNG图片，但是用这种方法修改起来比较麻烦，而且不容易被搜索引擎检索到。当然，我们也可以用SVG来实现这个功能。不过使用HTML5+CSS3的方式能够更简单的实现这个图标。
我们使用比较不常用的标签<time>。它的唯一功能就是标记一个日期或时间。这个标签可以用如下的方式来表示2014年9月20日晚上9点01分：
<time>2014-09-20T21:01:00Z</time>
上面的格式是国际标准时间的格式，便于机器识别。但看上去总是怪怪的。所以可以把国际标准时间的格式方到 “datetime”属性中去。标签的内容中放置容易阅读的本地时间格式：
<time datetime="2014-09-20T21:01:00+08:00">2014年9月12日 下午 9点01分</time>
<time>标签就介绍到这里，下面来看看如何用它做日历图标。
日历图标的HTML代码
代码如下：
<time datetime="2014-09-20" class="icon"> <em>星期六</em> <strong>九月</strong> <span>20</span> </time>
我们给time标签加上了名为icon的样式。在time标签中我们分别用em表示星期，strong表示月份，span表示日期。这些都是没有严格语义的内联元素。即使在没有加载样式的情况下，我们也能识别日期。当然，我们也可以使用其他标签。
日历图标的CSS
首先，我们先定义icon的css:
time.icon
{
font-size: 1em; /* 改变字体的大小，图标的大小会跟着改变 */
display: block;
position: relative;
width: 7em;
height: 7em;
background-color: #fff;
border-radius: 0.6em;
box-shadow: 0 1px 0 #bdbdbd, 0 2px 0 #fff, 0 3px 0 #bdbdbd, 0 4px 0 #fff, 0 5px 0 #bdbdbd, 0 0 0 1px #bdbdbd;
overflow: hidden;
}这个图标的长和高我们都定义为7em。因此我们可以随意改变字体的大小，而这个图标的大小也会跟随字体的大小而改变。
我们定义了多个 box-shadow 来产生多重阴影效果，border-radius 用来产生圆角效果。为了防止内容超出圆边。定义了overflow: hidden。并且，我们用了position:relative做了相对定位，这样内部的元素就可以用绝对定位控制无素的位置了。我们接下来设置子元素的基本样式：
time.icon *
{
display: block;
width: 100%;
font-size: 1em;
font-weight: bold;
font-style: normal;
text-align: center;
}通用选择器(*)给所有的子元素定义了统一的样式，这样可以简化很多重复的代码，然后我们分别给月，星期，日定义不同的样式。
月份区域的样式如下：
time.icon strong
{
position: absolute;
top: 0;
padding: 0.4em 0;
color: #fff;
background-color: #fd9f1b;
border-bottom: 1px dashed #f37302;
box-shadow: 0 2px 0 #fd9f1b;
}我们使用绝对定位把月份区域定位到图标的顶部。再用虚线下边框表示钍线缝制效果。但月份区域的黄色背景是要超过下边框的，所以再用box-shadow定义一个黄色的下阴影。
星期区域在图标的最下方，样式定义如下：
time.icon em
{
position: absolute;
bottom: 0.3em;
color: #fd9f1b;
}最大的日期显示在最中间，样式定义如下：
time.icon span
{
font-size: 2.8em;
letter-spacing: -0.05em;
padding-top: 0.8em;
color: #2f2f2f;
}最后，我们再定交一个动画效果吧：当鼠标移上图标时，图标生左右晃动几下。具体的代码看一下的示例吧：
这个图标可以运行在IE9及更高的版本，以其他最新的浏览器上。该图标也有不错的兼容性，在IE9上不能展示动画效果，其他一切正常。在IE8及更低的版本上虽然效果差一些，但也有一个合理的展示。
