当前位置：首页 > CSS

css制作日历

2026-02-26 21:24:13CSS

使用CSS制作日历的基本方法

日历的布局可以通过CSS Grid或Flexbox实现。以下是一个简单的日历结构示例：

<div class="calendar">
  <div class="header">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>1</div>
    <div>2</div>
    <!-- 更多日期... -->
  </div>
</div>

CSS样式设置

日历容器使用Grid布局：

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

星期标题行样式：

css制作日历

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

日期单元格布局：

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

.days div {
  padding: 10px;
  text-align: center;
  background: white;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

添加交互效果

悬停效果：

css制作日历

.days div:hover {
  background: #e6f7ff;
  cursor: pointer;
}

当前日期高亮：

.days .today {
  background: #1890ff;
  color: white;
  border-radius: 50%;
}

响应式设计

适应不同屏幕尺寸：

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

  .days div {
    padding: 5px;
    min-height: 30px;
  }
}

完整示例代码

结合HTML和CSS的完整日历实现：

<!DOCTYPE html>
<html>
<head>
<style>
.calendar {
  width: 300px;
  border: 1px solid #ddd;
  border-radius: 8px;
  overflow: hidden;
  font-family: Arial, sans-serif;
}

.header {
  background: #1890ff;
  color: white;
  text-align: center;
  padding: 10px;
  font-size: 18px;
}

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

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

.days div {
  padding: 10px;
  text-align: center;
  background: white;
  min-height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.days div:hover {
  background: #e6f7ff;
  cursor: pointer;
}

.days .today {
  background: #1890ff;
  color: white;
  border-radius: 50%;
}
</style>
</head>
<body>

<div class="calendar">
  <div class="header">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>1</div>
    <div>2</div>
    <div>3</div>
    <div>4</div>
    <div>5</div>
    <div>6</div>
    <div>7</div>
    <!-- 更多日期... -->
  </div>
</div>

</body>
</html>