css制作日历
使用CSS Grid布局制作日历
日历的布局适合使用CSS Grid实现，因其天然的行列结构。以下是一个基础日历的HTML和CSS代码：
<div class="calendar">
<div class="header">Sunday</div>
<div class="header">Monday</div>
<!-- 其他星期标题... -->
<div class="day">1</div>
<div class="day">2</div>
<!-- 其他日期格子... -->
</div>.calendar {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 4px;
max-width: 500px;
}
.header {
background: #f0f0f0;
text-align: center;
padding: 10px;
}
.day {
border: 1px solid #ddd;
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
}添加月份标题和样式美化
为日历添加月份标题并增强视觉效果：
.month-title {
grid-column: span 7;
text-align: center;
font-size: 1.5em;
padding: 10px;
}
.day:hover {
background-color: #e6f7ff;
cursor: pointer;
}
.other-month {
color: #ccc;
background-color: #f9f9f9;
}实现响应式设计
确保日历在不同设备上显示良好：
@media (max-width: 600px) {
.calendar {
gap: 2px;
}
.header, .day {
font-size: 0.8em;
padding: 5px;
}
}添加事件指示标记
为有事件的日期添加视觉标记：
.day.has-event::after {
content: "";
display: block;
width: 6px;
height: 6px;
background: #ff6b6b;
border-radius: 50%;
position: absolute;
bottom: 5px;
}完整实现示例
结合JavaScript动态生成日历：
// 获取当前月份天数
const daysInMonth = new Date(year, month+1, 0).getDate();
// 生成日历格子
for(let i = 1; i <= daysInMonth; i++) {
const dayElement = document.createElement('div');
dayElement.className = 'day';
dayElement.textContent = i;
// 检查是否有事件
if(events.includes(i)) {
dayElement.classList.add('has-event');
}
calendarContainer.appendChild(dayElement);
}可选动画效果
为日历添加简单的过渡动画：
.day {
transition: all 0.2s ease;
transform: scale(1);
}
.day:active {
transform: scale(0.95);
}这些方法提供了创建CSS日历的核心技术，可以根据具体需求进一步定制样式和功能。
