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