web前端商城模板源码如何获取与使用？-网页设计-锦华智联科技

技术栈

HTML5: 语义化标签,构建页面结构。
CSS3: 使用 Flexbox 和 Grid 布局,实现响应式设计。
JavaScript (ES6+): 实现交互功能，如轮播图、购物车、Tab切换等。
Font Awesome: 提供丰富的图标。
Google Fonts: 提供优雅的字体。

模板功能特点

响应式设计: 适配桌面、平板和手机等多种设备。
核心电商模块:
- 顶部导航栏（含搜索、用户中心、购物车）
- 轮播图
- 商品分类导航
- 新品/热销商品展示区
- 商品卡片列表
- 页脚信息
交互功能:
- 购物车: 添加商品、修改数量、删除商品、实时计算总价。
- 轮播图: 自动切换和手动切换。
- Tab切换: 用于商品分类或不同类型内容的展示。
- 商品详情页 (示例): 点击商品可跳转查看详情。

源码结构

my-shop-template/
├── index.html          # 主页面
├── css/
│   ├── style.css       # 主样式文件
│   └── responsive.css  # 响应式样式文件
├── js/
│   └── main.js         # 主要的JavaScript交互逻辑
├── images/
│   ├── banner1.jpg     # 轮播图图片
│   ├── banner2.jpg
│   ├── banner3.jpg
│   ├── product1.jpg   # 商品图片
│   ├── product2.jpg
│   └── ...             # 其他图片
└── README.md           # 项目说明文件

完整源码

