html5 手机端签到日历,移动端H5页面实现日历左右滑动上一月下一月

Title

*{

margin: 0;

padding: 0;

}

body{

padding-top: 80px;

}

#calendar{

width: 560px;

height: 560px;

margin: 0 auto;

}

#tr1{

height: 160px;

}

#tr2{

height: 400px;

}

#view{

position: relative;

}

.page{

position: absolute;

top:0;

width: 100%;

height: 100%;

text-align: center;

}

.page:nth-of-type(2n){

background-color: #a8e5cf;

}

.page:nth-of-type(2n+1){

background-color: #ffa7d7;

}

@media screen and (max-width: 560px){

body{

padding-top: 0;

}

#calendar{

width: 100%;

height: 375px;

}