当前位置：首页 > CSS

css日历制作

2026-01-08 21:01:57CSS

基础日历结构

使用HTML创建日历的基本框架，通常包含表格元素。月份、星期几和日期通过<table>标签组织，表头显示星期几，表格主体填充日期数字。

<div class="calendar">
  <div class="header">
    <h2>June 2023</h2>
  </div>
  <table>
    <thead>
      <tr>
        <th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th>
      </tr>
    </thead>
    <tbody>
      <tr>
        <td>28</td><td>29</td><td>30</td><td>31</td><td>1</td><td>2</td><td>3</td>
      </tr>
      <!-- 更多日期行 -->
    </tbody>
  </table>
</div>

样式设计

通过CSS设置日历的视觉样式，包括边框、颜色和悬停效果。使用border-collapse合并表格边框，伪类选择器:hover增强交互性。

.calendar {
  width: 300px;
  border: 1px solid #ddd;
  font-family: Arial, sans-serif;
}
.header {
  background: #4CAF50;
  color: white;
  text-align: center;
  padding: 10px;
}
table {
  width: 100%;
  border-collapse: collapse;
}
th, td {
  padding: 10px;
  text-align: center;
  border: 1px solid #ddd;
}
th {
  background: #f2f2f2;
}
td:hover {
  background: #f5f5f5;
  cursor: pointer;
}

动态日期高亮

使用CSS类标记当前日期或特殊日期。通过JavaScript动态添加类名，结合CSS定义高亮样式。

.today {
  background: #4CAF50;
  color: white;
}
.event-day {
  background: #ffeb3b;
}

响应式布局

通过媒体查询适配不同屏幕尺寸。在小屏幕上调整单元格内边距和字体大小。

@media (max-width: 600px) {
  .calendar {
    width: 100%;
  }
  th, td {
    padding: 5px;
    font-size: 12px;
  }
}

进阶交互效果

添加过渡动画和阴影提升视觉体验。使用box-shadow创建层次感，transition平滑颜色变化。

.calendar {
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
}
td {
  transition: background 0.2s ease;
}

完整示例代码

整合HTML和CSS的完整日历实现。包含基础结构、样式和响应式设计。

<!DOCTYPE html>
<html>
<head>
<style>
.calendar {
  width: 300px; margin: 20px auto;
  border: 1px solid #ddd; box-shadow: 0 4px 8px rgba(0,0,0,0.1);
  font-family: Arial, sans-serif;
}
.header {
  background: #4CAF50; color: white;
  text-align: center; padding: 10px;
}
table { width: 100%; border-collapse: collapse; }
th, td { padding: 10px; text-align: center; border: 1px solid #ddd; }
th { background: #f2f2f2; }
td:hover { background: #f5f5f5; cursor: pointer; }
.today { background: #4CAF50; color: white; }
@media (max-width: 600px) {
  .calendar { width: 100%; }
  th, td { padding: 5px; font-size: 12px; }
}
</style>
</head>
<body>
<div class="calendar">
  <div class="header"><h2>June 2023</h2></div>
  <table>
    <thead>
      <tr><th>Sun</th><th>Mon</th><th>Tue</th><th>Wed</th><th>Thu</th><th>Fri</th><th>Sat</th></tr>
    </thead>
    <tbody>
      <tr><td>28</td><td>29</td><td>30</td><td>31</td><td class="today">1</td><td>2</td><td>3</td></tr>
      <tr><td>4</td><td>5</td><td>6</td><td>7</td><td>8</td><td>9</td><td>10</td></tr>
      <!-- 更多日期行 -->
    </tbody>
  </table>
</div>
</body>
</html>

css日历制作