简单做一个用户注册页面,包括:用户名,密码,确认密码,电子邮件,注册新用户等五个盒子,文字都嵌套在盒子里面,背景为绿色,头部设置的盒子居中文字
时间: 2023-10-05 17:04:17 浏览: 71
HTML代码如下:
```html
<!DOCTYPE html>
<html>
<head>
<title>用户注册</title>
<style>
body {
background-color: #e6ffe6;
}
.container {
width: 400px;
margin: 0 auto;
padding: 20px;
background-color: #b3ffb3;
}
h1 {
text-align: center;
}
label {
display: block;
margin-bottom: 10px;
}
input[type="text"], input[type="password"], input[type="email"] {
display: block;
width: 100%;
padding: 10px;
margin-bottom: 20px;
}
input[type="submit"] {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<div class="container">
<h1>用户注册</h1>
<form>
<label for="username">用户名:</label>
<input type="text" id="username" name="username" required>
<label for="password">密码:</label>
<input type="password" id="password" name="password" required>
<label for="confirm_password">确认密码:</label>
<input type="password" id="confirm_password" name="confirm_password" required>
<label for="email">电子邮件:</label>
<input type="email" id="email" name="email" required>
<input type="submit" value="注册新用户">
</form>
</div>
</body>
</html>
```
效果如下:
![注册页面](https://i.imgur.com/PEFZgJl.png)
相关推荐
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)