日歷對于網站來說是一個非常重要的組件。使用CSS可以輕松地實現日歷，下面我們來看一下如何使用CSS實現一個簡單的日歷。

/* HTML代碼 */
<div class="calendar">
<div class="calendar-header">
<span class="prev-month"></span>
<span class="month"></span>
<span class="next-month"></span>
</div>
<ul class="calendar-body"></ul>
</div>
/* CSS代碼 */
.calendar {
background-color: #fff;
border: 1px solid #ccc;
width: 300px;
font-family: Arial, sans-serif;
}
.calendar-header {
background-color: #f0f0f0;
text-align: center;
padding: 10px;
position: relative;
}
.calendar-header span {
position: absolute;
top: 13px;
}
.prev-month {
left: 10px;
}
.next-month {
right: 10px;
}
.calendar-body {
list-style: none;
margin: 0;
padding: 0;
}
.calendar-body li {
display: inline-block;
width: 40px;
height: 40px;
text-align: center;
line-height: 40px;
border: 1px solid #ccc;
}
.today {
background-color: #f0f0f0;
}
.selected {
background-color: #ccc;
}
.month {
font-size: 18px;
font-weight: bold;
}

上面的代碼中，我們首先定義了一個.calendar類，用于包裹整個日歷。然后定義了.calendar-header類，用于顯示月份以及切換上一個月和下一個月的箭頭。緊接著，我們定義了.calendar-body類，用于顯示日期。

在CSS中，我們使用偽類來實現今天和選中日期的效果。今天的日期會使用.today類來表示，而選中的日期會使用.selected類來表示。

最后，我們給月份設置了較大的字體和加粗的樣式。