css制作日历

2026-03-31 20:29:47CSS

使用CSS制作日历的方法

基础HTML结构

日历的基础HTML结构通常包含一个容器，用于放置日期格子。以下是一个简单的结构示例：

<div class="calendar">
  <div class="header">
    <span class="month">January 2023</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 class="empty"></div>
    <div>1</div>
    <div>2</div>
    <!-- 更多日期格子 -->
  </div>
</div>

基础CSS样式

通过CSS设置日历的布局和外观。使用Flexbox或Grid布局可以轻松实现日历的排列。

css制作日历

.calendar {
  width: 300px;
  border: 1px solid #ccc;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.header {
  background-color: #4CAF50;
  color: white;
  padding: 10px;
  text-align: center;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background-color: #f2f2f2;
  padding: 5px 0;
  text-align: center;
}

.days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 5px;
  padding: 5px;
}

.days div {
  padding: 10px;
  text-align: center;
  border-radius: 4px;
}

.days div:hover {
  background-color: #e0e0e0;
}

.empty {
  visibility: hidden;
}

高级样式调整

可以根据需求进一步调整样式，比如添加当前日期的突出显示或事件标记。

css制作日历

.current-day {
  background-color: #4CAF50;
  color: white;
}

.event {
  background-color: #ff9800;
  color: white;
  position: relative;
}

.event::after {
  content: "";
  position: absolute;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 4px;
  height: 4px;
  background-color: white;
  border-radius: 50%;
}

响应式设计

通过媒体查询确保日历在不同设备上显示良好。

@media (max-width: 600px) {
  .calendar {
    width: 100%;
  }
}

动态生成日历

结合JavaScript动态生成日历内容，自动填充日期和调整布局。

function generateCalendar(year, month) {
  const daysContainer = document.querySelector('.days');
  daysContainer.innerHTML = '';

  const firstDay = new Date(year, month, 1).getDay();
  const daysInMonth = new Date(year, month + 1, 0).getDate();

  for (let i = 0; i < firstDay; i++) {
    const emptyDiv = document.createElement('div');
    emptyDiv.classList.add('empty');
    daysContainer.appendChild(emptyDiv);
  }

  for (let i = 1; i <= daysInMonth; i++) {
    const dayDiv = document.createElement('div');
    dayDiv.textContent = i;
    if (i === new Date().getDate() && month === new Date().getMonth()) {
      dayDiv.classList.add('current-day');
    }
    daysContainer.appendChild(dayDiv);
  }
}

generateCalendar(2023, 0); // 生成2023年1月的日历

以上方法提供了从基础到高级的日历制作方案，可以根据具体需求进一步扩展功能。