当前位置:主页 > CSS3库 > 日期 / 时间 >

CSS创建普通日历图标 - cal.css
栏目分类:日期 / 时间   发布日期:2021-08-19   浏览次数:

cal.css 是一个 CSS 库,用于创建表示任何日期的简单日历图标。

使用:

1. 将 cal.css 样式表插入 HTML 页面。

<link rel="stylesheet" href="cal.css" />

2. 创建一个日历图标并替换月份和日期如下:

<div class="cal">
  <div class="month">January</div>
  <div class="date">1</div>
</div>

3. 覆盖默认样式以创建您自己的图标样式。

.cal {
  display: inline-block;
  border: .1px solid #CCCAC5;
  background-color: #FFF;
  width: 250px;
  font-family: Arial, sans-serif;
  text-align: center;
}
 
.cal .month {
  height: 50px;
  line-height: 50px;
  font-size: 2rem;
  text-transform: uppercase;
  background-color: #E75951;
  color: #FFF;
}
 
.cal .date {
  font-size: 10rem;
  color: #585858;
  line-height: 175px;
}


官方网站:https://github.com/TheCoolBlackCat/cal-icon

相关热词: 日历图标cal.css

上一篇:没有了
下一篇:没有了
相关下载
声源:本站内容均来自互联网,仅供交流学习之用,请勿作商业用途,所有资源版权归原作者所有。如果有侵犯到您的权益,请联系本站删除,谢谢合作!
jQuery库 JavsScript库 Html5库 CSS3库