用html写一个日历
<!DOCTYPE html>
<html>
<head>
<title>日历</title>
<style>
.calendar {
display: flex;
flex-wrap: wrap;
justify-content: space-around;
align-items: center;
margin: 0 auto;
padding: 10px;
max-width: 600px;
font-family: Arial, sans-serif;
}
<pre><code> .calendar__month {
font-size: 24px;
font-weight: bold;
margin-bottom: 20px;
text-align: center;
width: 100%;
}
.calendar__day {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 14.28%;
height: 100px;
border: 1px solid #ccc;
box-sizing: border-box;
cursor: pointer;
}
.calendar__day:hover {
background-color: #f5f5f5;
}
.calendar__day--active {
background-color: #f00;
color: #fff;
}
.calendar__day--disabled {
color: #ccc;
cursor: not-allowed;
}
</style>
</code></pre>
</head>
<body>
<div class="calendar">
<div class="calendar__month">11月</div>
<div class="calendar__day calendar__day--disabled">日</div>
<div class="calendar__day calendar__day--disabled">一</div>
<div class="calendar__day calendar__day--disabled">二</div>
<div class="calendar__day calendar__day--disabled">三</div>
<div class="calendar__day calendar__day--disabled">四</div>
<div class="calendar__day">五</div>
<div class="calendar__day">六</div>
<div class="calendar__day">七</div>
<div class="calendar__day">八</div>
<div class="calendar__day">九</div>
<div class="calendar__day">十</div>
<div class="calendar__day">十一</div>
<div class="calendar__day">十二</div>
<div class="calendar__day">十三</div>
<div class="calendar__day">十四</div>
<div class="calendar__day">十五</div>
<div class="calendar__day">十六</div>
<div class="calendar__day">十七</div>
<div class="calendar__day">十八</div>
<div class="calendar__day">十九</div>
<div class="calendar__day">二十</div>
<div class="calendar__day">二十一</div>
<div class="calendar__day">二十二</div>
<div class="calendar__day">二十三</div>
<div class="calendar__day">二十四</div>
<div class="calendar__day">二十五</div>
<div class="calendar__day">二十六</div>
<div class="calendar__day">二十七</div>
<div class="calendar__day">二十八</div>
<div class="calendar__day">二十九</div>
<div class="calendar__day">三十</div>
<div class="calendar__day calendar__day--disabled">一</div>
<div class="calendar__day calendar__day--disabled">二</div>
<div class="calendar__day calendar__day--disabled">三</div>
<div class="calendar__day calendar__day--disabled">四</div>
<div class="calendar__day calendar__day--disabled">五</div>
<div class="calendar__day calendar__day--disabled">六</div>
</div>
</body>
</html
原文地址: https://www.cveoy.top/t/topic/eCSZ 著作权归作者所有。请勿转载和采集!