当前位置：首页 > CSS

css中制作日历

2026-04-02 07:09:46CSS

使用CSS Grid布局创建日历

使用CSS Grid可以高效地构建日历的网格结构。以下是一个基础实现方式：

<div class="calendar">
  <div class="header">周日</div>
  <div class="header">周一</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: 600px;
}

.header {
  background: #f0f0f0;
  text-align: center;
  padding: 10px;
}

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

使用Flexbox实现响应式日历

Flexbox方案适合需要更灵活布局的情况：

.calendar {
  display: flex;
  flex-wrap: wrap;
}

.day {
  flex: 0 0 calc(100%/7);
  box-sizing: border-box;
}

添加月份导航样式

为日历增加月份切换控件：

.calendar-nav {
  display: flex;
  justify-content: space-between;
  padding: 10px 0;
}

.month-title {
  font-size: 1.5em;
}

.nav-button {
  cursor: pointer;
  padding: 5px 15px;
}

高亮当前日期

通过CSS伪类标记当天日期：

.day.current {
  background: #007bff;
  color: white;
  font-weight: bold;
}

添加事件指示点

在日期格子中显示事件标记：

.day.has-events::after {
  content: "";
  display: block;
  width: 6px;
  height: 6px;
  background: red;
  border-radius: 50%;
  margin: 3px auto;
}

响应式调整

针对移动设备的样式优化：

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

完整示例结构

结合HTML5语义化标签的完整结构：

css中制作日历

<section class="calendar-wrapper">
  <header class="calendar-nav">
    <button class="nav-button">←</button>
    <h2 class="month-title">2023年6月</h2>
    <button class="nav-button">→</button>
  </header>

  <div class="calendar">
    <!-- 星期标题和日期格子 -->
  </div>
</section>

这些方法可以根据具体需求组合使用，通过调整CSS变量如--cell-size等参数可以轻松定制日历的外观和尺寸。对于更复杂的交互功能，建议结合JavaScript实现动态日期计算和事件管理。