`index.html` (主页面)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">我的商城 - 现代电商模板</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap">
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/responsive.css">
</head>
<body>
    <!-- 顶部导航栏 -->
    <div class="navbar">
        <div class="container">
            <div class="logo">
                <a href="index.html">MyShop</a>
            </div>
            <div class="search-bar">
                <input type="text" placeholder="搜索商品...">
                <button type="button"><i class="fas fa-search"></i></button>
            </div>
            <div class="nav-icons">
                <a href="#" class="user-icon"><i class="far fa-user"></i></a>
                <a href="#" class="cart-icon" id="cart-icon">
                    <i class="fas fa-shopping-cart"></i>
                    <span class="cart-count">0</span>
                </a>
            </div>
        </div>
    </div>
    <!-- 轮播图 -->
    <div class="slider">
        <div class="slide-container">
            <div class="slide">
                <img src="images/banner1.jpg" alt="Banner 1">
            </div>
        </div>
        <button class="prev-btn"><i class="fas fa-chevron-left"></i></button>
        <button class="next-btn"><i class="fas fa-chevron-right"></i></button>
    </div>
    <!-- 商品分类导航 -->
    <div class="category-nav">
        <div class="container">
            <a href="#" class="category-item">
                <i class="fas fa-mobile-alt"></i>
                <span>手机数码</span>
            </a>
            <a href="#" class="category-item">
                <i class="fas fa-tshirt"></i>
                <span>服装鞋包</span>
            </a>
            <a href="#" class="category-item">
                <i class="fas fa-laptop"></i>
                <span>电脑办公</span>
            </a>
            <a href="#" class="category-item">
                <i class="fas fa-home"></i>
                <span>家居家装</span>
            </a>
            <a href="#" class="category-item">
                <i class="fas fa-dumbbell"></i>
                <span>运动户外</span>
            </a>
        </div>
    </div>
    <!-- 主要内容区 -->
    <main class="main-content">
        <div class="container">
            <!-- 新品上市 -->
            <section class="products-section">
                <h2 class="section-title">新品上市</h2>
                <div class="products-grid">
                    <!-- 商品卡片 1 -->
                    <div class="product-card">
                        <img src="images/product1.jpg" alt="商品1" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">时尚蓝牙耳机</h3>
                            <div class="product-price">¥299.00</div>
                            <button class="add-to-cart-btn" data-id="1" data-name="时尚蓝牙耳机" data-price="299.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 2 -->
                    <div class="product-card">
                        <img src="images/product2.jpg" alt="商品2" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">智能手环</h3>
                            <div class="product-price">¥199.00</div>
                            <button class="add-to-cart-btn" data-id="2" data-name="智能手环" data-price="199.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 3 -->
                    <div class="product-card">
                        <img src="images/product3.jpg" alt="商品3" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">便携充电宝</h3>
                            <div class="product-price">¥89.00</div>
                            <button class="add-to-cart-btn" data-id="3" data-name="便携充电宝" data-price="89.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 4 -->
                    <div class="product-card">
                        <img src="images/product4.jpg" alt="商品4" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">无线鼠标</h3>
                            <div class="product-price">¥159.00</div>
                            <button class="add-to-cart-btn" data-id="4" data-name="无线鼠标" data-price="159.00">加入购物车</button>
                        </div>
                    </div>
                </div>
            </section>
            <!-- 热销商品 -->
            <section class="products-section">
                <h2 class="section-title">热销商品</h2>
                <div class="products-grid">
                    <!-- 商品卡片 5 -->
                    <div class="product-card">
                        <img src="images/product5.jpg" alt="商品5" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">机械键盘</h3>
                            <div class="product-price">¥399.00</div>
                            <button class="add-to-cart-btn" data-id="5" data-name="机械键盘" data-price="399.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 6 -->
                    <div class="product-card">
                        <img src="images/product6.jpg" alt="商品6" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">4K显示器</h3>
                            <div class="product-price">¥1899.00</div>
                            <button class="add-to-cart-btn" data-id="6" data-name="4K显示器" data-price="1899.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 7 -->
                    <div class="product-card">
                        <img src="images/product7.jpg" alt="商品7" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">运动水杯</h3>
                            <div class="product-price">¥59.00</div>
                            <button class="add-to-cart-btn" data-id="7" data-name="运动水杯" data-price="59.00">加入购物车</button>
                        </div>
                    </div>
                    <!-- 商品卡片 8 -->
                    <div class="product-card">
                        <img src="images/product8.jpg" alt="商品8" class="product-img">
                        <div class="product-info">
                            <h3 class="product-name">护肤套装</h3>
                            <div class="product-price">¥259.00</div>
                            <button class="add-to-cart-btn" data-id="8" data-name="护肤套装" data-price="259.00">加入购物车</button>
                        </div>
                    </div>
                </div>
            </section>
        </div>
    </main>
    <!-- 页脚 -->
    <footer class="footer">
        <div class="container">
            <div class="footer-content">
                <div class="footer-column">
                    <h4>关于我们</h4>
                    <p>MyShop 是一个致力于提供优质商品和卓越服务的在线商城。</p>
                </div>
                <div class="footer-column">
                    <h4>快速链接</h4>
                    <ul>
                        <li><a href="#">首页</a></li>
                        <li><a href="#">商品分类</a></li>
                        <li><a href="#">关于我们</a></li>
                        <li><a href="#">联系我们</a></li>
                    </ul>
                </div>
                <div class="footer-column">
                    <h4>联系方式</h4>
                    <p><i class="fas fa-phone"></i> +86 123 4567 8901</p>
                    <p><i class="fas fa-envelope"></i> support@myshop.com</p>
                </div>
            </div>
            <div class="footer-bottom">
                <p>&copy; 2025 MyShop. All Rights Reserved.</p>
            </div>
        </div>
    </footer>
    <!-- 购物车侧边栏 -->
    <div class="cart-sidebar" id="cart-sidebar">
        <div class="cart-header">
            <h3>我的购物车</h3>
            <span class="close-cart">&times;</span>
        </div>
        <div class="cart-items">
            <!-- 购物车商品将通过JS动态添加 -->
            <p class="empty-cart">购物车是空的</p>
        </div>
        <div class="cart-footer">
            <div class="cart-total">
                总计: <span id="cart-total-price">¥0.00</span>
            </div>
            <button class="checkout-btn">去结算</button>
        </div>
    </div>
    <script src="js/main.js"></script>
</body>
</html>

`css/style.css` (主样式文件)

