使用纯前端技术html+css+js实现一个蔬果商城的前端模板！

当我们刚开始学习前端的时候，我们都会先学习一些基础的编程知识点。对于网站开发前端学习，我们就会学习 html css js 等基础的前端技术，我们学习了基础编程知识后，肯定是需要一些项目，或者一些练习题，巩固一下我们学习到的编程知识，让我们学到的编程知识立马可以运用到实际的项目开发中。今天就给大家分享一个最近我在学前端技术，使用 html css js 写的一个 蔬果商城的前端网站。

先给大家看一下网站的样式：

就简单的分享两个页面的截图。

源代码的内容也是有很多的这里我就简单的分享两个页面的代码，对于这个前端练习项目的源代码已经整理好了，也搭建了预览网站，有兴趣的小伙伴可以去看一下，希望能对你有所帮助：

wwwoop.com/home/Index/...

首页代码：

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>XX买菜商城 - 新鲜健康每一天</title>
    <link rel="stylesheet" href="./css/index.css">
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">XX买菜</div>
            <ul class="nav-links">
                <li><a href="index.html">新鲜蔬果</a></li>
                <li><a href="category.html">品类精选</a></li>
                <li><a href="hot.html">热销推荐</a></li>
                <li><a href="garden.html">蔬果广场</a></li>
                <li><a href="cart.html">购物车</a></li>
                <li><a href="account.html">个人中心</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <section class="banner">
            <div class="slider">
                <img src="./images/轮播1.jpg" alt="新鲜水果">
                <img src="./images/轮播2.jpg" alt="时令蔬菜">
                <img src="./images/轮播3.jpg" alt="优质商品">
            </div>
        </section>

        <section class="featured-products">
            <h2>精选商品</h2>
            <div class="product-grid">
                <div class="product-card">
                    <a href="detail.html">
                        <img src="./images/草莓.jpg" alt="草莓">
                    </a>
        
                    <h3>新鲜草莓</h3>
                    <p>精选优质草莓，酸甜可口</p>
                    <span class="price">¥29.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/香蕉.jpg" alt="香蕉">
                    </a>
                    <h3>香甜香蕉</h3>
                    <p>天然成熟，香甜可口</p>
                    <span class="price">¥5.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/大白菜.jpg" alt="大白菜">
                </a>
                    <h3>新鲜大白菜</h3>
                    <p>当季蔬菜，清脆爽口</p>
                    <span class="price">¥2.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/西红柿.jpg" alt="西红柿">
                    </a>
                    <h3>红润西红柿</h3>
                    <p>生态种植，营养美味</p>
                    <span class="price">¥4.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                        <img src="./images/草莓.jpg" alt="草莓">
                    </a>
        
                    <h3>新鲜草莓</h3>
                    <p>精选优质草莓，酸甜可口</p>
                    <span class="price">¥29.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/西兰花.jpg" alt="香蕉">
                    </a>
                    <h3>西兰花</h3>
                    <p>天然成熟，香甜可口</p>
                    <span class="price">¥5.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/大白菜.jpg" alt="大白菜">
                </a>
                    <h3>新鲜大白菜</h3>
                    <p>当季蔬菜，清脆爽口</p>
                    <span class="price">¥2.9/斤</span>
                </div>
                <div class="product-card">
                    <a href="detail.html">
                    <img src="./images/菠菜.jpg" alt="西红柿">
                    </a>
                    <h3>菠菜</h3>
                    <p>生态种植，营养美味</p>
                    <span class="price">¥4.9/斤</span>
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2024 XX买菜商城 版权所有</p>
        </div>
    </footer>

    <script src="./js/index.js"></script>
</body>
</html>

购物车代码：

xml 复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>购物车 - XX买菜商城</title>
    <link rel="stylesheet" href="./css/cart.css">
</head>
<body>
    <header>
        <nav class="main-nav">
            <div class="logo">XX买菜</div>
            <ul class="nav-links">
                <li><a href="index.html">新鲜蔬果</a></li>
                <li><a href="category.html">品类精选</a></li>
                <li><a href="hot.html">热销推荐</a></li>
                <li><a href="garden.html">蔬果广场</a></li>
                <li><a href="cart.html">购物车</a></li>
                <li><a href="account.html">个人中心</a></li>
            </ul>
        </nav>
    </header>

    <main>
        <div class="container">
            <h1>购物车</h1>
            <div class="cart-content">
                <div class="cart-header">
                    <label class="select-all">
                        <input type="checkbox" id="selectAll">
                        <span>全选</span>
                    </label>
                    <span class="product-info">商品信息</span>
                    <span class="unit-price">单价</span>
                    <span class="quantity">数量</span>
                    <span class="subtotal">小计</span>
                    <span class="operation">操作</span>
                </div>
                <div class="cart-items" id="cartItems">
                    <!-- 购物车商品列表将通过JavaScript动态生成 -->
                </div>
                <div class="cart-footer">
                    <div class="cart-tools">
                        <button id="deleteSelected" class="btn-delete">删除选中商品</button>
                        <button id="clearCart" class="btn-clear">清空购物车</button>
                    </div>
                    <div class="cart-total">
                        <div class="total-info">
                            <span>已选商品 <span id="selectedCount">0</span> 件</span>
                            <span>合计：<span class="total-price" id="totalPrice">¥0.00</span></span>
                        </div>
                        <button id="checkout" class="btn-checkout">结算</button>
                    </div>
                </div>
            </div>
        </div>
    </main>

    <footer>
        <div class="footer-content">
            <p>© 2024 XX买菜商城 版权所有</p>
        </div>
    </footer>

    <script src="./js/cart.js"></script>
</body>
</html>