zoukankan      html  css  js  c++  java
  • 原来博客园的日历是这样用的!


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

    美化前

    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;
    }
    
  • 相关阅读:
    为服务部署 Jekins的使用
    spring cloud
    docker
    WebSocket
    idea
    maven
    SQL四种语言(DDL、 DML、 DCL、 TCL)
    十大经典排序
    AVL树的旋转图解和简单实现
    多个线程交替打印
  • 原文地址:https://www.cnblogs.com/gshang/p/11541083.html
Copyright © 2011-2022 走看看