美观的修改密码页面代码

以下是一个简单的修改密码页面的 HTML 和 CSS 代码示例：

HTML 代码：

<div class="container">
  <h2>修改密码</h2>
  <form>
    <div class="form-group">
      <label for="current-password">当前密码：</label>
      <input type="password" class="form-control" id="current-password" placeholder="请输入当前密码">
    </div>
    <div class="form-group">
      <label for="new-password">新密码：</label>
      <input type="password" class="form-control" id="new-password" placeholder="请输入新密码">
    </div>
    <div class="form-group">
      <label for="confirm-password">确认密码：</label>
      <input type="password" class="form-control" id="confirm-password" placeholder="请再次输入新密码">
    </div>
    <button type="submit" class="btn btn-primary">确认修改</button>
  </form>
</div>

CSS 代码：

.container {
  margin: 50px auto;
  max-width: 500px;
  padding: 20px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

h2 {
  text-align: center;
  margin-bottom: 20px;
}

.form-group {
  margin-bottom: 20px;
}

label {
  font-weight: bold;
}

.form-control {
  width: 100%;
  padding: 10px;
  font-size: 16px;
  border: 1px solid #ddd;
  border-radius: 5px;
}

.btn-primary {
  display: block;
  width: 100%;
  margin-top: 20px;
  background-color: #007bff;
  border-color: #007bff;
  color: #fff;
  padding: 10px;
  border-radius: 5px;
  font-size: 16px;
}

.btn-primary:hover {
  background-color: #0069d9;
  border-color: #0062cc;
  color: #fff;
}

这段代码使用 Bootstrap 框架来快速创建一个美观的修改密码页面。你可以根据需要自定义样式或使用其他 CSS 框架来创建自己的页面。