HTML5好看的花店商城源码3

文章目录

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（防止抄袭，原文地址不可删除）