/* --- 全局样式和变量 --- */
:root {
    --primary-color: #ff6347;
    --secondary-color: #333;
    --background-color: #f4f4f4;
    --text-color: #333;
    --box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins', sans-serif;
}
body {
    background-color: var(--background-color);
}
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
}
a {
    text-decoration: none;
    color: var(--secondary-color);
}
img {
    max-width: 100%;
    display: block;
}
.section-title {
    font-size: 2rem;
    margin-bottom: 2rem;
    text-align: center;
    color: var(--secondary-color);
}
/* --- 顶部导航栏 --- */
.navbar {
    background-color: white;
    padding: 1rem 0;
    box-shadow: var(--box-shadow);
    position: sticky;
    top: 0;
    z-index: 1000;
}
.navbar .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.logo a {
    font-size: 1.8rem;
    font-weight: 700;
    color: var(--primary-color);
}
.search-bar {
    flex-grow: 1;
    margin: 0 2rem;
    position: relative;
}
.search-bar input {
    width: 100%;
    padding: 0.8rem 1.2rem;
    border: 1px solid #ddd;
    border-radius: 25px;
    outline: none;
}
.search-bar button {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    background: none;
    border: none;
    color: #888;
    cursor: pointer;
}
.nav-icons {
    display: flex;
    gap: 1.5rem;
}
.nav-icons a {
    font-size: 1.2rem;
    color: var(--secondary-color);
    position: relative;
}
.cart-count {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: var(--primary-color);
    color: white;
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: 50%;
}
/* --- 轮播图 --- */
.slider {
    position: relative;
    height: 400px;
    overflow: hidden;
    margin-bottom: 3rem;
}
.slide {
    width: 100%;
    height: 100%;
}
.slide img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.prev-btn, .next-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    background-color: rgba(0, 0, 0, 0.5);
    color: white;
    border: none;
    padding: 1rem;
    cursor: pointer;
    font-size: 1.2rem;
}
.prev-btn { left: 10px; }
.next-btn { right: 10px; }
/* --- 商品分类导航 --- */
.category-nav {
    display: flex;
    justify-content: space-around;
    background-color: white;
    padding: 1rem 0;
    margin-bottom: 3rem;
    box-shadow: var(--box-shadow);
}
.category-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    color: var(--secondary-color);
    transition: color 0.3s;
}
.category-item:hover {
    color: var(--primary-color);
}
.category-item i {
    font-size: 2rem;
    margin-bottom: 0.5rem;
}
.category-item span {
    font-size: 0.9rem;
}
/* --- 商品展示区 --- */
.products-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
    gap: 2rem;
}
.product-card {
    background-color: white;
    border-radius: 8px;
    overflow: hidden;
    box-shadow: var(--box-shadow);
    transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
}
.product-img {
    height: 250px;
    object-fit: cover;
}
.product-info {
    padding: 1.5rem;
}
.product-name {
    font-size: 1rem;
    margin-bottom: 0.5rem;
    color: var(--secondary-color);
}
.product-price {
    font-size: 1.2rem;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 1rem;
}
.add-to-cart-btn {
    width: 100%;
    padding: 0.8rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-weight: 500;
    transition: background-color 0.3s;
}
.add-to-cart-btn:hover {
    background-color: #e55a3c;
}
/* --- 页脚 --- */
.footer {
    background-color: var(--secondary-color);
    color: white;
    padding: 3rem 0 1rem;
    margin-top: 4rem;
}
.footer-content {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 2rem;
    margin-bottom: 2rem;
}
.footer-column h4 {
    margin-bottom: 1rem;
    font-size: 1.2rem;
}
.footer-column p, .footer-column ul li {
    line-height: 1.8;
}
.footer-column ul li a {
    color: #ccc;
    transition: color 0.3s;
}
.footer-column ul li a:hover {
    color: white;
}
.footer-bottom {
    text-align: center;
    padding-top: 1rem;
    border-top: 1px solid #555;
    color: #aaa;
}
/* --- 购物车侧边栏 --- */
.cart-sidebar {
    position: fixed;
    top: 0;
    right: -400px; /* 默认隐藏 */
    width: 400px;
    height: 100vh;
    background-color: white;
    box-shadow: -2px 0 10px rgba(0,0,0,0.1);
    display: flex;
    flex-direction: column;
    transition: right 0.3s ease-in-out;
    z-index: 1001;
}
.cart-sidebar.active {
    right: 0;
}
.cart-header {
    padding: 1.5rem;
    border-bottom: 1px solid #eee;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.cart-header h3 {
    font-size: 1.5rem;
}
.close-cart {
    font-size: 1.5rem;
    cursor: pointer;
    color: #888;
}
.cart-items {
    flex-grow: 1;
    padding: 1rem;
    overflow-y: auto;
}
.cart-item {
    display: flex;
    align-items: center;
    padding: 1rem 0;
    border-bottom: 1px solid #eee;
}
.cart-item img {
    width: 60px;
    height: 60px;
    object-fit: cover;
    margin-right: 1rem;
}
.cart-item-details {
    flex-grow: 1;
}
.cart-item-name {
    font-weight: 500;
    margin-bottom: 0.5rem;
}
.cart-item-price {
    color: var(--primary-color);
}
.cart-item-quantity {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
}
.quantity-btn {
    width: 25px;
    height: 25px;
    border: 1px solid #ddd;
    background: none;
    cursor: pointer;
    border-radius: 3px;
}
.remove-item {
    color: #ff4d4d;
    cursor: pointer;
    margin-left: 1rem;
}
.empty-cart {
    text-align: center;
    color: #888;
    padding: 2rem 0;
}
.cart-footer {
    padding: 1.5rem;
    border-top: 2px solid #eee;
}
.cart-total {
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
    text-align: right;
}
.checkout-btn {
    width: 100%;
    padding: 1rem;
    background-color: var(--primary-color);
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
}

`css/responsive.css` (响应式样式文件)

/* --- 平板设备 (768px 及以下) --- */
@media (max-width: 768px) {
    .navbar .container {
        flex-wrap: wrap;
    }
    .search-bar {
        order: 3;
        flex-basis: 100%;
        margin: 1rem 0 0 0;
    }
    .category-nav {
        flex-wrap: wrap;
    }
    .category-item {
        flex: 1 1 33%;
        padding: 0.5rem;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        gap: 1rem;
    }
    .footer-content {
        grid-template-columns: 1fr;
        text-align: center;
    }
}
/* --- 手机设备 (480px 及以下) --- */
@media (max-width: 480px) {
    .logo a {
        font-size: 1.5rem;
    }
    .slider {
        height: 250px;
    }
    .products-grid {
        grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    }
    .cart-sidebar {
        width: 100%;
    }
}

`js/main.js` (主要交互逻辑)

document.addEventListener('DOMContentLoaded', () => {
    // 购物车功能
    const cartIcon = document.getElementById('cart-icon');
    const cartSidebar = document.getElementById('cart-sidebar');
    const closeCartBtn = document.querySelector('.close-cart');
    const addToCartBtns = document.querySelectorAll('.add-to-cart-btn');
    const cartItemsContainer = document.querySelector('.cart-items');
    const cartCount = document.querySelector('.cart-count');
    const cartTotalPrice = document.getElementById('cart-total-price');
    const emptyCartMsg = document.querySelector('.empty-cart');
    let cart = [];
    // 打开/关闭购物车侧边栏
    cartIcon.addEventListener('click', () => {
        cartSidebar.classList.add('active');
    });
    closeCartBtn.addEventListener('click', () => {
        cartSidebar.classList.remove('active');
    });
    // 添加商品到购物车
    addToCartBtns.forEach(btn => {
        btn.addEventListener('click', () => {
            const id = btn.getAttribute('data-id');
            const name = btn.getAttribute('data-name');
            const price = parseFloat(btn.getAttribute('data-price'));
            const existingItem = cart.find(item => item.id === id);
            if (existingItem) {
                existingItem.quantity += 1;
            } else {
                cart.push({
                    id: id,
                    name: name,
                    price: price,
                    quantity: 1
                });
            }
            updateCart();
        });
    });
    // 更新购物车显示
    function updateCart() {
        cartItemsContainer.innerHTML = '';
        let total = 0;
        let itemCount = 0;
        if (cart.length === 0) {
            emptyCartMsg.style.display = 'block';
        } else {
            emptyCartMsg.style.display = 'none';
            cart.forEach(item => {
                total += item.price * item.quantity;
                itemCount += item.quantity;
                const cartItemEl = document.createElement('div');
                cartItemEl.classList.add('cart-item');
                cartItemEl.innerHTML = `
                    <img src="images/product${item.id}.jpg" alt="${item.name}">
                    <div class="cart-item-details">
                        <div class="cart-item-name">${item.name}</div>
                        <div class="cart-item-price">¥${item.price.toFixed(2)}</div>
                        <div class="cart-item-quantity">
                            <button class="quantity-btn" data-id="${item.id}" data-action="decrease">-</button>
                            <span>${item.quantity}</span>
                            <button class="quantity-btn" data-id="${item.id}" data-action="increase">+</button>
                            <span class="remove-item" data-id="${item.id}"><i class="fas fa-trash-alt"></i></span>
                        </div>
                    </div>
                `;
                cartItemsContainer.appendChild(cartItemEl);
            });
        }
        cartCount.textContent = itemCount;
        cartTotalPrice.textContent = `¥${total.toFixed(2)}`;
        // 为新增的按钮添加事件监听
        attachCartEventListeners();
    }
    // 为购物车内的按钮添加事件监听
    function attachCartEventListeners() {
        // 数量增减按钮
        document.querySelectorAll('.quantity-btn').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = e.target.getAttribute('data-id');
                const action = e.target.getAttribute('data-action');
                const item = cart.find(item => item.id === id);
                if (action === 'increase') {
                    item.quantity += 1;
                } else if (action === 'decrease' && item.quantity > 1) {
                    item.quantity -= 1;
                }
                updateCart();
            });
        });
        // 删除按钮
        document.querySelectorAll('.remove-item').forEach(btn => {
            btn.addEventListener('click', (e) => {
                const id = e.target.getAttribute('data-id');
                cart = cart.filter(item => item.id !== id);
                updateCart();
            });
        });
    }
    // 轮播图功能
    const slides = document.querySelector('.slide-container');
    const prevBtn = document.querySelector('.prev-btn');
    const nextBtn = document.querySelector('.next-btn');
    let currentSlide = 0;
    const slideImages = document.querySelectorAll('.slide img');
    const totalSlides = slideImages.length;
    function showSlide(index) {
        if (index >= totalSlides) currentSlide = 0;
        if (index < 0) currentSlide = totalSlides - 1;
        slides.style.transform = `translateX(-${currentSlide * 100}%)`;
    }
    nextBtn.addEventListener('click', () => {
        currentSlide++;
        showSlide(currentSlide);
    });
    prevBtn.addEventListener('click', () => {
        currentSlide--;
        showSlide(currentSlide);
    });
    // 自动轮播
    setInterval(() => {
        currentSlide++;
        showSlide(currentSlide);
    }, 5000);
});

如何使用

创建文件夹: 在你的电脑上创建一个名为 my-shop-template 的文件夹。
创建子文件夹: 在 my-shop-template 文件夹内，分别创建 css、js 和 images 三个子文件夹。
保存文件: 将上面的代码分别复制并保存到对应的文件中：
- index.html 放在 my-shop-template 根目录。
- style.css 放在 css 文件夹内。
- responsive.css 放在 css 文件夹内。
- main.js 放在 js 文件夹内。
准备图片: 你需要准备一些图片，命名为 banner1.jpg, banner2.jpg, product1.jpg, product2.jpg 等，并将它们放入 images 文件夹，你可以从网上免费图片库（如 Unsplash, Pexels）下载一些合适的图片来代替。
打开网页: 用浏览器（如 Chrome, Firefox）打开 index.html 文件,你就可以看到这个商城模板了。

如何扩展和修改

修改颜色: 在 style.css 文件的开头，root 选择器中定义了 CSS 变量，你可以通过修改 --primary-color 等变量来快速改变网站的主题色。
添加新商品: 只需在 index.html 中复制一个 .product-card 的 div，并修改其中的图片路径、商品名称和价格即可。
增加页面: 你可以创建新的 HTML 文件（如 product-detail.html, about.html）,并添加相应的导航链接。
连接后端: 目前这个模板是纯前端，数据是静态的，要实现真正的电商功能，你需要使用 Vue.js 或 React 等前端框架，并连接到后端 API（如 Node.js, Python, Java）来动态获取商品数据、处理用户登录、订单等。

希望这套完整的源码能帮助你快速搭建一个漂亮的商城前端！

（图片来源网络，侵删）

web前端商城模板源码如何获取与使用？

技术栈

模板功能特点

源码结构

完整源码

index.html (主页面)

css/style.css (主样式文件)

css/responsive.css (响应式样式文件)

js/main.js (主要交互逻辑)

如何使用

如何扩展和修改

`index.html` (主页面)

`css/style.css` (主样式文件)

`css/responsive.css` (响应式样式文件)

`js/main.js` (主要交互逻辑)