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

HTML5好看的花店商城源码3

news 来源：原创 2024/9/20 13:48:07

文章目录

1.设计来源
- 1.1 主界面
- 1.2 登录界面
- 1.3 注册界面
- 1.4 商品列表界面
- 1.5 商品详细界面
- 1.6 购物车界面
- 1.7 团队介绍界面
- 1.8 关于我们界面
- 1.9 其他界面效果汇总
2.效果和源码
- 2.1 动态效果
- 2.2 源代码
源码下载
万套模板，程序开发，在线开发，在线沟通

作者：xcLeigh
文章地址：https://blog.csdn.net/weixin_43151418/article/details/141814278

HTML5好看的花店商城源码3，花店商城源码，最全商城模板，花店模板，一款大气的网上花店/鲜花店购物商城HTML模板，内置三十个模板页面，覆盖各种商城需求页面，，酷炫的界面效果，简易的整体风格，实现了商店的所需功能，登录，注册，网格列表，信息列表，我的订单，轮播图，表单，导航菜单，购物车，列表等，注释完整，代码规范，各种风格都有，代码上手简单，代码独立，可以直接运行使用。也可直接预览效果。

1.设计来源

花店商城系列的第三个风格版，总共有三个版本，三种风格。

该系列所有文章源码【三种风格，总有一款适合你】
HTML5好看的花店商城源码1(附源码)
HTML5好看的花店商城源码2(附源码)
HTML5好看的花店商城源码3(附源码)【当前文章】

1.1 主界面

在这里插入图片描述

1.2 登录界面

在这里插入图片描述

1.3 注册界面

在这里插入图片描述

1.4 商品列表界面

列表方式1 - 信息列表

在这里插入图片描述

列表方式2 - GRID列表

在这里插入图片描述

1.5 商品详细界面

在这里插入图片描述

1.6 购物车界面

在这里插入图片描述

1.7 团队介绍界面

在这里插入图片描述

1.8 关于我们界面

在这里插入图片描述

1.9 其他界面效果汇总

在这里插入图片描述

更多界面效果，看下面的视频演示动态效果，或者下载源码体验吧。其他更多资源尽在 xcLeigh博客，如有相关技术问题，欢迎私信博主。

2.效果和源码

2.1 动态效果

这里是完整的效果演示，可在此代码基础上更加完善功能，支持扩展自己的风格，可以删减内容，打造属于自己的花店商城。

HTML5好看的花店商城源码3

2.2 源代码

这里是主界面的代码，其他图片、js、css等代码，见下面的 源码下载 ，里面有所有代码资源和相关说明。

