用css美化以下页面使其可爱<h2>用户注册</h2> <form id="registrationForm" method="post" action="/register"> <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> <label for="sex">性别:</label> <input type="text" id="sex" name="sex"><br> <label for="phone">电话:</label> <input type="text" id="phone" name="phone"><br> <input type="submit" value="注册"> </form> <p id="message"></p>
时间: 2023-07-19 08:43:24 浏览: 29
以下一个使用CSS美化以上页面使其可爱的示例代码:
```css
h2 {
font-size: 2.5rem;
text-align: center;
color: #ff69b4;
margin-top: 2rem;
}
form {
border: 2px solid #ff69b4;
padding: 2rem;
margin-top: 2rem;
width: 30rem;
margin-left: auto;
margin-right: auto;
border-radius: 1rem;
background-color: #fff;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
}
label {
color: #ff69b4;
display: block;
margin-top: 1rem;
font-size: 1.2rem;
}
input[type="text"],
input[type="password"] {
width: 100%;
padding: 0.5rem;
border: none;
border-bottom: 2px solid #ff69b4;
margin-top: 0.5rem;
border-radius: 0.5rem;
font-size: 1.2rem;
}
input[type="submit"] {
background-color: #ff69b4;
color: #fff;
padding: 0.5rem 1rem;
border: none;
margin-top: 1rem;
cursor: pointer;
border-radius: 0.5rem;
font-size: 1.2rem;
transition: all 0.3s ease-in-out;
}
input[type="submit"]:hover {
background-color: #ff6f91;
transform: scale(1.1);
}
p#message {
color: #ff69b4;
text-align: center;
margin-top: 2rem;
font-size: 1.2rem;
}
```
这个CSS代码使用了一些可爱的颜色,如粉色、淡紫色、橙色和淡黄色,并且使用了一些圆形边角、阴影和过渡效果等等。这些效果共同使页面看起来更加可爱。