用js写一个商铺页面
时间: 2023-07-16 22:14:38 浏览: 39
好的,以下是一个简单的商铺页面的示例代码:
HTML代码:
```
<!DOCTYPE html>
<html>
<head>
<title>商铺页面</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="header">
<h1>商铺名称</h1>
<nav>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">关于我们</a></li>
<li><a href="#">联系我们</a></li>
</ul>
</nav>
</div>
<div class="banner">
<img src="banner.jpg" alt="Banner">
</div>
<main>
<section class="products">
<h2>产品列表</h2>
<ul>
<li>
<img src="product1.jpg" alt="Product 1">
<h3>产品名称 1</h3>
<p>产品描述 1</p>
<button>立即购买</button>
</li>
<li>
<img src="product2.jpg" alt="Product 2">
<h3>产品名称 2</h3>
<p>产品描述 2</p>
<button>立即购买</button>
</li>
<li>
<img src="product3.jpg" alt="Product 3">
<h3>产品名称 3</h3>
<p>产品描述 3</p>
<button>立即购买</button>
</li>
</ul>
</section>
<section class="about">
<h2>关于我们</h2>
<p>关于我们的描述</p>
</section>
<section class="contact">
<h2>联系我们</h2>
<form>
<label for="name">姓名</label>
<input type="text" id="name" name="name" required>
<label for="email">电子邮件</label>
<input type="email" id="email" name="email" required>
<label for="message">留言</label>
<textarea id="message" name="message" required></textarea>
<button type="submit">发送</button>
</form>
</section>
</main>
<footer>
<p>© 2021 商铺名称. 版权所有.</p>
</footer>
</body>
</html>
```
CSS代码:
```
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
.header {
background-color: #333;
color: #fff;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.header nav ul {
display: flex;
list-style: none;
}
.header nav ul li {
margin-left: 20px;
}
.banner img {
width: 100%;
}
.products ul {
display: flex;
flex-wrap: wrap;
list-style: none;
padding: 0;
margin: 0;
}
.products li {
flex-basis: 30%;
margin: 1.5%;
padding: 20px;
box-sizing: border-box;
background-color: #f5f5f5;
text-align: center;
}
.products li img {
width: 100%;
}
.about,
.contact {
padding: 20px;
box-sizing: border-box;
}
.about h2,
.contact h2 {
margin-top: 0;
}
.contact form {
display: flex;
flex-direction: column;
}
.contact label {
margin-top: 10px;
}
.contact input,
.contact textarea {
padding: 10px;
margin-top: 5px;
}
.contact button {
padding: 10px;
margin-top: 10px;
background-color: #333;
color: #fff;
border: none;
cursor: pointer;
}
footer {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
```
在你的项目中,将上面的代码复制到相应的文件中,然后更改图片和内容以符合你的商铺需求。