制作日历css

基础日历结构

日历的HTML结构通常包含一个容器元素，内部嵌套表格或网格布局。以下是一个基础模板：

<div class="calendar">
  <div class="header">
    <button class="prev">←</button>
    <h2 class="month-year">June 2023</h2>
    <button class="next">→</button>
  </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 {
  width: 300px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  overflow: hidden;
  font-family: 'Segoe UI', sans-serif;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px;
  background: #4285f4;
  color: white;
}

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

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

.days div {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}

.days div:hover {
  background: #e3f2fd;
}

动态日期样式

通过CSS类控制不同状态的日期显示：

/* 非当前月份日期 */
.other-month {
  color: #bdbdbd;
  opacity: 0.6;
}

/* 当前日期 */
.current-day {
  background: #4285f4;
  color: white;
  border-radius: 50%;
}

/* 选中日期 */
.selected {
  background: #e3f2fd;
  border-radius: 50%;
  font-weight: bold;
}

响应式设计

添加媒体查询适应不同屏幕尺寸：

@media (max-width: 400px) {
  .calendar {
    width: 100%;
    border-radius: 0;
  }

  .weekdays div, .days div {
    font-size: 14px;
  }
}

动画效果

为交互添加过渡动画：

.days div {
  transition: all 0.2s ease;
}

button {
  transition: transform 0.2s;
}

button:hover {
  transform: scale(1.1);
}

完整示例

结合HTML/CSS/JavaScript的完整实现可以参考以下资源：

• CodePen上的日历组件模板
• GitHub上的开源日历库如flatpickr的CSS实现
• CSS Grid布局的日历教程案例

通过调整颜色变量、尺寸和布局方式，可以快速定制不同风格的日历界面。现代CSS特性如grid布局和aspect-ratio属性能大幅简化日历的排版工作。