通过html,css,js生成一个商城页面用
时间: 2024-01-01 16:03:27 浏览: 32
好的,下面是一个简单的商城页面示例,使用了HTML、CSS和JavaScript:
HTML代码:
```html
<!DOCTYPE html>
<html>
<head>
<title>商城页面</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<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>
</header>
<main>
<div class="container">
<h2>商品列表</h2>
<section class="products">
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品1">
<h3>商品1</h3>
<p>商品描述1</p>
<p>价格:100元</p>
<button class="add-to-cart">加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品2">
<h3>商品2</h3>
<p>商品描述2</p>
<p>价格:200元</p>
<button class="add-to-cart">加入购物车</button>
</div>
<div class="product">
<img src="https://via.placeholder.com/150x150" alt="商品3">
<h3>商品3</h3>
<p>商品描述3</p>
<p>价格:300元</p>
<button class="add-to-cart">加入购物车</button>
</div>
</section>
<aside class="cart">
<h2>购物车</h2>
<ul class="cart-items">
<li>购物车为空</li>
</ul>
<p class="cart-total">总价:0元</p>
<button class="checkout">结算</button>
</aside>
</div>
</main>
<footer>
<p>版权所有 © 商城页面</p>
</footer>
<script src="script.js"></script>
</body>
</html>
```
CSS代码:
```css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: Arial, sans-serif;
font-size: 16px;
color: #333;
line-height: 1.5;
background-color: #f2f2f2;
}
.container {
max-width: 1000px;
margin: 0 auto;
padding: 0 20px;
}
header {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px 0;
}
header h1 {
display: inline-block;
margin-right: 20px;
}
nav ul {
list-style: none;
}
nav li {
display: inline-block;
margin-right: 20px;
}
nav a {
text-decoration: none;
color: #333;
}
nav a:hover {
color: #f00;
}
main {
padding: 40px 0;
}
h2 {
margin-bottom: 20px;
}
.products {
display: flex;
flex-wrap: wrap;
}
.product {
flex-basis: calc(33.33% - 20px);
margin-right: 20px;
margin-bottom: 20px;
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
}
.product img {
display: block;
margin-bottom: 10px;
}
.add-to-cart {
background-color: #f00;
color: #fff;
border: none;
padding: 10px;
margin-top: 10px;
cursor: pointer;
}
.add-to-cart:hover {
background-color: #ff4d4d;
}
.cart {
background-color: #fff;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
padding: 20px;
margin-top: 40px;
flex-basis: calc(33.33% - 20px);
}
.cart h2 {
margin-bottom: 20px;
}
.cart-items {
list-style: none;
margin-bottom: 20px;
}
.cart-items li {
margin-bottom: 10px;
}
.cart-total {
font-weight: bold;
margin-bottom: 10px;
}
.checkout {
background-color: #f00;
color: #fff;
border: none;
padding: 10px;
cursor: pointer;
}
.checkout:hover {
background-color: #ff4d4d;
}
footer {
background-color: #fff;
box-shadow: 0 -2px 5px rgba(0, 0, 0, 0.1);
padding: 20px 0;
text-align: center;
}
```
JavaScript代码:
```javascript
// 获取DOM元素
const cart = document.querySelector('.cart');
const cartItems = document.querySelector('.cart-items');
const cartTotal = document.querySelector('.cart-total');
const checkoutButton = document.querySelector('.checkout');
const addToCartButtons = document.querySelectorAll('.add-to-cart');
// 购物车数据
let cartData = [];
// 更新购物车
function updateCart() {
// 清空购物车
cartItems.innerHTML = '';
// 计算总价
let total = 0;
for (let i = 0; i < cartData.length; i++) {
total += cartData[i].price;
// 创建购物车项
const item = document.createElement('li');
item.innerText = cartData[i].name;
cartItems.appendChild(item);
}
// 更新总价
cartTotal.innerText = `总价:${total}元`;
// 显示/隐藏购物车
if (cartData.length > 0) {
cart.style.display = 'block';
} else {
cart.style.display = 'none';
}
}
// 添加到购物车
function addToCart(event) {
// 获取商品信息
const product = event.target.parentNode;
const name = product.querySelector('h3').innerText;
const price = parseInt(product.querySelector('p:last-of-type').innerText);
// 添加到购物车数据
cartData.push({name: name, price: price});
// 更新购物车
updateCart();
}
// 结算
function checkout() {
alert(`结算成功!总价:${cartTotal.innerText}`);
// 清空购物车数据
cartData = [];
// 更新购物车
updateCart();
}
// 绑定事件
for (let i = 0; i < addToCartButtons.length; i++) {
addToCartButtons[i].addEventListener('click', addToCart);
}
checkoutButton.addEventListener('click', checkout);
```
这是一个简单的商城页面,包括商品列表、购物车和结算功能。可以根据需求添加更多功能和样式。