HTML 纯页面商城（简易版）

购物商城购物商城搜索

老谭睡不着

1632人浏览 · 2024-06-30 00:15:00

老谭睡不着 · 2024-06-30 00:15:00 发布

index.html

----

<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>购物商城</title>
<link rel="stylesheet" href="styles.css">
<script defer src="scripts.js"></script>
</head>
<body>
<header>
<div class="header-top">
<div class="logo">购物商城</div>
<div class="search-bar">
<input type="text" id="search-input" placeholder="搜索商品...">
<button id="search-button">搜索</button>
</div>
<div class="user-menu">
<a href="#" id="login-button" data-page="login">登录</a> |
<a href="#" id="register-button" data-page="register">注册</a> |
<a href="#" id="cart-button" data-page="cart">购物车</a>
</div>
</div>
<nav class="main-nav">
<ul>
<li><a href="#" class="nav-link" data-page="home">首页</a></li>
<li><a href="#" class="nav-link" data-page="electronics">电子产品</a></li>
<li><a href="#" class="nav-link" data-page="books">图书</a></li>
<li><a href="#" class="nav-link" data-page="clothes">服装</a></li>
<li><a href="#" class="nav-link" data-page="furniture">家居</a></li>
</ul>
</nav>
</header>

<div class="main-content">
<aside>
<h2>商品分类</h2>
<ul id="category-list">
<li class="category-item" data-category="electronics">电子产品</li>
<li class="category-item" data-category="books">图书</li>
<li class="category-item" data-category="clothes">服装</li>
<li class="category-item" data-category="furniture">家居</li>
<li class="category-item" data-category="sports">运动</li>
<li class="category-item" data-category="toys">玩具</li>
</ul>
<h2>过滤和排序</h2>
<div class="filters">
<label for="price">价格:</label>
<select id="price-filter">
<option value="all">全部</option>
<option value="low">低到高</option>
<option value="high">高到低</option>
</select>
<label for="rating">评分:</label>
<select id="rating-filter">
<option value="all">全部</option>
<option value="high">高到低</option>
</select>
<button id="filter-button">应用过滤</button>
</div>
</aside>

<div id="home" class="page-content active">
<div class="carousel">
<img src="https://via.placeholder.com/800x300" alt="轮播图 1">
</div>
<div id="product-list" class="product-list">

<div class="product-card" data-category="electronics">
<img src="https://via.placeholder.com/150" alt="商品 1">
<h3>商品 1</h3>
<p>这是商品 1 的描述</p>
<p>价格: ¥100</p>
<div class="rating">
评分: ★★★★☆
</div>
<button class="add-to-cart-button">加入购物车</button>
</div>
<div class="product-card" data-category="books">
<img src="https://via.placeholder.com/150" alt="商品 2">
<h3>商品 2</h3>
<p>这是商品 2 的描述</p>
<p>价格: ¥150</p>
<div class="rating">
评分: ★★★★☆
</div>
<button class="add-to-cart-button">加入购物车</button>
</div>

</div>
<div class="pagination">
<a href="#">« 上一页</a>
<a href="#">1</a>
<a href="#">2</a>
<a href="#">3</a>
<a href="#">下一页 »</a>
</div>
</div>

<div id="electronics" class="page-content">
<h2>电子产品</h2>
<div class="product-list">

</div>
</div>

<div id="books" class="page-content">
<h2>图书</h2>
<div class="product-list">

</div>
</div>

<div id="clothes" class="page-content">
<h2>服装</h2>
<div class="product-list">

</div>
</div>

<div id="furniture" class="page-content">
<h2>家居</h2>
<div class="product-list">

</div>
</div>

<div id="cart" class="page-content">
<h2>购物车</h2>
<div class="cart-items">

</div>
<button id="back-to-home" data-page="home">返回首页</button>
</div>
</div>

<div class="recommended-products">
<h2>推荐商品</h2>
<div class="product-list">
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="推荐商品 1">
<h3>推荐商品 1</h3>
<p>价格: ¥200</p>
</div>
<div class="product-card">
<img src="https://via.placeholder.com/150" alt="推荐商品 2">
<h3>推荐商品 2</h3>
<p>价格: ¥250</p>
</div>
</div>
</div>

