用HTML、CSS、Javascript和JQ写一个商城前端静态页面,其中包括登录页面、注册页面、商品展示界面、...
由于篇幅所限,以下仅展示登录页面和注册页面的核心代码。请自行补充完整的HTML结构、CSS样式和必要的Javascript/JQuery功能。
<!-- 登录页面 -->
<div class="login-container">
<form id="loginForm">
<h2>登录</h2>
<div class="input-group">
<input type="text" required>
<label>用户名</label>
</div>
<div class="input-group">
<input type="password" required>
<label>密码</label>
</div>
<button type="submit">登录</button>
</form>
</div>
<!-- 注册页面 -->
<div class="register-container">
<form id="registerForm">
<h2>注册</h2>
<div class="input-group">
<input type="text" required>
<label>用户名</label>
</div>
<div class="input-group">
<input type="email" required>
<label>邮箱</label>
</div>
<div class="input-group">
<input type="password" required>
<label>密码</label>
</div>
<button type="submit">注册</button>
</form>
</div>
/* 简单的样式 */
.login-container, .register-container {
width: 300px;
margin: 100px auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
.input-group {
position: relative;
margin-bottom: 20px;
}
.input-group input, .input-group label {
display: block;
}
.input-group input {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 4px;
outline: none;
}
.input-group label {
position: absolute;
top: 0;
left: 0;
padding: 10px 15px;
pointer-events: none;
transition: 0.5s;
}
.input-group input:focus + label, .input-group input:valid + label {
transform: translateY(-25px);
font-size: 12px;
color: #5264AE;
}
button[type="submit"] {
width: 100%;
padding: 10px;
background-color: #5264AE;
color: white;
border: none;
border-radius: 4px;
cursor: pointer;
}
// 登录表单提交处理
$('#loginForm').submit(function(e) {
e.preventDefault();
// 这里添加登录验证和提交逻辑
alert('登录成功!');
});
// 注册表单提交处理
$('#registerForm').submit(function(e) {
e.preventDefault();
// 这里添加注册验证和提交逻辑
alert('注册成功!');
});
以上代码展示了如何使用HTML、CSS和Javascript/JQuery创建一个简单的登录和注册表单,并处理表单的提交。在实际应用中
评论已关闭