HTML5+CSS3 捐赠管理模块网页制作教程

下面是一个简单的捐赠管理模块网页的 HTML5 和 CSS3 代码示例：

HTML5 代码：

<!DOCTYPE html>
<html lang='en'>
  <head>
    <meta charset='UTF-8'>
    <title>捐赠管理模块</title>
    <link rel='stylesheet' href='style.css'>
  </head>
  <body>
    <header>
      <h1>捐赠管理模块</h1>
    </header>
    <section>
      <h2>新增捐赠</h2>
      <form>
        <label for='donor-name'>捐赠者姓名：</label>
        <input type='text' id='donor-name' name='donor-name' required>
        <br>
        <label for='donation-amount'>捐赠金额：</label>
        <input type='number' id='donation-amount' name='donation-amount' required>
        <br>
        <label for='donation-date'>捐赠日期：</label>
        <input type='date' id='donation-date' name='donation-date' required>
        <br>
        <input type='submit' value='提交'>
      </form>
    </section>
    <section>
      <h2>历史捐赠记录</h2>
      <table>
        <thead>
          <tr>
            <th>捐赠者姓名</th>
            <th>捐赠金额</th>
            <th>捐赠日期</th>
          </tr>
        </thead>
        <tbody>
          <tr>
            <td>张三</td>
            <td>100</td>
            <td>2020-01-01</td>
          </tr>
          <tr>
            <td>李四</td>
            <td>200</td>
            <td>2020-02-01</td>
          </tr>
          <tr>
            <td>王五</td>
            <td>300</td>
            <td>2020-03-01</td>
          </tr>
        </tbody>
      </table>
    </section>
    <footer>
      <p>版权所有 © 2021</p>
    </footer>
  </body>
</html>

CSS3 代码：

body {
  font-family: Arial, sans-serif;
  padding: 0;
  margin: 0;
}

header {
  background-color: #333;
  color: #fff;
  padding: 20px;
  text-align: center;
}

h1 {
  margin: 0;
}

section {
  padding: 20px;
}

h2 {
  margin-top: 0;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
}

label {
  margin-bottom: 10px;
}

input[type='text'], input[type='number'], input[type='date'], input[type='submit'] {
  padding: 5px;
  border-radius: 5px;
  border: none;
  margin-bottom: 10px;
}

input[type='submit'] {
  background-color: #333;
  color: #fff;
  cursor: pointer;
}

table {
  border-collapse: collapse;
  width: 100%;
  text-align: center;
}

th, td {
  border: 1px solid #ddd;
  padding: 10px;
}

th {
  background-color: #333;
  color: #fff;
}

tfoot {
  font-weight: bold;
}

footer {
  background-color: #333;
  color: #fff;
  padding: 10px;
  text-align: center;
}

上述代码实现了一个简单的捐赠管理模块网页，包括新增捐赠和历史捐赠记录两个部分。其中，使用了 HTML5 的表单元素和 CSS3 的弹性布局、表格样式等新特性。您可以根据实际需求修改和优化代码。