<footer>
<div class="footer-content">
<div class="footer-section">
<h2>关于我们</h2>
<p>我们是一家提供各种商品的领先购物商城。</p>
</div>
<div class="footer-section">
<h2>联系我们</h2>
<p>邮箱: support@shoppingmall.com</p>
<p>电话: +123 456 7890</p>
</div>
<div class="footer-section">
<h2>关注我们</h2>
<p>
<a href="#">微信</a> |
<a href="#">微博</a> |
<a href="#">抖音</a>
</p>
</div>
</div>
<p>© 2024 购物商城. 保留所有权利。</p>
</footer>
</body>
</html>

styles.css

---

/* styles.css */

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}

.header-top {
background-color: #333;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 1rem;
}

.header-top .logo {
font-size: 1.5rem;
}

.header-top .search-bar {
display: flex;
align-items: center;
}

.header-top .search-bar input {
padding: 0.5rem;
font-size: 1rem;
}

.header-top .search-bar button {
padding: 0.5rem;
font-size: 1rem;
background-color: #555;
color: white;
border: none;
cursor: pointer;
}

.header-top .user-menu a {
color: white;
text-decoration: none;
margin: 0 0.5rem;
}

.main-nav {
background-color: #444;
padding: 0.5rem;
}

.main-nav ul {
list-style: none;
padding: 0;
display: flex;
justify-content: center;
}

.main-nav ul li {
margin: 0 1rem;
}

.main-nav ul li a {
color: white;
text-decoration: none;
font-size: 1.1rem;
}

.main-nav ul li a.active {
font-weight: bold;
color: #ff0;
}

.main-content {
display: flex;
padding: 1rem;
}

aside {
width: 20%;
padding: 1rem;
background-color: #fff;
margin-right: 1rem;
}

aside h2 {
margin-top: 0;
}

aside ul {
list-style: none;
padding: 0;
}

aside ul li {
padding: 0.5rem 0;
cursor: pointer;
}

aside ul li.active {
font-weight: bold;
color: #333;
}

.filters {
margin-top: 1rem;
}

.filters label {
display: block;
margin-bottom: 0.5rem;
}

.filters select {
width: 100%;
padding: 0.5rem;
margin-bottom: 1rem;
}

.filters button {
padding: 0.5rem;
background-color: #555;
color: white;
border: none;
cursor: pointer;
width: 100%;
}

.content {
width: 80%;
}

.carousel img {
width: 100%;
height: auto;
margin-bottom: 1rem;
}

.product-list {
display: flex;
flex-wrap: wrap;
}

.product-card {
border: 1px solid #ddd;
padding: 1rem;
margin: 0.5rem;
width: calc(25% - 1rem);
box-sizing: border-box;
background-color: #fff;
text-align: center;
}

.product-card img {
max-width: 100%;
height: auto;
}

.product-card .rating {
margin: 0.5rem 0;
}

.product-card button {
padding: 0.5rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
width: 100%;
}

.pagination {
text-align: center;
margin: 1rem 0;
}

.pagination a {
text-decoration: none;
color: #333;
padding: 0.5rem 1rem;
border: 1px solid #ddd;
margin: 0 0.25rem;
}

.pagination a:hover {
background-color: #f4f4f4;
}

.page-content {
display: none;
}

.page-content.active {
display: block;
}

.recommended-products {
padding: 1rem;
background-color: #fff;
}

.recommended-products h2 {
text-align: center;
}

footer {
background-color: #333;
color: white;
padding: 1rem;
text-align: center;
margin-top: 1rem;
}

.footer-content {
display: flex;
justify-content: space-around;
padding-bottom: 1rem;
}

.footer-section {
width: 30%;
}

.footer-section h2 {
margin-top: 0;
}

.footer-section p {
margin: 0.5rem 0;
}

form {
display: flex;
flex-direction: column;
margin: 1rem 0;
}

