如何使用HTML5和CSS3制作日历图标

这篇文章主要讲解了“如何使用HTML5和CSS3制作日历图标”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“如何使用HTML5和CSS3制作日历图标”吧!

专注于为中小企业提供网站制作、成都网站设计服务,电脑端+手机端+微信端的三站合一,更高效的管理,为中小企业金东免费做网站提供优质的服务。我们立足成都,凝聚了一批互联网行业人才,有力地推动了成百上千家企业的稳健成长,帮助中小企业通过网站建设实现规模扩充和转变。

可选方案

几年前我们可能需要使用PNG或者FIG图片来实现。你现在也可以继续使用这种方案,不过这种方案缺点很多,不方便修改,没法被搜索收录,并且无法缩放。一种更好的方案就是使用SVG。使用SVG的方案会非常灵活,但是我们没必要使用SVG。

因此,我将使用没太多人知道的HTML5元素time来实现。它是用来显示日期或者时间的——可能是一个日程或者节假日。下面是time元素最简单的使用语法(2014年9月20号下午9:01):

你可以写具体到天:2014-09-20,到月:2014-09后者到年:2014。最末尾的”Z”代表的是协调世界时(UTC)。你可以使用自己的时区替换它,例如+01:00、-06:00等。

虽然这样的事件格式很适合机器阅读,但是人并不好理解。因此,你可以给time元素添加一个datetime属性,将你的日期或者时间放在里面,使用更容易理解的内容,经过国际化等等。

当使用微数据或者微格式时,你需要认真考虑time元素。

日历图标的HTML

使用下面这样的HTML来构成我们的日历图标:

  Saturday

  September

  20

给这个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;

}

最后,我添加了点动画效果,你的鼠标滑到图标上时,它会抖动——但是我把这个工作留给你,你自己来完成。

感谢各位的阅读,以上就是“如何使用HTML5和CSS3制作日历图标”的内容了,经过本文的学习后,相信大家对如何使用HTML5和CSS3制作日历图标这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是创新互联,小编将为大家推送更多相关知识点的文章,欢迎关注!


分享文章:如何使用HTML5和CSS3制作日历图标
文章位置:http://myzitong.com/article/pdicsp.html