设计类似淘宝登录页面的代码
时间: 2023-10-23 20:13:19 浏览: 53
这里提供一份基于HTML和CSS的示例代码,实现类似淘宝登录页面的效果。需要注意的是,这仅仅是一个简单的示例,实际的登录页面需要更多的功能和安全措施。
HTML代码:
```
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>淘宝登录</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="container">
<div class="login-box">
<h1>淘宝登录</h1>
<form>
<div class="input-group">
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
</div>
<div class="input-group">
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
</div>
<div class="input-group">
<button type="submit">登录</button>
</div>
</form>
<div class="more-links">
<a href="#">忘记密码?</a>
<a href="#">免费注册</a>
</div>
</div>
</div>
</body>
</html>
```
CSS代码:
```
* {
box-sizing: border-box;
}
body {
background-color: #f5f5f5;
font-family: Arial, sans-serif;
font-size: 14px;
line-height: 1.5;
margin: 0;
padding: 0;
}
.container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.login-box {
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
padding: 40px;
text-align: center;
width: 400px;
}
.login-box h1 {
color: #333;
font-size: 24px;
margin-bottom: 20px;
}
.input-group {
display: flex;
justify-content: space-between;
margin-bottom: 20px;
}
.input-group label {
flex-basis: 100px;
font-size: 16px;
line-height: 2;
text-align: right;
margin-right: 20px;
}
.input-group input {
border: 1px solid #ddd;
border-radius: 3px;
font-size: 16px;
padding: 8px;
width: 100%;
}
button[type="submit"] {
background-color: #ff4400;
border: none;
border-radius: 3px;
color: #fff;
cursor: pointer;
font-size: 16px;
padding: 10px 20px;
}
button[type="submit"]:hover {
background-color: #ff5c33;
}
.more-links {
margin-top: 20px;
}
.more-links a {
color: #999;
font-size: 14px;
margin-right: 20px;
text-decoration: none;
}
.more-links a:hover {
text-decoration: underline;
}
```
效果截图:
![淘宝登录页面效果截图](https://i.imgur.com/vy2dD7z.png)
相关推荐
![txt](https://img-home.csdnimg.cn/images/20210720083642.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)