用HTML、CSS、Javascript和JQ写一个商城前端静态页面,其中包括登录页面、注册页面、商品展示界面、...
时间: 2023-10-13 10:04:54 浏览: 34
很抱歉,由于篇幅限制,我无法在此处提供完整的商城前端静态页面代码。不过,我可以为您提供一个简单的示例,供参考:
HTML 登录页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>登录</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>欢迎登录商城</h1>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<button type="submit">登录</button>
</form>
<p>还没有账号?<a href="register.html">点击这里注册</a></p>
</div>
</body>
</html>
```
HTML 注册页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>注册</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1>欢迎注册商城</h1>
<form>
<label for="username">用户名</label>
<input type="text" id="username" name="username" required>
<label for="email">邮箱</label>
<input type="email" id="email" name="email" required>
<label for="password">密码</label>
<input type="password" id="password" name="password" required>
<label for="confirm-password">确认密码</label>
<input type="password" id="confirm-password" name="confirm-password" required>
<button type="submit">注册</button>
</form>
<p>已有账号?<a href="login.html">点击这里登录</a></p>
</div>
</body>
</html>
```
HTML 商品展示页面:
```html
<!DOCTYPE html>
<html>
<head>
<title>商品展示</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">服装</a></li>
<li><a href="#">鞋子</a></li>
<li><a href="#">配件</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</nav>
</header>
<main>
<section class="product-list">
<h2>热门商品</h2>
<ul>
<li>
<img src="product-1.jpg">
<h3>商品名称</h3>
<p>商品描述</p>
<button>加入购物车</button>
</li>
<!-- ... -->
</ul>
</section>
</main>
<footer>
<p>版权所有 © 2021 商城</p>
</footer>
</body>
</html>
```
CSS 样式表:
```css
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.container {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
form {
display: flex;
flex-direction: column;
align-items: center;
}
form label {
display: block;
margin-bottom: 10px;
font-weight: bold;
}
form input {
padding: 10px;
margin-bottom: 20px;
border: none;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
}
form button {
padding: 10px;
margin-top: 20px;
border: none;
border-radius: 5px;
background-color: #007bff;
color: #fff;
cursor: pointer;
transition: background-color 0.3s ease;
}
form button:hover {
background-color: #0062cc;
}
.product-list {
max-width: 600px;
margin: 0 auto;
padding: 20px;
text-align: center;
}
.product-list ul {
display: flex;
flex-wrap: wrap;
justify-content: center;
list-style: none;
padding: 0;
margin: 0;
}
.product-list li {
flex-basis: calc(25% - 20px);
margin: 10px;
padding: 10px;
background-color: #fff;
box-shadow: 0 0 5px rgba(0,0,0,0.1);
text-align: center;
}
.product-list li img {
max-width: 100%;
margin-bottom: 10px;
}
nav ul {
display: flex;
list-style: none;
padding: 0;
margin: 0;
background-color: #007bff;
}
nav li {
flex-grow: 1;
text-align: center;
}
nav a {
display: block;
padding: 10px;
color: #fff;
text-decoration: none;
transition: background-color 0.3s ease;
}
nav a:hover {
background-color: #0062cc;
}
footer {
background-color: #f5f5f5;
padding: 10px;
text-align: center;
}
```
以上代码仅供参考,具体实现方式会因需求和设计而有所不同。