采用纯CSS的方式来创建一个日历图标,可以将其用在博客日志或其它地方,有需要的朋友参考下。
例子,纯CSS代码创建日历图标,如下图:
先看DEMO:
这个日历图标中使用的HTML代码异常简单,如下:
7 February
需要用一个外围元素,在这里用的是p元素(或者使用HTML5中的新元素——TIME)。在这个外围元素中我们还需要一个包含着月份的元素。
实现原理:
现在,有两个可以操作的元素,另外,还要为每个真元素创建两个伪元素,这样总共有6个可以操作的元素,借助这些元素即可对日历进行修饰。
如下图:
实现过程:
首先,对外围元素进行定义。你可能已经注意到我使用了 box-shadow、border-radius 以及 CSS渐变。并不是所有的浏览器都支持这些属性,但至少它们越来越普及。
注意,没有定义固定的高度,所有的高度都是通过外围元素以及其中的 em 元素的 line-height 属性来控制的。
复制代码代码示例:
本文链接:https://www.dnwfb.com/1003.html,转载请注明出处。
评论0