css怎么制作课表

2026-04-02 17:43:14CSS

使用HTML和CSS制作课表

制作课表可以通过HTML定义结构，CSS进行样式设计。以下是一个简单的实现方法：

HTML部分：

<div class="timetable">
  <div class="header">
    <div class="cell">时间</div>
    <div class="cell">星期一</div>
    <div class="cell">星期二</div>
    <div class="cell">星期三</div>
    <div class="cell">星期四</div>
    <div class="cell">星期五</div>
  </div>
  <div class="row">
    <div class="cell time">8:00-9:30</div>
    <div class="cell course math">数学</div>
    <div class="cell course english">英语</div>
    <div class="cell course physics">物理</div>
    <div class="cell course chemistry">化学</div>
    <div class="cell course history">历史</div>
  </div>
  <!-- 更多时间段行 -->
</div>

CSS部分：

css怎么制作课表

.timetable {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  border: 1px solid #ddd;
  width: 100%;
  max-width: 800px;
  margin: 0 auto;
}

.header {
  display: contents;
  font-weight: bold;
  background-color: #f5f5f5;
}

.row {
  display: contents;
}

.cell {
  padding: 10px;
  border: 1px solid #ddd;
  text-align: center;
}

.time {
  background-color: #f5f5f5;
  font-weight: bold;
}

.course {
  min-height: 60px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.math { background-color: #ffdddd; }
.english { background-color: #ddffdd; }
.physics { background-color: #ddddff; }
.chemistry { background-color: #ffffdd; }
.history { background-color: #ffddff; }

响应式课表设计

针对移动设备，可以调整课表的显示方式：

@media (max-width: 600px) {
  .timetable {
    grid-template-columns: 1fr;
  }

  .header, .row {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
  }
}

添加交互效果

可以使用CSS为课表添加悬停效果：

css怎么制作课表

.course:hover {
  transform: scale(1.05);
  box-shadow: 0 0 10px rgba(0,0,0,0.2);
  z-index: 1;
  transition: all 0.3s ease;
}

使用CSS Grid布局复杂课表

对于更复杂的课表布局，可以充分利用CSS Grid：

.timetable {
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
  grid-auto-rows: minmax(80px, auto);
  gap: 2px;
  background-color: #ddd;
}

.header {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 100px repeat(5, 1fr);
}

.time {
  position: sticky;
  left: 0;
  z-index: 2;
}

使用Flexbox替代方案

如果不使用Grid布局，Flexbox也是可行的选择：

.timetable {
  display: flex;
  flex-direction: column;
}

.header, .row {
  display: flex;
}

.cell {
  flex: 1;
  min-width: 0;
}

.time {
  flex: 0 0 100px;
}

以上方法可以根据具体需求进行调整和组合，创建出符合需求的课表样式。