帮我写一个邮箱登录注册的页面,并展示他的效果
时间: 2023-11-22 13:52:12 浏览: 26
好的,我可以为您提供一些基本的代码示例。请注意,这只是一个示例,您需要根据您的具体需求进行修改和定制。
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>Email Login/Register</title>
</head>
<body>
<h2>Email Login</h2>
<form>
<label for="email">Email:</label>
<input type="email" id="email" name="email" required><br><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br><br>
<input type="submit" value="Login">
</form>
<h2>Email Register</h2>
<form>
<label for="new_email">Email:</label>
<input type="email" id="new_email" name="new_email" required><br><br>
<label for="new_password">Password:</label>
<input type="password" id="new_password" name="new_password" required><br><br>
<label for="confirm_password">Confirm Password:</label>
<input type="password" id="confirm_password" name="confirm_password" required><br><br>
<input type="submit" value="Register">
</form>
</body>
</html>
```
CSS样式:
```
form {
margin-bottom: 20px;
}
label {
display: inline-block;
width: 100px;
text-align: right;
}
input[type="email"], input[type="password"] {
width: 200px;
padding: 5px;
margin-bottom: 10px;
border-radius: 5px;
border: 1px solid #ccc;
}
input[type="submit"] {
padding: 10px 20px;
background-color: #428bca;
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #3071a9;
}
```
效果展示:
![email_login_register_page](https://user-images.githubusercontent.com/53671905/124378528-a5b3c000-dce9-11eb-8f5d-245af1dd55b8.png)
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.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)