html写出仿京东商场登录页面全代码
时间: 2024-10-12 22:03:07 浏览: 8
创建一个简单的HTML仿京东商城登录页面是一个基础任务,下面是一个基本的例子,注意这只是一个简化的静态模板,并不具备完整的交互功能:
```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>京东商城登录页面</title>
<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.login-container {
width: 400px;
margin: auto;
padding: 20px;
border: 1px solid #ccc;
background-color: white;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
input, button {
display: block;
width: 100%;
margin-bottom: 10px;
}
button {
background-color: #00bfff;
color: white;
cursor: pointer;
}
</style>
</head>
<body>
<div class="login-container">
<h2>京东商城登录</h2>
<form id="loginForm">
<label for="username">用户名:</label>
<input type="text" id="username" required><br>
<label for="password">密码:</label>
<input type="password" id="password" required><br>
<button type="submit">登录</button>
<a href="#" id="forgotPassword">忘记密码?</a>
</form>
<p>新用户?<a href="#">立即注册</a></p>
</div>
<script>
// 这里可以添加一些简单的JavaScript处理表单提交,例如预验证或者发送到服务器模拟登录请求
document.getElementById('loginForm').addEventListener('submit', function(event) {
event.preventDefault();
console.log('正在尝试登录...');
});
</script>
</body>
</html>
```