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