当前位置：首页 > news >正文

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

news 来源：原创 2025/4/22 7:06:56

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

就简单的分享两个页面的截图。
源代码的内容也是有很多的这里我就简单的分享两个页面的代码，对于这个前端练习项目的源代码已经整理好了，也搭建了预览网站，有兴趣的小伙伴可以去看一下，希望能对你有所帮助：
https://wwwoop.com/home/Index/projectInfo?goodsId=72&typeParam=2&subKey=1
首页代码：


<!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>

购物车代码：


<!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>