CSS是前端開發中重要的一環，不僅可以讓網頁樣式更美觀，還可以用來制作諸如課程表、時鐘等小工具。下面我們就來學習一下如何用CSS來制作課程表。

.week {
display: flex;
justify-content: center;
}
.week>div {
flex-grow: 1;
text-align: center;
border: 1px solid #666;
padding: 5px;
background-color: #f5f5f5;
}
.week>div:last-of-type {
border-right: none;
}
.course {
position: absolute;
left: 2%;
width: 96%;
height: 70px;
margin-top: 50px;
}
.course>div {
position: relative;
height: 100%;
margin-bottom: 5px;
}
.course>div>div {
background-color: #f5f5f5;
text-align: center;
height: 100%;
border: 1px solid #666;
position: absolute;
left: 0;
right: 0;
}
.course>div>div.course-name {
top: 0;
bottom: 50%;
line-height: 35px;
}
.course>div>div.course-time {
top: 50%;
bottom: 0;
line-height: 35px;
}

首先，我們需要把一周的時間按照星期一到星期天的順序排列出來，這里可以使用flex布局，并設置每個單元格的寬度、邊框等；接著，我們需要在每個單元格上方添加一個時間邊欄，這里采用絕對定位并設置上邊距來實現；最后，我們需要添加每節課的詳細信息，包括課程名稱和上課時間，這里同樣采用絕對定位并設置上下邊距來實現。