html js日历制作视频,js日历制作

body {

padding:0;

margin:0;

display:flex;

justify-content:center;

align-items:center;

height:100vh;

}

* {

box-sizing:border-box;

}

#warp {

position:relative;

width:300px;

height:360px;

border:1px solid black;

}

.prev {

width:50px;

height:20px;

line-height:20px;

cursor:pointer;

margin:5px;

}

.now {

position:absolute;

bottom:0;

right:0px;

width:80px;

height:20px;

text-align:center;

line-height:20px;

cursor:pointer;

margin:5px;

}

.next {

position:absolute;

top:0;

right:0;

line-height:20px;

width:50px;

height:20px;

cursor:pointer;

margin:5px;

}

.year {

font-size:20px;

font-weight:700;

text-align:center;

}

.mot {

text-align:center;

}

.title {

margin:auto;

width:280px;

height:20px;

color:white;

background-color:gray;

}

.title span {

list-style:none;

margin:0 3px;

width:34px;

height:20px;

text-align:center;

line-height:20px;

float:left;

}

.main {

margin:10px auto;

width:280px;

height:240px;

}

li {

list-style:none;

margin:3px;

width:34px;

height:34px;

text-align:center;

line-height:34px;

background-color:linen;

float:left;

}

.hover:hover {

cursor:pointer;

border:1px solid red;

line-height:32px;

background-color:ghostwhite;

}

.active {

background-color:indianred;

color:white;

}