用大量css美化以下页面使页面色彩丰富有青春气息只显示css代码<h2>登录</h2> <form id="loginForm" method="post" action="/login"> <label for="username">用户名：</label> <input type="text" id="username" name="username" required><br> <label for="password">密码：</label> <input type="password" id="password" name="password" required><br> <input type="submit" value="登录"> </form> <p id="message"></p>

以下是一个使用大量CSS美化以上页面的代码，只显示CSS部分：

h2 {
  color: #6c63ff;
  font-size: 2rem;
  text-align: center;
  margin-top: 2rem;
}

form {
  border: 2px solid #6c63ff;
  padding: 2rem;
  margin-top: 2rem;
  width: 30rem;
  margin-left: auto;
  margin-right: auto;
}

label {
  color: #6c63ff;
  display: block;
  margin-top: 1rem;
}

input[type="text"],
input[type="password"] {
  width: 100%;
  padding: 0.5rem;
  border: none;
  border-bottom: 2px solid #6c63ff;
  margin-top: 0.5rem;
}

input[type="submit"] {
  background-color: #6c63ff;
  color: #fff;
  padding: 0.5rem 1rem;
  border: none;
  margin-top: 1rem;
  cursor: pointer;
}

input[type="submit"]:hover {
  background-color: #5246d6;
}

p#message {
  color: #6c63ff;
  text-align: center;
  margin-top: 2rem;
  font-size: 1.2rem;
}

这个CSS代码使用了一些简单的样式，如颜色、字体大小、内边距、边框、宽度和外边距，以及一个指针样式。它们共同使页面看起来更加美观、色彩丰富，并且有青春气息。