日历效果如下图:
css部分:
<style>
* {
margin: 0;
padding: 0;
list-style: none;
}
.main {
width: 380px;
height: 370px;
margin: 30px auto;
position: relative;
}
button {
width: 30px;
height: 30px;
border-radius: 50%;
background: pink;
font-size: 12px;
text-align: center;
line-height: 30px;
border: none;
position: absolute;
color: #fff;
outline: none;
cursor: pointer;
user-select: none;
}
.prev {
top: 10px;
left: 6%;
}
.next {
top: 10px;
right: 6%;
}
.nowTime {
width: 90px;
position: absolute;
top: 15px;
right: calc(50% - 45px);
font-size: 14px;
font-weight: bold;
background: linear-gradient(to right, rgb(247, 149, 190), rgb(248, 204, 228));
-webkit-background-clip: text;
color: transparent;
}
.container {
width: 350px;
margin: 50px auto;
border: 1px solid #ccc;
position: absolute;
top: