HTML 纯页面商城（简易版）

最新推荐文章于 2024-09-06 22:53:17 发布
最新推荐文章于 2024-09-06 22:53:17 发布
阅读量861 收藏 15
点赞数 14
文章标签： html 前端 商城
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Hello___Sunshine/article/details/140012695
版权

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="#">&laquo; 上一页</a>
                <a href="#">1</a>
                <a href="#">2</a>
                <a href="#">3</a>
                <a href="#">下一页 &raquo;</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="login" class="page-content">
            <h2>登录</h2>
            <form>
                <label for="username">用户名:</label>
                <input type="text" id="username" name="username">
                <label for="password">密码:</label>
                <input type="password" id="password" name="password">
                <button type="submit">登录</button>
            </form>
            <button id="back-to-home" data-page="home">返回首页</button>
        </div>

        <div id="register" class="page-content">
            <h2>注册</h2>
            <form>
                <label for="new-username">用户名:</label>
                <input type="text" id="new-username" name="new-username">
                <label for="new-password">密码:</label>
                <input type="password" id="new-password" name="new-password">
                <button type="submit">注册</button>
            </form>
            <button id="back-to-home" data-page="home">返回首页</button>
        </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>&copy; 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();

    function addToCart(product) {
        let cart = localStorage.getItem('cart');
        if (cart) {
            cart = JSON.parse(cart);
        } else {
            cart = [];
        }
        cart.push(product);
        localStorage.setItem('cart', JSON.stringify(cart));
        alert(`${product.name} 已加入购物车`);
        loadCart();
    }

    function loadCart() {
        const cartItemsContainer = document.querySelector('.cart-items');
        cartItemsContainer.innerHTML = '';
        let cart = localStorage.getItem('cart');
        if (cart) {
            cart = JSON.parse(cart);
            cart.forEach(product => {
                const item = document.createElement('div');
                item.classList.add('cart-item');
                item.innerHTML = `
                    <img src="${product.imgSrc}" alt="${product.name}">
                    <h3>${product.name}</h3>
                    <p>${product.price}</p>
                    <p>${product.rating}</p>
                    <button class="remove-from-cart-button">移除</button>
                `;
                cartItemsContainer.appendChild(item);
            });
        }
        document.querySelectorAll('.remove-from-cart-button').forEach(button => {
            button.addEventListener('click', () => {
                const productName = button.parentElement.querySelector('h3').innerText;
                removeFromCart(productName);
            });
        });
    }

    function removeFromCart(productName) {
        let cart = localStorage.getItem('cart');
        if (cart) {
            cart = JSON.parse(cart);
            cart = cart.filter(product => product.name !== productName);
            localStorage.setItem('cart', JSON.stringify(cart));
            alert(`${productName} 已从购物车移除`);
            loadCart();
        }
    }
});
 

说明

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

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

