生成一个简单的商城页面的html+css+js代码
时间: 2023-08-03 09:04:58 浏览: 56
以下是一个简单的商城页面的HTML、CSS和JavaScript代码:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>My Online Store</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<header>
<h1>Welcome to My Online Store</h1>
<nav>
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
</ul>
</nav>
</header>
<main>
<section>
<h2>Featured Products</h2>
<ul>
<li>
<img src="product1.jpg" alt="Product 1">
<h3>Product 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
<li>
<img src="product2.jpg" alt="Product 2">
<h3>Product 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
<li>
<img src="product3.jpg" alt="Product 3">
<h3>Product 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
</ul>
</section>
<section>
<h2>Latest Products</h2>
<ul>
<li>
<img src="product4.jpg" alt="Product 4">
<h3>Product 4</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
<li>
<img src="product5.jpg" alt="Product 5">
<h3>Product 5</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
<li>
<img src="product6.jpg" alt="Product 6">
<h3>Product 6</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non risus.</p>
<button class="add-to-cart-btn">Add to Cart</button>
</li>
</ul>
</section>
</main>
<footer>
<p>© 2021 My Online Store. All rights reserved.</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
}
h1 {
margin: 0;
}
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
color: #fff;
text-decoration: none;
}
main {
margin: 20px;
}
section {
margin-bottom: 40px;
}
h2 {
margin-top: 0;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 20px;
text-align: center;
}
li img {
max-width: 200px;
}
li h3 {
margin: 10px 0;
}
li p {
margin: 0;
}
.add-to-cart-btn {
background-color: #f00;
border: none;
color: #fff;
cursor: pointer;
padding: 10px 20px;
}
```
JavaScript代码:
```javascript
let cartItems = 0;
document.querySelectorAll('.add-to-cart-btn').forEach(button => {
button.addEventListener('click', () => {
cartItems++;
alert(`Added to cart. Total items in cart: ${cartItems}`);
});
});
```
该页面包括一个标题、导航菜单、两个产品列表(一个是精选产品,另一个是最新产品)和页脚。每个产品都有一个图像、名称、描述和“添加到购物车”按钮。当用户单击“添加到购物车”按钮时,页面会显示一个警报框,指示添加到购物车中的商品数量。CSS样式使页面看起来更好,而JavaScript代码处理添加到购物车的逻辑。