签到界面设计：Html+Css+JS

1、效果图

html

<div class="riqi">
        <div class="yd">2020年6月</div>
        <ul id='rili'>     
        </ul>
        <div class="days">   
            <p>您已累计签到{
   $sign.signday}天</p>
            <p><a href="{:U('signlist')}">签到记录</a></p>       
        </div>
 </div>

.body_main2 .body .riqi{
   
    width: 92%;
    margin: 0 4%;
    height: 23rem;
    background: #f3f3ed;
    margin-bottom: 10px;
    border-radius:16px;
}
.body_main2 .body .riqi .yd{
   
    width: 92%;
    padding-left: 4%;
    padding-top: 15px;
    font-size:18px;
    height: 2rem;
}
.body_main2 .body .riqi ul{
   margin:0 auto;width:100%;height:16.7rem;overflow:hidden}
.body_main2 .body .riqi ul li{
   display:flex;justify