一直以来,总觉的博客园的日历看起来又丑又不好用。然鹅,就在昨天,当我突然想美化一下日历时,才发现原来他还有这样的用途!
美化前
普普通通的就是一些数字,好像没有啥用,连今天是哪一天都看不出来,还有数字下面的下划线又是什么意思?
通过对源码的查看和研究后,我明白了!
原来啊!下划线表示那一天你发过随笔动态,而且今天的日期也是有区别于其他日子的id,稍加美化应该就可以变得很好看!
美化后
有没有好看很多呢?
这样看起来更符合日历的功能:
- 红色的数字代表那天你发过随笔
- 红色的圆圈数字代表今天的日期
美化的 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;
}