日历的html和css代码示例
时间: 2024-01-04 07:02:03 浏览: 24
好的,以下是一个基本的日历HTML和CSS代码示例:
HTML代码:
```
<div class="calendar">
<div class="header">
<span class="prev-month"></span>
<span class="current-month"></span>
<span class="next-month"></span>
</div>
<div class="weekdays">
<div>Sun</div>
<div>Mon</div>
<div>Tue</div>
<div>Wed</div>
<div>Thu</div>
<div>Fri</div>
<div>Sat</div>
</div>
<div class="days"></div>
</div>
```
CSS代码:
```
.calendar {
border: 1px solid #ccc;
font-family: Arial, sans-serif;
width: 240px;
}
.calendar .header {
background-color: #efefef;
display: flex;
justify-content: space-between;
padding: 5px;
}
.calendar .weekdays {
background-color: #ddd;
display: flex;
justify-content: space-between;
padding: 5px;
}
.calendar .weekdays div {
font-weight: bold;
text-align: center;
width: calc(100% / 7);
}
.calendar .days {
display: flex;
flex-wrap: wrap;
padding: 5px;
}
.calendar .days div {
border: 1px solid #ccc;
box-sizing: border-box;
height: 30px;
margin: 2px;
width: calc(100% / 7);
}
```
这段代码可以创建一个简单的日历,包括前一月、当前月和下一月的按钮、星期几和日期格子。注意,这只是一个示例,您可以按照自己的需求进行修改和扩展。