原来博客园的日历是这样用的!


一直以来,总觉得博客园的日历看起来又丑又不好用。然鹅,就在昨天,当我突然想美化一下日历时,才发现原来他还有这样的用途!

美化前

image

普普通通的就是一些数字,好像没有啥用,连今天是哪一天都看不出来,还有数字下面的下划线又是什么意思?(好像是我开启了禁用css导致的....)

通过对源码的查看和研究后,我明白了!

原来啊!下划线表示那一天你发过随笔动态,而且今天的日期也是有区别于其他日子的 class,稍加美化应该就可以变得很好看!

美化后

image

有没有好看很多呢?

这样看起来更符合日历的功能:

  • 红色的数字代表那天你发过随笔
  • 红色的圆圈数字代表今天的日期

美化的 CSS代码

/*******日历*************/

.CalTitle{
    font-size: 18px;
    font-weight: 600;
    line-height: 40px;
}

.CalDayHeader{
    font-size: 16px;
    line-height: 40px;
    border-bottom: 1px solid #F4F4F4;
}

.CalWeekendDay{
font-size:16px;
line-height:2.1;
}

.CalTodayDay{
background-color: #b62525;
color:#fff;
border-radius:50%;
}

#blog-calendar  u{
color:#b62525;
font-weight:600;
text-decoration:none!important;
}
posted @ 2019-09-18 12:14  GShang  阅读(690)  评论(0编辑  收藏  举报