<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>心仪花店</title> <link rel="stylesheet" href="static/css/fonts.css"><link rel="stylesheet" href="static/css/all.min.css"><link rel="stylesheet" href="static/css/swiper-bundle.min.css"><link rel="stylesheet" href="static/css/main.css"><link rel="stylesheet" href="static/css/responsive.css">
</head>
<body><div class="pre-loader"><div id="loader"><img src="static/picture/Logo.png" alt=""></div></div><a href="#" class="scroll-top"><i class="fas fa-long-arrow-alt-up"></i></a><header><div class="header"><a class="logo" href="index.html"><img src="static/picture/Logo.png" alt="logo"><div class="logo-name"><h2>鲜花</h2><p>心仪花店</p></div></a><nav class="navbar"><a class="nav-btn" href="index.html">首页</a><div class="dropdown-menu"><button class="nav-btn">关于我们 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="About.html">关于我们</a><a href="Team.html">商店团队</a><a href="Team-Single.html">团队信息</a><a href="Testimonials.html">相关证书</a><a href="Faqs.html">常见问题</a></div></div><div class="dropdown-menu"><button class="nav-btn">常用页面 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="Gallery.html">鲜花画廊</a><a href="Login.html">登录页面</a><a href="Register.html">注册页面</a><a href="Reset-Password.html">忘记密码</a><a href="Change-Password.html">修改密码</a><a href="Profile.html">个人信息</a><a href="Edit-Profile.html">编辑个人信息</a><a href="Edit-Address.html">编辑地址</a></div></div><div class="dropdown-menu"><button class="nav-btn">店内服务 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="Services.html">店内服务</a><a href="Service-Single.html">服务信息</a></div></div><div class="dropdown-menu"><button class="nav-btn">鲜花服务 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="Portfolio.html">鲜花服务</a><a href="Portfolio-Single.html">鲜花信息</a></div></div><!-- Dropdown Menu: Blog --><div class="dropdown-menu"><button class="nav-btn">鲜花博客 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="Blog-Grid.html">网格博客</a><a href="Blog-List.html">列表博客</a><a href="Blog-Single.html">博客信息</a></div></div><!-- Dropdown Menu: Shop --><div class="dropdown-menu"><button class="nav-btn">商店 <i class="fas fa-angle-down"></i> </button><div class="dropdown-content"><a href="Shop-Grid.html">商店网格</a><a href="Shop-List.html">商店列表</a><a href="Product-Single.html">鲜花信息</a><a href="Wishlist.html">愿望列表</a><a href="Cart.html">购物车</a><a href="Checkout.html">结算</a><a href="Order-List.html">订单列表</a><a href="Order-Single.html">订单信息</a></div></div><!-- Contact Link --><a class="nav-btn" href="Contact.html">联系我们</a></nav> <!-- == Action Container == --><div class="icon-container"> <div id="search-btn" class="icon fa-solid fa-magnifying-glass"></div> <!-- Search Icon --><a href="Wishlist.html" class="icon fa-regular fa-heart"></a> <!-- Wishlist Page Link --><a href="Cart.html" id="cart"> <!-- Cart Page Link --><i class="icon fas fa-shopping-cart"></i><span class="badge">5</span> <!-- Cart Items Count (Badge) --></a><div id="menu-btn" class="icon fa-solid fa-bars-staggered"></div> <!-- Menu Bar Icon --></div><!-- == Search Container == --><form class="search-container"><input type="search" id="search-bar" placeholder="输入查找的内容" required=""> <!-- Search Input --><button type="submit"><i class="fas fa-search"></i></button> <!-- Submit Button --></form></div><!-- ===== Header Area (End) ===== --><!-- ===== Mobile Menu Area (Start) ===== --><div class="mobile-menu"> <!-- == Close Icon for Mobile Menu == --><div id="close-side-bar" class="fas fa-times"></div><!-- == Mobile Navbar == --><nav class="mobile-navbar"><!-- Home Link --><div class="nav-link"><div class="main-nav-link"> <a class="nav-btn" href="index.html">首页</a> </div></div>   <!-- Mobile Dropdown Menu: About --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">关于我们</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="About.html">关于我们</a><a href="Team.html">商店团队</a><a href="Team-Single.html">团队信息</a><a href="Testimonials.html">相关证书</a><a href="Faqs.html">常见问题</a></div></div> <!-- Mobile Dropdown Menu: Pages --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">常用页面</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="Gallery.html">鲜花画廊</a><a href="Login.html">登录页面</a><a href="Register.html">注册页面</a><a href="Reset-Password.html">忘记密码</a><a href="Change-Password.html">修改密码</a><a href="Profile.html">个人信息</a><a href="Edit-Profile.html">编辑个人信息</a><a href="Edit-Address.html">编辑地址</a></div></div> <!-- Mobile Dropdown Menu: Service --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">店内服务</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="Services.html">店内服务</a><a href="Service-Single.html">服务信息</a></div></div><!-- Mobile Dropdown Menu: Portfolio --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">鲜花服务</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="Portfolio.html">鲜花服务</a><a href="Portfolio-Single.html">鲜花信息</a></div></div><!-- Mobile Dropdown Menu: Blog --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">鲜花博客</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="Blog-Grid.html">网格博客</a><a href="Blog-List.html">列表博客</a><a href="Blog-Single.html">博客信息</a></div></div> <!-- Mobile Dropdown Menu: Shop --><div class="nav-link"><div class="main-nav-link"> <div class="nav-btn">商店</div> <i class="fas fa-plus"></i> </div><div class="sub-nav-link"><a href="Shop-Grid.html">商店网格</a><a href="Shop-List.html">商店列表</a><a href="Product-Single.html">鲜花信息</a><a href="Wishlist.html">愿望列表</a><a href="Cart.html">购物车</a><a href="Checkout.html">结算</a><a href="Order-List.html">订单列表</a><a href="Order-Single.html">订单信息</a></div></div> <!-- Contact Link --><div class="nav-link"><div class="main-nav-link"> <a class="nav-btn" href="Contact.html">联系我们</a> </div></div>  </nav></div><!-- == Mobile Menu Area (End) == --></header><!-- ==================== Header Area (End) ==================== -->  <!-- ==================== Home-Slider Area (Start) ==================== -->  <section class="home"><!-- Home Slider --><div class="swiper-container home-slider"><div class="swiper-wrapper"><!-- Home Slide-1 --><div class="swiper-slide home-item"><img src="static/picture/Home-1.jpg" alt="Home-Image"> <!-- Slide Image --><div class="content"><div class="text"><h3>每个场合都有鲜花</h3> <!-- Slide Heading --><p>欢迎来到我们花店,一个充满美丽与自然的地方。这里充满了各种颜色鲜艳、香气扑鼻的花卉,令人陶醉。 我们的花店提供各类新鲜花朵,包括玫瑰、郁金香、康乃馨等。</p> <!-- Slide Description --><div class="btn-container"><a href="About.html" class="btn">关于我们</a> <!-- About Us Button --><a href="Shop-Grid.html" class="btn">去购物</a> <!-- Shop Button --></div></div></div></div><!-- Home Slide-2 --><div class="swiper-slide home-item"><img src="static/picture/Home-2.jpg" aalt="Home-Image"> <!-- Slide Image --><div class="content"><div class="text"><h3>这是度过美好一天的最佳礼物</h3> <!-- Slide Heading --><p>欢迎来到我们花店,一个充满美丽与自然的地方。这里充满了各种颜色鲜艳、香气扑鼻的花卉,令人陶醉。 我们的花店提供各类新鲜花朵,包括玫瑰、郁金香、康乃馨等。</p> <!-- Slide Description --><div class="btn-container"><a href="About.html" class="btn">关于我们</a> <!-- About Us Button --><a href="Shop-Grid.html" class="btn">去购物</a> <!-- Shop Button --></div></div></div></div><!-- Home Slide-3 --><div class="swiper-slide home-item"><img src="static/picture/Home-3.jpg" alt="Home-Image"> <!-- Slide Image --><div class="content"><div class="text"><h3>我们把你的花束都准备好了</h3> <!-- Slide Heading --><p>欢迎来到我们花店,一个充满美丽与自然的地方。这里充满了各种颜色鲜艳、香气扑鼻的花卉,令人陶醉。 我们的花店提供各类新鲜花朵,包括玫瑰、郁金香、康乃馨等。</p> <!-- Slide Description --><div class="btn-container"><a href="About.html" class="btn">关于我们</a> <!-- About Us Button --><a href="Shop-Grid.html" class="btn">去购物</a> <!-- Shop Button --></div></div></div></div></div><!-- Home Slider Pagination --><div class="swiper-pagination swiper-pagination1"></div><!-- Home Slider Navigation arrows --><div class="swiper-button-next"></div><div class="swiper-button-prev"></div></div></section><!-- ==================== Home-Slider Area (End) ==================== -->     <!-- ==================== About Area (Start) ==================== --><section class="about"><!-- About Section Heading --><div class="heading"> <h2>关于我们<span>了解我们</span> </h2> </div><!-- About Information --><div class="box-container"><!-- About Video --><div class="video"><video src="./assets/images/About/About-Video.mp4" loop="" autoplay="" muted=""></video> <!-- Video Element --><h2>最佳花商</h2> <!-- Heading for the Video --></div><!-- About Content --><div class="content"><h2>你带来了爱。我们会带花来的。</h2> <!-- Main Heading --><h5>我们有完美的插花，可以照亮别人的一天，因为我们只卖我们自己摘的花。 </h5> <!-- Sub Heading --><p>欢迎来到我们花店,一个充满美丽与自然的地方。这里充满了各种颜色鲜艳、香气扑鼻的花卉,令人陶醉。 我们的花店提供各类新鲜花朵,包括玫瑰、郁金香、康乃馨等。</p> <!-- Description --><a href="Contact.html" class="btn">联系我们</a> <!-- Contact Button --></div></div></section><!-- ==================== About Area (End) ==================== --><!-- ==================== Services Area (Start) ==================== --><section class="services"><!-- Services Section Heading --><div class="heading"> <h2>我们的服务<span>我们提供什么</span> </h2> </div><!-- Services --><div class="box-container"><!-- Service Item 1: Floral Arrangements --><div class="service-item"><div class="image"><img src="static/picture/Service-1.jpg" alt="Service-Image"> <!-- Service Image --><span>01</span></div><div class="content"><a href="Service-Single.html"><h3>植物的安排</h3></a> <!-- Service Name with link to Service Details page --><p>植物的安排，提供植物种植培训，让你更好的照顾花草树木。</p> <!-- Service Description --></div></div><!-- Service Item 2: Bouquets --><div class="service-item"><div class="image"><img src="static/picture/Service-2.jpg" alt="Service-Image"> <!-- Service Image --><span>02</span></div><div class="content"><a href="Service-Single.html"><h3>花束</h3></a> <!-- Service Name with link to Service Details page --><p>提供花束的相关教程，教你捆绑一束好的花朵。</p> <!-- Service Description --></div></div><!-- Service Item 3: Wedding Florals --><div class="service-item"><div class="image"><img src="static/picture/Service-3.jpg" alt="Service-Image"> <!-- Service Image --><span>03</span></div><div class="content"><a href="Service-Single.html"><h3>婚礼印花</h3></a> <!-- Service Name with link to Service Details page --><p>提供布置婚礼场地用花等相关服务。</p> <!-- Service Description --></div></div><!-- Service Item 4: Event Decor --><div class="service-item"><div class="image"><img src="static/picture/Service-4.jpg" alt="Service-Image"> <!-- Service Image --><span>04</span></div><div class="content"><a href="Service-Single.html"><h3>活动装饰</h3></a> <!-- Service Name with link to Service Details page --><p>提供活动用花，布置等相关服务。</p> <!-- Service Description --></div></div><!-- Service Item 5: Indoor Plants --><div class="service-item"><div class="image"><img src="static/picture/Service-5.jpg" alt="Service-Image"> <!-- Service Image --><span>05</span></div><div class="content"><a href="Service-Single.html"><h3>室内植物</h3></a> <!-- Service Name with link to Service Details page --><p>提供室内盆栽等好看的花朵等相关服务。</p> <!-- Service Description --></div></div><!-- Service Item 6: Delivery Services --><div class="service-item"><div class="image"><img src="static/picture/Service-6.jpg" alt="Service-Image"> <!-- Service Image --><span>06</span></div><div class="content"><a href="Service-Single.html"><h3>快递服务</h3></a> <!-- Service Name with link to Service Details page --><p>提供上门种植，送货上门等相关服务。</p> <!-- Service Description --></div></div></div></section><!-- ==================== Services Area (End) ==================== --><!-- ==================== Count Area (Start) ==================== --><div class="counting"><!-- Statistic Box 1: Products Count --><div class="box"><div class="info"><i class="fa-solid fa-bag-shopping"></i><h1 class="count" data-count="50">50+</h1><h3>鲜花种类</h3></div></div><!-- Statistic Box 2: Satisfied Clients Count --><div class="box"><div class="info"><i class="fa-regular fa-face-smile"></i><h1 class="count" data-count="500">500+</h1><h3>服务客户</h3></div></div><!-- Statistic Box 3: Flower Arrangements Count --><div class="box"><div class="info"><i class="fa-solid fa-seedling"></i><h1 class="count" data-count="300">300+</h1><h3>花束</h3></div></div><!-- Statistic Box 4: Staff Count --><div class="box"><div class="info"><i class="fa-solid fa-users-gear"></i><h1 class="count" data-count="20">20+</h1><h3>工作人员</h3></div></div></div><!-- ==================== Count Area (End) ==================== --><!-- ==================== Category Area (Start) ==================== --><section class="shop-categories"><!-- Shop Category Section Heading --><div class="heading"> <h2>鲜花类别<span>顶级产品类别</span> </h2> </div><!-- Shop Categories --><div class="box-container"><!-- Category 1 --><div class="category-item category-1"><img src="static/picture/Category-1.jpg" alt="Category-Image"> <!-- Category Image --><a href="Shop-Grid.html"><h3>鲜花花束</h3></a> <!-- Category Name --></div><!-- Category 2 --><div class="category-item category-2"><img src="static/picture/Category-2.jpg" alt="Category-Image"> <!-- Category Image --><a href="Shop-Grid.html"><h3>自定义花束</h3></a> <!-- Category Name --></div><!-- Category 3 --><div class="category-item category-3"><img src="static/picture/Category-3.jpg" alt="Category-Image"> <!-- Category Image --><a href="Shop-Grid.html"><h3>室内植物</h3></a> <!-- Category Name --></div><!-- Category 4 --><div class="category-item category-4"><img src="static/picture/Category-4.jpg" alt="Category-Image"> <!-- Category Image --><a href="Shop-Grid.html"><h3>特别装订</h3></a> <!-- Category Name --></div><!-- Category 5 --><div class="category-item category-5"><img src="static/picture/Category-5.jpg" alt="Category-Image"> <!-- Category Image --><a href="Shop-Grid.html"><h3>礼品装订</h3></a> <!-- Category Name --></div></div></section><!-- ==================== Category Area (End) ==================== --><!-- ==================== Products Area (Start) ==================== --><section class="featured-products"><!-- Featured Products Section Heading --><div class="heading"> <h2>我们的产品<span>主打产品</span> </h2> </div><!-- Featured Products --><div class="box-container"><!-- Product-1 --><div class="product-item"><div class="image"><img src="static/picture/Product-1.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>婚礼花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-2 --><div class="product-item"><div class="image"><img src="static/picture/Product-2.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>生日花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-3 --><div class="product-item"><div class="image"><img src="static/picture/Product-3.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>玫瑰花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-4 --><div class="product-item"><div class="image"><img src="static/picture/Product-4.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>芦荟花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-5 --><div class="product-item"><div class="image"><img src="static/picture/Product-5.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>盛开的美丽</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-6 --><div class="product-item"><div class="image"><img src="static/picture/Product-6.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>母亲节花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-7 --><div class="product-item"><div class="image"><img src="static/picture/Product-7.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>婚礼花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div><!-- Product-8 --><div class="product-item"><div class="image"><img src="static/picture/Product-8.jpg" alt="Product-Image"> <!-- Product Image --><!-- Product Options --><div class="options"><a href="Cart.html"><i class="fa-solid fa-cart-shopping"></i></a><a href="Wishlist.html"><i class="fa-regular fa-heart"></i></a><a href="Product-Single.html"><i class="fa-regular fa-eye"></i></a></div></div><div class="content"><a href="Product-Single.html"><h3>郁金香花束</h3> </a> <!-- Product Title --><!-- Product Rating --><div class="rating"><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i><i class="fa-solid fa-star"></i></div><!-- Product Price --><div class="price">$40.00 <span>$50.00</span></div></div></div></div></section><!-- ==================== Products Area (End) ==================== --><footer class="footer"><div class="box-container"><!-- Footer Item 1: Flower Shop Description & Social Account Links --><div class="footer-item"><!-- Logo with Shop Name and Tagline --><a class="logo" href="index.html"><img src="static/picture/Logo.png" alt="logo"><div class="logo-name"><h2>鲜花</h2><p>心仪花店</p></div></a><!-- Description --><p>欢迎来到我们花店,一个充满美丽与自然的地方。这里充满了各种颜色鲜艳、香气扑鼻的花卉,令人陶醉。 我们的花店提供各类新鲜花朵,包括玫瑰、郁金香、康乃馨等。</p><!-- Social Account Links --><div class="social"><a href="#"><i class="fab fa-weixin"></i></a><a href="#"><i class="fab fa-qq"></i></a><a href="#"><i class="fab fa-weibo"></i></a><a href="#"><i class="fab fa-linkedin"></i></a></div></div><!-- Footer Item 2: Flower Shop Services --><div class="footer-item"><h2>我们的服务</h2><div class="info links"><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">植物的安排</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">花束</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">婚礼印花</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">活动装饰</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">室内植物</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Service-Single.html">快递服务</a></p></div></div> <!-- Footer Item 3: Useful Links --><div class="footer-item"><h2>常用链接</h2><div class="info links"><p><i class="fa-solid fa-caret-right"></i><a href="About.html">关于我们</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Gallery.html">鲜花画廊</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Portfolio.html">个人信息</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Shop-Grid.html">鲜花商店</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Blog-Grid.html">鲜花博客</a></p><p><i class="fa-solid fa-caret-right"></i><a href="Contact.html">联系我们</a></p></div></div> <!-- Footer Item 4: Contact Information --><div class='footer-item'><h2>联系信息</h2> <div class="info connect"><p><i class="fas fa-phone"></i><span>+133 1100 1100</span></p><p><i class="fas fa-phone"></i><span>+133 1100 1100</span></p><p><i class="fas fa-envelope"></i><span class="gmail">test@126.com</span></p><p><i class="fas fa-envelope"></i><span class="gmail">test@qq.com</span></p><p><i class="fas fa-map"></i><span>北京、朝阳</span></p></div></div></div><div class="content"><p>Copyright &copy; 2024.Company name All rights reserved.<a href="https://blog.csdn.net/weixin_43151418" target="_blank">xcLeigh</a> | <a href="https://item.taobao.com/item.htm?id=805108173963" target="_blank">欣晨软件服务</a></p></div></footer><script src="static/js/jquery.min.js"></script><script src="static/js/swiper-bundle.min.js"></script><script src="static/js/script.js"></script> <script src="static/js/nav-link-toggler.js"></script><script src="static/js/home-slider.js"></script> <script src="static/js/counter-up.js"></script><script src="static/js/testi-slider.js"></script><script src="static/js/deal-counter.js"></script>
</body>
</html>

