css日历制作

CSS日历制作方法

使用HTML和CSS创建一个简单的日历布局，可以通过以下方式实现：

HTML结构

<div class="calendar">
  <div class="month">2023年10月</div>
  <div class="weekdays">
    <div>日</div>
    <div>一</div>
    <div>二</div>
    <div>三</div>
    <div>四</div>
    <div>五</div>
    <div>六</div>
  </div>
  <div class="days">
    <div class="prev-month">29</div>
    <div class="prev-month">30</div>
    <div>1</div>
    <div>2</div>
    <!-- 更多日期 -->
    <div>31</div>
    <div class="next-month">1</div>
  </div>
</div>

基础CSS样式

.calendar {
  width: 300px;
  border: 1px solid #ddd;
  font-family: Arial, sans-serif;
}

.month {
  background: #4285f4;
  color: white;
  padding: 10px;
  text-align: center;
  font-size: 18px;
}

.weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: #f1f1f1;
}

.weekdays div {
  padding: 10px;
  text-align: center;
}

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

.days div {
  padding: 10px;
  text-align: center;
  cursor: pointer;
}

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

.prev-month, .next-month {
  color: #aaa;
}

.current-day {
  background: #4285f4;
  color: white;
}

高级日历样式技巧

响应式设计

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

  .weekdays div, .days div {
    padding: 5px;
  }
}

动画效果

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

.days div:active {
  transform: scale(0.9);
}

主题定制

/* 深色主题 */
.dark-theme {
  background: #333;
  color: white;
}

.dark-theme .month {
  background: #222;
}

.dark-theme .weekdays {
  background: #444;
}

.dark-theme .days div:hover {
  background: #555;
}

使用CSS Grid布局

对于更复杂的日历布局，可以使用CSS Grid的高级功能：

.calendar {
  display: grid;
  grid-template-rows: auto auto 1fr;
}

.days {
  display: grid;
  grid-template-rows: repeat(6, 1fr);
  grid-auto-flow: column;
}

伪元素装饰

添加视觉装饰元素：

.month::before {
  content: "📅";
  margin-right: 10px;
}

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

这些方法提供了创建CSS日历的基本框架，可以根据具体需求进行调整和扩展。