網(wǎng)頁(yè)日歷是一種常見的網(wǎng)頁(yè)元素，它可以方便地展示時(shí)間和日期信息。使用CSS可以輕松地定制和設(shè)計(jì)網(wǎng)頁(yè)日歷，下面是一些示例代碼。

/* 設(shè)置日歷的樣式 */
.calendar {
border: 1px solid #ccc;
background-color: #f9f9f9;
font-family: Arial, sans-serif;
padding: 10px;
}
/* 設(shè)置日期的樣式 */
.calendar .day {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-right: 5px;
background-color: #fff;
}
/* 設(shè)置當(dāng)前日期的樣式 */
.calendar .day.today {
font-weight: bold;
color: #f00;
}
/* 設(shè)置周末的樣式 */
.calendar .day.weekend {
color: #00f;
}
/* 設(shè)置選中日期的樣式 */
.calendar .day.selected {
background-color: #ccc;
}
/* 設(shè)置月份標(biāo)題的樣式 */
.calendar .month {
font-weight: bold;
margin-bottom: 10px;
}
/* 設(shè)置箭頭按鈕的樣式 */
.calendar .prev,
.calendar .next {
display: inline-block;
width: 20px;
height: 20px;
text-align: center;
line-height: 20px;
margin-right: 5px;
background-color: #fff;
border: 1px solid #ccc;
cursor: pointer;
}
/* 設(shè)置禁用狀態(tài)按鈕的樣式 */
.calendar .prev.disabled,
.calendar .next.disabled {
opacity: 0.5;
cursor: default;
}

使用這些CSS樣式，可以創(chuàng)建一個(gè)簡(jiǎn)單的日歷，例如：

<div class="calendar">
<div class="month">2021年6月</div>
<div class="prev"></div>
<div class="day">31</div>
<div class="day weekend">1</div>
<div class="day">2</div>
<div class="day">3</div>
<div class="day selected">4</div>
<div class="day">5</div>
<div class="day weekend today">6</div>
<div class="next disabled"></div>
</div>

以上代碼將創(chuàng)建一個(gè)表示2021年6月的日歷，其中“4”這一天被選中。用戶可以使用左右箭頭按鈕切換月份，在當(dāng)前日期周圍添加了一個(gè)特殊的樣式。