如何用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 的弹性布局、表格样式等新特性。您可以根据实际需求修改和优化代码。