源码下载

HTML5好看的花店商城源码3（源码）点击下载
在这里插入图片描述

万套模板，程序开发，在线开发，在线沟通

专业后端大佬在线沟通需求开发
专业前端大佬在线沟通需求开发
专业网站整套大佬在线沟通需求开发
专业毕业设计大佬在线沟通需求开发
专业大作业大佬在线沟通需求开发
【优惠活动】专属定制，程序在线开发

--------------- 业精于勤，荒于嬉 ---------------

请添加图片描述

--------------- 行成于思，毁于随 ---------------

💢 关注博主带你实现畅游前后端

🏰 加入社区带你体验马航不孤单

💯 神秘个人简介带你体验不一样得介绍

💘 为爱表白为你那个TA，体验别致的浪漫惊喜

🎀 酷炫邀请函带你体验高大上得邀请

     ① 🉑提供云服务部署（有自己的阿里云）；
     ② 🉑提供前端、后端、应用程序、H5、小程序、公众号、大作业等相关业务；
     如🈶合作请联系我，期待您的联系。
    注：本文撰写于CSDN平台,作者：xcLeigh（所有权归作者所有），https://blog.csdn.net/weixin_43151418，如果相关下载没有跳转，请查看这个地址，相关链接没有跳转，皆是抄袭本文，转载请备注本文原地址。

亲，码字不易，动动小手，欢迎 点赞 ➕ 收藏，如 🈶 问题请留言（评论），博主看见后一定及时给您答复，💌💌💌

原文地址：https://blog.csdn.net/weixin_43151418/article/details/141814278（防止抄袭，原文地址不可删除）