睡不着还起得早
关注
纯html和css制作商城页面
weixin_71587749的博客
05-09 3535
reset.css(取消特殊的格式，方便布局)main.css(防止高度塌陷)
最全的商城网页模板html
04-19
有登录，注册，个人中心，收藏夹，购物车，订单详情，待付款，售后，商品详情等等大大小小三十几个页面
静态商城模板：HTML+CSS+JavaScript+jQuery
最新发布
gitblog_09704的博客
09-06 1127
静态商城模板：HTML+CSS+JavaScript+jQuery 商城模板.rar项目地址:https://gitcode.com/open-source-toolkit/3a609 项目描述 本仓库提供了一个完整的静态商城模板，涵盖了商城网站的多个核心页面，包括首页、商品列表页、商品详情页、购物车页面、结账页面以及用户账户页面。该模板使用HTML、CSS、JavaScript和jQuery构...
html商城网站模板
live_136的博客
12-09 4456
html简单商城网站模板 首页 产品展示 公司简介 商品详细 购物车 联系我们 留言本 投诉建议 登录 注册 忘记密码 新闻 详细新闻页 网站模板下载地址 ...
网上商城html模板
06-14
典型的网上商城的模板，比较实用，简单易学，可以直接拿来就用。
HTML+CSS商城网站
weixin_64537406的博客
01-23 1480
具体内容结构，包括头部导航栏、搜索栏、主要内容区域、产品展示和页脚等部分。通过这段代码，可以看出页面包括了导航栏、搜索框、主要内容展示区域和产品展示区域，同时也指定了页面的样式表和图标。这是一个简单的 HTML 页面代码，描述了一个网站的结构。其中包括了网站的标题、导航栏、搜索栏、主要内容区域、产品展示和页脚等部分。
HTML商城主页面
06-25
小商城源代码，适合学习，基本没啥问题 适合学生下载
HTML 小游戏：简易版贪吃蛇
01-02
HTML 小游戏：简易版贪吃蛇是一款基于纯HTML、CSS和JavaScript实现的经典游戏，无需任何额外环境配置，用户可以直接在浏览器中运行。这款游戏利用了Web技术的力量，为玩家提供了在网页上重温经典游戏的体验。 HTML...
HTML纯静态企业站模版
06-15
HTML纯静态企业站模版是一种基于HTML和CSS技术构建的网站设计框架，它不依赖任何服务器端编程语言，如PHP、ASP.NET或Java等，而是通过预先编写好的HTML页面和CSS样式来展示内容。这样的模版对于小型企业或个人开发者...
html css制作404页面,CSS3绘制404页面
weixin_33380613的博客
06-03 914
标题有点噱了...最近在做一个交通有关的项目, 想做一个类似标志牌的404, 所以就有了这个.只用的CSS3中的旋转, 效果如下上代码:Error.circle {width: 200px;height: 200px;border-radius: 200px;border: 15px solid #B22727;}.circle > div {color: #B22727;font: bol...
h5+css 实现简易商城首页
12-06
在本项目中，"h5+css 实现简易商城首页"是一个使用HTML5（H5）和CSS技术构建的无JavaScript版本的电商网站主页。这个练习主要目标是掌握HTML5的标签应用和基本的网页布局技巧。下面我们将深入探讨这个项目所涉及的...
HTML-商城界面
07-22
利用table标签制作商城主网页，源码带注释。最早的网页制作就是使用table标签制作的
20个HTML商城模板2017
12-05
20个HTML商城模板，从网上购买的。有HTML5的普通wap还有微信的
购物商城 html
04-23
此项目为实操项目简化版，包含html静态页面，JS，CSS，能实现网站模板基本要求
购物商城全套html下载
05-18
全套的购物商城html模板，可用于建设简单的购物网站，共有6套不同风格的模板
html商城模板含26个页面
06-09
bootstrap框架,包含26个页面. 首页-home,包括：轮播,导航,推荐,列表展示 兼职-video,包括：兼职,视频,图文,话题,列表展示 优惠-mistiming,包括：导航,商家详情,卷详情，列表展示 美食-easylife,包括：导航,结算，购物车，地址，详情,列表展示 我的-personal,包括：登录,订单,收藏,地址,优惠卷,职位,切换,设置
手把手教你基于HTML、CSS搭建我的相册（上）
官方推荐
03-20 1万+
通过有趣的demo来带你掌握前端基础
HTML+CSS+JavaScript仿京东购物商城网站 web前端制作服装购物商城 html电商购物网站
热门推荐
VX_WJ88950106的博客
08-06 2万+
⚽精彩专栏推荐👇🏻👇🏻👇🏻 ❤ 【作者主页——🔥获取更多优质源码】 ❤ 【web前端期末大作业——🔥🔥毕设项目精品实战案例(1000套)】1 网页简介：此作品为学生个人主页网页设计题材，HTML+CSS 布局制作,web前端期末大作业,大学生网页设计作业源码，这是一个不错的网页制作，画面精明，代码为简单学生水平, 非常适合初学者学习使用。2.网页编辑：网页作品代码简单，可使用任意HTML编辑软件（如：Dreamweaver、HBuilder、Vscode 、Sublime 、Web......
网上商城模静态HTML模板
03-28
网上商城HTML模板，比较全面吧，还不错这个模板，分享一哈
html页面简易计算器
11-18
以下是一个简单的HTML页面计算器的代码示例： ```html <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>简易计算器</title> <style> input[type="button"] { width: 50px; height: 50px; font-size: 20px; margin: 5px; } input[type="text"] { width: 212px; height: 50px; font-size: 20px; margin: 5px; } </style> </head> <body> <input type="text" id="result" readonly> <br> <input type="button" value="1" onclick="addNumber('1')"> <input type="button" value="2" onclick="addNumber('2')"> <input type="button" value="3" onclick="addNumber('3')"> <input type="button" value="+" onclick="addOperator('+')"> <br> <input type="button" value="4" onclick="addNumber('4')"> <input type="button" value="5" onclick="addNumber('5')"> <input type="button" value="6" onclick="addNumber('6')"> <input type="button" value="-" onclick="addOperator('-')"> <br> <input type="button" value="7" onclick="addNumber('7')"> <input type="button" value="8" onclick="addNumber('8')"> <input type="button" value="9" onclick="addNumber('9')"> <input type="button" value="*" onclick="addOperator('*')"> <br> <input type="button" value="C" onclick="clearResult()"> <input type="button" value="0" onclick="addNumber('0')"> <input type="button" value="=" onclick="calculate()"> <input type="button" value="/" onclick="addOperator('/')"> <script> var result = document.getElementById("result"); var operator = ""; var num1 = ""; var num2 = ""; var flag = false; function addNumber(num) { if (flag) { result.value = ""; flag = false; } result.value += num; } function addOperator(op) { if (num1 == "") { num1 = result.value; } else { num2 = result.value; calculate(); num1 = result.value; } operator = op; flag = true; } function clearResult() { result.value = ""; num1 = ""; num2 = ""; operator = ""; } function calculate() { if (num1 != "" && num2 != "" && operator != "") { var res = eval(num1 + operator + num2); result.value = res; num1 = res; num2 = ""; operator = ""; flag = true; } } </script> </body> </html> ```
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值