如何通过 HTML5 和 CSS3 来实现日历图标样式
可选方案
几年前我们可能需要使用PNG或者FIG图片来实现。你现在也可以继续使用这种方案，不过这种方案缺点很多，不方便修改，没法被搜索收录，并且无法缩放。一种更好的方案就是使用SVG。使用SVG的方案会非常灵活，但是我们没必要使用SVG。
因此，我将使用没太多人知道的HTML5元素time来实现。它是用来显示日期或者时间的——可能是一个日程或者节假日。下面是time元素最简单的使用语法（2014年9月20号下午9:01）：
<time>2014-09-20T21:01:00Z</time>
你可以写具体到天：2014-09-20，到月：2014-09后者到年：2014。最末尾的”Z”代表的是协调世界时（UTC）。你可以使用自己的时区替换它，例如+01:00、-06:00等。
虽然这样的事件格式很适合机器阅读，但是人并不好理解。因此，你可以给time元素添加一个datetime属性，将你的日期或者时间放在里面，使用更容易理解的内容，经过国际化等等。
<time datetime="2014-09-20T21:01:00+08:00">9:01pm, Saturday September 20<sup>th</sup>, 2014</time>
time在使用微数据和微格式时，您需要认真考虑该元素。
日历图标的HTML
使用下面这样的HTML来构成我们的日历图标：
<time datetime="2014-09-20" class="icon"> <em>Saturday</em> <strong>September</strong> <span>20</span> </time>
给这个time 元素添加样式”icon”。
我使用em、strong和span元素来代表周几、月和日，便于定义CSS样式。它们都是无语义行内元素，因此不需要其他样式，日期也是可读的。当然，你也可以根据需要使用其他元素。
日历图标的CSS
我们首先定义图标外围样式：
time.icon
{
font-size: 1em; /* change icon size */
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样式实现的。我最开始考虑使用伪类，但是这行不通，因为我们定义了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及以上的IE浏览器（动画在IE10+上有效）。在IE8及以下的浏览器中，如果你使用了HTML5shim的话，你可以看到一个还过得去的效果。我发现了一个Webkit/Blink动画的bug，在我实现这个示例时——不过我将在另外一篇文章来说明这个问题。
使用这些代码来实现你自己的日历图标吧，祝你愉快！
最终完整代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
time.icon {
font-size: 1em; /* change icon size */
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;
}
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;
}
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;
}
</style>
</head>
<body>
<time datetime="2014-09-20" class="icon">
<em>Saturday</em>
<strong>September</strong>
<span>20</span>
</time>
<time datetime="2014-09-20" class="icon">
<em>9月</em>
<strong>2022</strong>
<span>20</span>
</time>
</body>
</html>版权声明：本站內容部分来源于网络，仅供个人学习交流。如有侵权内容请留言告知，本站将会立即处理！
文章标题：如何通过 HTML5 和 CSS3 来实现日历图标样式
本文链接：https://www.zluckin.com/63.html
原文链接：https://www.sitepoint.com/create-calendar-icon-html5-css3/
关于我
昵称：ZLUCKIN
区域：中国 · 河南
简言：好好生活，慢慢相遇。
热门文章
Linux下安装宝塔面板，创建本地站点...
1、站点前后台都报404错误 一般主要...
1. 导航高亮{pboot:if(&#...
LEADSHOP运行环境LEADSHO...
Docker 是一个开源的应用容器引擎...