使用 HTML 和 CSS 设计日历

日历是日常生活中使用频率很高的应用之一。在网页应用中，设计一个漂亮实用的日历也非常重要。HTML 和 CSS 是网页设计中不可或缺的两个技术，其中，HTML 负责页面结构，而 CSS 则负责页面样式。在本文中，我们将学习如何使用 HTML 和 CSS 设计一个简单的日历。

日历的结构

一个简单的日历通常由顶部的年份、月份和导航按钮，以及下方的日期表格组成。因此，在 HTML 中，我们可以使用如下的结构来构建一个日历：

<div class="calendar">
  <header>
    <button class="prev">&lt;</button>
    <h2 class="month-year"></h2>
    <button class="next">&gt;</button>
  </header>
  <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>
    </tbody>
  </table>
</div>

在上述代码中，class="calendar"表示整个日历的区域，其下面有一个header标签和一个table标签。header标签包含了三个按钮和一个显示月份和年份的h2标签，而table标签则是日期表格。此时我们可以通过CSS来为此结构添加样式。

日历的样式

经过结构化设计后，为日历添加样式变得容易。使用如下的 CSS 代码可以为我们刚刚创造的 HTML 结构添加样式：

.calendar {
  position: relative;
  width: 320px;
  margin: 0 auto;
  font-family: Arial, sans-serif;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, 0.3);
}

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  padding: 8px;
  background-color: #eee;
  border-top-left-radius: 5px;
  border-top-right-radius: 5px;
}

.prev,
.next {
  font-size: 1.5em;
  color: #777;
  border: none;
  background: none;
  cursor: pointer;
  outline: none;
}

.prev:hover,
.next:hover {
  color: #333;
}

.month-year {
  margin: 0;
  font-size: 1.2em;
  text-align: center;
}

table {
  width: 100%;
  border-collapse: collapse;
  padding: 8px;
}

th,
td {
  text-align: center;
  padding: 4px;
}

thead th {
  font-weight: normal;
  color: #999;
}

tbody td {
  color: #333;
  border: 1px solid #ccc;
}

tbody td:hover {
  background-color: #f0f0f0;
}

这里我们为使用了Class名称为“calendar”的整个日历区域设置样式，样式内容包括背景颜色、边框、圆角等。其中，由于我们使用了flex，因此可以轻松实现顶部导航按钮的布局。

日历的交互

我们可以在上下月份导航按钮添加交互，使用户可以通过按钮翻查不同月份或不同年份的日历。下面我们在Javascript中编写如下的代码实现这一功能：

const calendar = document.querySelector(".calendar");
const monthYear = calendar.querySelector(".month-year");
const prevButton = calendar.querySelector(".prev");
const nextButton = calendar.querySelector(".next");

let currentDate = new Date();
let currentYear = currentDate.getFullYear();
let currentMonth = currentDate.getMonth();

function renderCalendar(year, month) {
  const daysOfMonth = new Date(year, month + 1, 0).getDate();
  const firstDayOfMonth = new Date(year, month, 1).getDay();

  let date = 1;
  let calendarHTML = "";

  for (let row = 1; row <= 6; row++) {
    calendarHTML += "<tr>";

    for (let col = 0; col < 7; col++) {
      if ((row === 1 && col < firstDayOfMonth) || date > daysOfMonth) {
        calendarHTML += "<td></td>";
      } else {
        calendarHTML += `<td>${date}</td>`;
        date++;
      }
    }

    calendarHTML += "</tr>";
  }

  const tableBody = calendar.querySelector("tbody");
  tableBody.innerHTML = calendarHTML;

  monthYear.textContent = `${year}年${month + 1}月`;
}

renderCalendar(currentYear, currentMonth);

prevButton.addEventListener("click", function() {
  currentMonth--;
  if (currentMonth < 0) {
    currentYear--;
    currentMonth = 11;
  }
  renderCalendar(currentYear, currentMonth);
});

nextButton.addEventListener("click", function() {
  currentMonth++;
  if (currentMonth > 11) {
    currentYear++;
    currentMonth = 0;
  }
  renderCalendar(currentYear, currentMonth);
});

在上述Javascript中，我们定义了一个renderCalendar()函数来渲染日期表格，该函数接受两个参数：年份和月份。我们在该函数中，使用JavaScript自带的Date对象计算该月的天数和第一天是星期几，以便我们可以轻易地生成日期表格。我们在这里简单的添加效果，只为日历每一天添加文字、没有进入下一