css日历制作

使用CSS Grid布局制作日历

通过CSS Grid可以快速创建日历的网格布局。定义一个7列的网格对应星期，行数根据月份天数调整。

.calendar {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 8px;
}

.day {
  height: 80px;
  border: 1px solid #ddd;
  padding: 5px;
}

设置日历头部样式

为星期名称和月份标题添加样式，增强可读性。

.month-header {
  grid-column: span 7;
  text-align: center;
  font-size: 1.5em;
  padding: 10px;
}

.weekday {
  text-align: center;
  font-weight: bold;
  padding: 5px;
}

添加日期状态样式

为不同状态的日期（如今天、非当前月份日期）设置视觉区分。

.today {
  background-color: #e6f7ff;
  border-color: #1890ff;
}

.other-month {
  color: #ccc;
}

实现响应式设计

使用媒体查询确保日历在不同设备上正常显示。

@media (max-width: 600px) {
  .day {
    height: 60px;
    font-size: 0.8em;
  }
}

完整HTML结构示例

<div class="calendar">
  <div class="month-header">2023年7月</div>
  <div class="weekday">日</div>
  <div class="weekday">一</div>
  <!-- 其他星期 -->
  <div class="day other-month">30</div>
  <div class="day">1</div>
  <!-- 其他日期 -->
  <div class="day today">15</div>
  <!-- 其他日期 -->
</div>

使用CSS变量统一主题

定义CSS变量方便整体风格调整。

:root {
  --primary-color: #1890ff;
  --border-color: #e8e8e8;
  --text-secondary: #888;
}

.calendar {
  --day-height: 80px;
  --gap-size: 8px;
}