form label {
margin: 0.5rem 0;
}

form input {
padding: 0.5rem;
margin: 0.5rem 0;
}

form button {
padding: 0.5rem;
background-color: #555;
color: white;
border: none;
cursor: pointer;
margin: 0.5rem 0;
}

button#back-to-home {
margin-top: 1rem;
padding: 0.5rem;
background-color: #333;
color: white;
border: none;
cursor: pointer;
}

scripts.js

----

document.addEventListener('DOMContentLoaded', () => {
// 搜索按钮点击事件
document.getElementById('search-button').addEventListener('click', () => {
const query = document.getElementById('search-input').value;
alert(`搜索: ${query}`);
// 在这里可以添加实际的搜索功能
});

// 导航栏链接点击事件
document.querySelectorAll('.nav-link').forEach(link => {
link.addEventListener('click', (event) => {
event.preventDefault();
const page = link.getAttribute('data-page');
document.querySelectorAll('.page-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(page).classList.add('active');
document.querySelectorAll('.nav-link').forEach(nav => nav.classList.remove('active'));
link.classList.add('active');
});
});

// 分类切换点击事件
document.querySelectorAll('.category-item').forEach(item => {
item.addEventListener('click', (event) => {
const category = item.getAttribute('data-category');
document.querySelectorAll('.product-card').forEach(card => {
card.style.display = card.getAttribute('data-category') === category ? 'block' : 'none';
});
// 更新当前选中的分类样式
document.querySelectorAll('.category-item').forEach(i => i.classList.remove('active'));
item.classList.add('active');
});
});

// 登录、注册和购物车按钮点击事件
document.querySelectorAll('.user-menu a').forEach(button => {
button.addEventListener('click', (event) => {
event.preventDefault();
const page = button.getAttribute('data-page');
document.querySelectorAll('.page-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(page).classList.add('active');
});
});

// 返回首页按钮点击事件
document.querySelectorAll('#back-to-home').forEach(button => {
button.addEventListener('click', (event) => {
const page = button.getAttribute('data-page');
document.querySelectorAll('.page-content').forEach(content => {
content.classList.remove('active');
});
document.getElementById(page).classList.add('active');
});
});

// 过滤按钮点击事件
document.getElementById('filter-button').addEventListener('click', () => {
const priceFilter = document.getElementById('price-filter').value;
const ratingFilter = document.getElementById('rating-filter').value;
alert(`应用过滤: 价格 ${priceFilter}, 评分 ${ratingFilter}`);
// 在这里可以添加实际的过滤功能
});

// 加入购物车按钮点击事件
document.querySelectorAll('.add-to-cart-button').forEach(button => {
button.addEventListener('click', () => {
const productCard = button.parentElement;
const product = {
name: productCard.querySelector('h3').innerText,
price: productCard.querySelector('p:nth-of-type(2)').innerText,
rating: productCard.querySelector('.rating').innerText,
imgSrc: productCard.querySelector('img').src
};
addToCart(product);
});
});

// 分页按钮点击事件
document.querySelectorAll('.pagination a').forEach(button => {
button.addEventListener('click', (event) => {
event.preventDefault();
const page = button.innerText;
alert(`跳转到第 ${page} 页`);
// 在这里可以添加实际的分页功能
});
});

// 初始化购物车
loadCart();

说明

HTML: 为每个页面内容部分（如登录、注册、购物车）添加了相应的div，并且这些div具有类page-content和唯一的ID。同时，在登录、注册和购物车页面中添加了一个返回首页的按钮。
JavaScript: 添加了点击登录、注册和购物车按钮以及返回首页按钮的事件处理程序，这些处理程序将控制页面内容的显示和隐藏。
CSS: 添加了.page-content类的样式以控制其显示和隐藏，并添加了.active类以控制当前活动的页面内容的样式。同时，表单的样式也进行了设置。

这样，当用户点击登录、注册和购物车按钮时，相应的界面会显示出来，并且用户可以通过点击“返回首页”按钮回到首页。