写一个电商登录注册界面
时间: 2024-05-13 14:15:27 浏览: 11
抱歉,作为一名 AI,我无法提供图形界面。但是我可以提供一个简单的 HTML/CSS 登录注册界面的代码示例,您可以进行美化和完善。
```
<!DOCTYPE html>
<html>
<head>
<title>E-commerce Login and Registration</title>
<style>
/* Form styling */
form {
margin: 0 auto;
width: 300px;
padding: 1em;
border: 1px solid #CCC;
border-radius: 1em;
}
label {
display: inline-block;
width: 90px;
text-align: right;
margin-right: 0.5em;
}
input[type="text"],
input[type="password"] {
padding: 0.5em;
margin: 0.5em 0 1em 0;
width: 100%;
border-radius: 0.3em;
border: 1px solid #CCC;
}
input[type="submit"] {
background-color: #3a9cff;
color: white;
padding: 0.5em 1em;
border-radius: 0.3em;
border: 1px solid #CCC;
cursor: pointer;
}
input[type="submit"]:hover {
background-color: #2980b9;
}
/* Text styling */
h2 {
text-align: center;
font-size: 1.5em;
margin-bottom: 1em;
}
.error {
color: #FF0000;
font-style: italic;
}
</style>
</head>
<body>
<h2>Login</h2>
<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<input type="submit" value="Login">
</form>
<br>
<h2>Register</h2>
<form action="" method="post">
<label for="username">Username:</label>
<input type="text" id="username" name="username" required><br>
<label for="password">Password:</label>
<input type="password" id="password" name="password" required><br>
<label for="password_confirm">Confirm Password:</label>
<input type="password" id="password_confirm" name="password_confirm" required><br>
<input type="submit" value="Register">
</form>
</body>
</html>
```
这个示例中包含了一个简单的登录和注册表单,包括用户名、密码和确认密码的输入框,以及登录和注册按钮。您可以根据自己的需求进行修改和美化。
相关推荐
![sketch](https://img-home.csdnimg.cn/images/20210720083646.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)