HTML+CSS+JavaScript 电商网站
各位大佬点点赞呗
目录
文章目录
一、网站题目
电商网站
二、网站描述
总结了一些学生网页制作的经验：一般的网页需要融入以下知识点：div+css布局、浮动、定位、高级css、表格、表单及验证、js轮播图、音频 视频 Flash的应用、ul li、下拉导航栏、鼠标划过效果等知识点，以上css'相关知识点可见博主的前端基础专栏的css基础知识
关于js实现:点击切换图片，轮播图，tab切换，分页符，限时秒杀。可见博文原生js实现：点击切换图片，轮播图，tab切换，分页符，限时秒杀https://blog.csdn.net/m0_64455070/article/details/139492602https://blog.csdn.net/m0_64455070/article/details/139492602https://blog.csdn.net/m0_64455070/article/details/139492602https://blog.csdn.net/m0_64455070/article/details/139492602
https://blog.csdn.net/m0_64455070/article/details/139492602
网页的风格主题也很全面：如爱好、风景、校园、美食、动漫、游戏、咖啡、音乐、家乡、电影、名人、商城以及个人主页等主题，学生、新手可参考下方页面的布局和设计和HTML源码。
三、网站介绍
html文件
index.html是首页，还有其他样式的首页和其他html二级页面
css文件
css全部页面样式、插件样式、响应式布局样式、放大效果、动画效果等
js文件
bootstrap、jq、js实现动态轮播特效, 表单提交, 点击事件等等。
四、网站效果
主页
产品页
商店页面布局
三列、四列、左侧边栏、列表视图、右侧边栏、列表左侧边栏、列表有侧边栏
单个产品样式
单个产品轮播、单个产品左侧固定、单个产品右侧固定、单个产品左侧画廊、单个产品右侧画廊、单个产品顶部标签样式、单个产品左侧标签样式、单个产品右侧标签样式
五、网站代码
index.html
<!DOCTYPE html>
<html class="no-js" lang="zxx">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="description" content="meta description">
<title>Home</title>
<!--=== Favicon ===-->
<link rel="shortcut icon" href="assets/img/favicon.ico" type="image/x-icon" />
<!--== Google Fonts ==-->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,500,600,700" rel="stylesheet">
<!--=== Bootstrap CSS ===-->
<link href="assets/css/vendor/bootstrap.min.css" rel="stylesheet">
<!--=== Font-Awesome CSS ===-->
<link href="assets/css/vendor/font-awesome.css" rel="stylesheet">
<!--=== Plugins CSS ===-->
<link href="assets/css/plugins.css" rel="stylesheet">
<!--=== Helper CSS ===-->
<link href="assets/css/helper.min.css" rel="stylesheet">
<!--=== Main Style CSS ===-->
<link href="assets/css/style.css" rel="stylesheet">
<!-- Modernizer JS -->
<script src="assets/js/vendor/modernizr-2.8.3.min.js"></script>
<!--[if lt IE 9]>
<script src="http://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
<!--== 开始头部部分 ==-->
<header id="header-area">
<!-- 开始预头部区域 -->
<div class="preheader-area">
<div class="container">
<div class="row">
<div class="col-md-5 col-lg-6">
<div
class="preheader-contact-info d-flex align-items-center justify-content-between justify-content-md-start">
<div class="single-contact-info">
<span class="contact-icon">
<i class="fa fa-envelope"></i>
</span>
<a href="mailto:your@example.com" class="contact-text">
<strong>邮箱：</strong> your@email.here
</a>
</div>
<div class="single-contact-info">
<span class="contact-icon">
<i class="fa fa-phone"></i>
</span>
<a href="" class="contact-text">
<strong>电话：</strong> (+1) 866-540-3229
</a>
</div>
</div>
</div>
<div class="col-md-7 col-lg-6 mt-xs-10">
<div class="site-setting-menu">
<ul class="nav justify-content-center justify-content-md-end">
<li><a href="my-account.html">我的账户</a></li>
<li><a href="wishlist.html">愿望清单</a></li>
<li><a href="login-register.html">登录</a></li>
<li class="switcher dropdown-show"><a href="#" class="arrow-toggle">English</a>
<ul class="dropdown-nav">
<li><a href="#">Bengali</a></li>
<li><a href="#">Chinese</a></li>
<li><a href="#">Hindi</a></li>
<li><a href="#">Urdu</a></li>
</ul>
</li>
<li class="switcher dropdown-show"><a href="#" class="arrow-toggle">USD</a>
<ul class="dropdown-nav">
<li><a href="#">BDT</a></li>
<li><a href="#">AUD</a></li>
<li><a href="#">CAD</a></li>
</ul>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
<!-- 结束预头部区域 -->
<!-- 开始头部中间区域 -->
<div class="header-middle-area">
<div class="container">
<div class="row">
<!-- 开始Logo区域 -->
<div class="col-4 col-md-2 col-xl-3 m-auto text-center text-lg-left">
<a href="index.html" class="logo-wrap d-block">
<img src="assets/img/logo.png" alt="Logo" class="img-fluid" />
</a>
</div>
<!-- 结束Logo区域 -->
<!-- 开始搜索框区域 -->
<div class="col-8 col-md-7 col- m-auto ">
<div class="search-box-wrap">
<form class="search-form d-flex" action="#" method="get">
<input type="search" name="search" placeholder="输入并回车" />
<button class="btn btn-search"><img src="assets/img/icons/icon-search.png" alt="搜索图标" />
</button>
</form>
</div>
</div>
<!-- 结束搜索框区域 -->
<!-- 开始迷你购物车区域 -->
<div class="col-12 col-md-3 col-xl-2 m-auto text-center text-lg-right mt-xs-15">
<div class="minicart-wrapper">
<button class="btn btn-minicart">我的购物车 <sup class="cart-count">3</sup></button>
<div class="minicart-content">
<div class="mini-cart-body">
<!-- 单个购物车商品开始 -->
<div class="single-cart-item d-flex">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-1.jpg"
alt="商品" /></a>
</figure>
<div class="product-details">
<h2><a href="single-product.html">Sprite瑜伽伴侣</a></h2>
<div class="cal d-flex align-items-center">
<span class="quantity">3</span>
<span class="multiplication">X</span>
<span class="price">$77.00</span>
</div>
</div>
<a href="#" class="remove-icon"><i class="fa fa-trash-o"></i></a>
</div>
<!-- 单个购物车商品结束 -->
<!-- 单个购物车商品开始 -->
<div class="single-cart-item d-flex">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-2.jpg"
alt="商品" /></a>
</figure>
<div class="product-details">
<h2><a href="single-product.html">瑜伽伴侣套装</a></h2>
<div class="cal d-flex align-items-center">
<span class="quantity">2</span>
<span class="multiplication">X</span>
<span class="price">$6.00</span>
</div>
</div>
<a href="#" class="remove-icon"><i class="fa fa-trash-o"></i></a>
</div>
<!-- 单个购物车商品结束 -->
<!-- 单个购物车商品开始 -->
<div class="single-cart-item d-flex">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="商品" /></a>
</figure>
<div class="product-details">
<h2><a href="#">Sprite瑜伽伴侣套装</a></h2>
<div class="cal d-flex align-items-center">
<span class="quantity">1</span>
<span class="multiplication">X</span>
<span class="price">$116.00</span>
</div>
</div>
<a href="single-product.html" class="remove-icon"><i
class="fa fa-trash-o"></i></a>
</div>
<!-- 单个购物车商品结束 -->
</div>
<div class="mini-cart-footer">
<a href="checkout.html" class="btn">结账</a>
</div>
</div>
</div>
</div>
<!-- 结束迷你购物车区域 -->
</div>
</div>
</div>
<!-- 结束头部中间区域 -->
<!-- 开始主菜单区域 -->
<div class="navigation-area" id="fixheader">
<div class="container">
<div class="row">
<!-- 开始分类列表 -->
<div class="col-10 col-lg-3">
<div class="categories-list-wrap">
<button class="btn btn-category d-none d-lg-inline-block"><i class="fa fa-bars"></i> 分类
</button>
<ul class="category-list-menu">
<li class="category-item-parent dropdown-show">
<a href="#" class="category-item arrow-toggle">
<img src="assets/img/icons/desktop.png" alt="电脑" />
<span>电脑</span>
</a>
<ul class="mega-menu-wrap dropdown-nav">
<li class="mega-menu-item"><a href="#" class="mega-item-title">笔记本电脑</a>
<ul>
<li><a href="#">有笔记本电脑价格</a></li>
<li><a href="#">有笔记本电脑内存</a></li>
<li><a href="#">有笔记本电脑存储</a></li>
<li><a href="#">有笔记本电脑SSD</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="#" class="mega-item-title">台式机</a>
<ul>
<li><a href="#">有台式机价格</a></li>
<li><a href="#">有台式机内存</a></li>
<li><a href="#">有台式机存储</a></li>
<li><a href="#">有台式机SSD</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="#" class="mega-item-title">笔记本</a>
<ul>
<li><a href="#">有笔记本价格</a></li>
<li><a href="#">有笔记本内存</a></li>
<li><a href="#">有笔记本存储</a></li>
<li><a href="#">有笔记本SSD</a></li>
</ul>
</li>
</ul>
</li>
<li class="category-item-parent dropdown-show">
<a href="#" class="category-item arrow-toggle">
<img src="assets/img/icons/mobile.png" alt="手机" />
<span>手机</span>
</a>
<ul class="mega-menu-wrap dropdown-nav">
<li class="mega-menu-item"><a href="#" class="mega-item-title">三星</a>
<ul>
<li><a href="#">三星S6</a></li>
<li><a href="#">三星S7</a></li>
<li><a href="#">三星Prime</a></li>
<li><a href="#">三星A6</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="#" class="mega-item-title">小米</a>
<ul>
<li><a href="#">小米A2 Pro</a></li>
<li><a href="#">小米MIX 2</a></li>
<li><a href="#">小米F1</a></li>
<li><a href="#">小米Prime</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="#" class="mega-item-title">Jamila</a>
<ul>
<li><a href="#">Jamila G100</a></li>
<li><a href="#">Jamila i120</a></li>
<li><a href="#">Jamila i15</a></li>
<li><a href="#">Jamila L62</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="#" class="mega-item-title">Nakoa</a>
<ul>
<li><a href="#">Nakoa Lamia 820</a></li>
<li><a href="#">Nakoa 888 Pro</a></li>
<li><a href="#">Nakoa 81 Sirocco</a></li>
<li><a href="#">Nakoa Lamia 1520</a></li>
</ul>
</li>
</ul>
</li>
<li class="category-item-parent">
<a href="#" class="category-item">
<img src="assets/img/icons/camera.png" alt="相机" />
<span>相机</span>
</a>
</li>
<li class="category-item-parent">
<a href="#" class="category-item">
<img src="assets/img/icons/fan.png" alt="相机" />
<span>电子产品</span>
</a>
</li>
<li class="category-item-parent">
<a href="#" class="category-item">
<img src="assets/img/icons/games.png" alt="相机" />
<span>游戏</span>
</a>
</li>
<li class="category-item-parent">
<a href="#" class="category-item">
<img src="assets/img/icons/tv.png" alt="相机" />
<span>娱乐</span>
</a>
</li>
<li class="category-item-parent">
<a href="#" class="category-item">
<img src="assets/img/icons/desktop.png" alt="电脑" />
<span>电脑</span>
</a>
</li>
<li class="category-item-parent hidden">
<a href="#" class="category-item">
<img src="assets/img/icons/mobile.png" alt="手机" />
<span>手机</span>
</a>
</li>
<li class="category-item-parent hidden">
<a href="#" class="category-item">
<img src="assets/img/icons/camera.png" alt="相机" />
<span>相机</span>
</a>
</li>
<li class="category-item-parent hidden">
<a href="#" class="category-item">
<img src="assets/img/icons/fan.png" alt="相机" />
<span>电子产品</span>
</a>
</li>
<li class="category-item-parent hidden">
<a href="#" class="category-item">
<img src="assets/img/icons/games.png" alt="相机" />
<span>游戏</span>
</a>
</li>
<li class="category-item-parent">
<a href="#" class="category-item btn-more">更多分类</a>
</li>
</ul>
</div>
</div>
<!-- 结束分类列表 -->
<!-- 开始主菜单 -->
<div class="col-2 col-lg-9 d-none d-lg-block">
<div class="main-menu-wrap">
<nav class="mainmenu">
<ul class="main-navbar clearfix">
<li class="dropdown-show"><a href="index.html" class="arrow-toggle">首页</a>
<ul class="dropdown-nav sub-dropdown">
<li><a href="index.html">首页布局1</a></li>
<li><a href="index2.html">首页布局2</a></li>
<li><a href="index3.html">首页布局3</a></li>
<li><a href="index4.html">首页布局4</a></li>
</ul>
</li>
<li><a href="about.html">关于我们</a></li>
<li class="dropdown-show"><a href="#" class="arrow-toggle">商店</a>
<ul class="mega-menu-wrap dropdown-nav">
<li class="mega-menu-item"><a href="shop.html"
class="mega-item-title">商店页面布局</a>
<ul>
<li><a href="shop-3-grid.html">商店3列</a></li>
<li><a href="shop-4-grid.html">商店4列</a></li>
<li><a href="shop.html">商店左侧边栏</a></li>
<li><a href="shop-list.html">商店列表视图</a></li>
<li><a href="shop-right-sidebar.html">商店右侧边栏</a></li>
<li><a href="shop-list-left-sidebar.html">商店列表左侧边栏</a></li>
<li><a href="shop-list-right-sidebar.html">商店列表右侧边栏</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="single-product.html"
class="mega-item-title">单个产品样式</a>
<ul>
<li><a href="single-product-carousel.html">单个产品轮播</a></li>
<li><a href="single-product-sticky-left.html">单个产品左侧固定</a></li>
<li><a href="single-product-sticky-right.html">单个产品右侧固定</a></li>
<li><a href="single-product-gallery-left.html">单个产品左侧画廊</a></li>
<li><a href="single-product-gallery-right.html">单个产品右侧画廊</a></li>
<li><a href="single-product-tab-style-top.html">单个产品顶部标签样式</a></li>
<li><a href="single-product-tab-style-left.html">单个产品左侧标签样式</a></li>
<li><a href="single-product-tab-style-right.html">单个产品右侧标签样式</a>
</li>
</ul>
</li>
<li class="mega-menu-item"><a href="single-product.html"
class="mega-item-title">单个产品</a>
<ul>
<li><a href="single-product.html">单个产品</a></li>
<li><a href="single-product-sale.html">单个产品销售</a></li>
<li><a href="single-product-group.html">单个产品组</a></li>
<li><a href="single-product-normal.html">单个产品普通</a></li>
<li><a href="single-product-affiliate.html">单个产品联盟</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-show"><a href="#" class="arrow-toggle">男士</a>
<ul class="mega-menu-wrap dropdown-nav">
<li class="mega-menu-item"><a href="shop-list.html"
class="mega-item-title">衬衫</a>
<ul>
<li><a href="shop.html">上衣 & T恤</a></li>
<li><a href="shop.html">Polo短袖</a></li>
<li><a href="shop.html">图形T恤</a></li>
<li><a href="shop.html">夹克 & 外套</a></li>
<li><a href="shop.html">时尚夹克</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="shop-list.html"
class="mega-item-title">牛仔裤</a>
<ul>
<li><a href="shop.html">钩针</a></li>
<li><a href="shop.html">无袖</a></li>
<li><a href="shop.html">条纹</a></li>
<li><a href="shop.html">毛衣</a></li>
<li><a href="shop.html">连帽衫</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="shop-list.html"
class="mega-item-title">鞋子</a>
<ul>
<li><a href="shop.html">上衣 & T恤</a></li>
<li><a href="shop.html">Polo短袖</a></li>
<li><a href="shop.html">图形T恤</a></li>
<li><a href="shop.html">夹克 & 外套</a></li>
<li><a href="shop.html">时尚夹克</a></li>
</ul>
</li>
<li class="mega-menu-item"><a href="shop-list.html"
class="mega-item-title">手表</a>
<ul>
<li><a href="shop.html">钩针</a></li>
<li><a href="shop.html">无袖</a></li>
<li><a href="shop.html">条纹</a></li>
<li><a href="shop.html">毛衣</a></li>
<li><a href="shop.html">连帽衫</a></li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-show"><a href="#" class="arrow-toggle">页面</a>
<ul class="dropdown-nav">
<li><a href="cart.html">购物车</a></li>
<li><a href="checkout.html">结账</a></li>
<li><a href="compare.html">比较</a></li>
<li><a href="wishlist.html">愿望清单</a></li>
<li><a href="login-register.html">登录 & 注册</a></li>
<li><a href="my-account.html">我的账户</a></li>
<li><a href="404.html">404错误</a></li>
</ul>
</li>
<li class="dropdown-show"><a href="#" class="arrow-toggle">博客</a>
<ul class="dropdown-nav">
<li><a href="blog.html">博客左侧边栏</a></li>
<li><a href="blog-right-sidebar.html">博客右侧边栏</a></li>
<li><a href="blog-grid.html">博客网格布局</a></li>
<li><a href="single-blog.html">单篇博客</a></li>
<li><a href="single-blog-right-sidebar.html">单篇博客右侧边栏</a></li>
</ul>
</li>
<li><a href="contact.html">联系我们</a></li>
</ul>
</nav>
</div>
</div>
<!-- Main Menu End -->
</div>
</div>
</div>
<!-- End Main Menu Area -->
</header>
<!--== 开始轮播区域 ==-->
<div class="slider-area-wrap">
<div class="home-slider-carousel owl-carousel">
<div class="single-slide-item">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="slider-text">
<h2>Canvas Gear</h2>
<h3>双前置摄像头</h3>
<h4>可以拍摄平滑美丽的图像</h4>
<a href="single-product-carousel.html" class="btn">立即购买</a>
</div>
</div>
</div>
</div>
</div>
<div class="single-slide-item slide-item_2">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="slider-text">
<h2>Ajaira Mobile</h2>
<h3>配备Dollbee扬声器</h3>
<h4>可以播放平滑的声音</h4>
<a href="single-product-carousel.html" class="btn">立即购买</a>
</div>
</div>
</div>
</div>
</div>
<div class="single-slide-item slide-item_3">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="slider-text">
<h2>HasMobile</h2>
<h3>双前置摄像头</h3>
<h4>可以拍摄平滑美丽的图像</h4>
<a href="single-product-carousel.html" class="btn">立即购买</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--== 结束轮播区域 ==-->
<!--== 开始行动号召 ==-->
<section id="call-to-action">
<div class="container">
<div class="call-to-action-content">
<div class="row">
<!-- 单个行动号召开始 -->
<div class="col-lg-3 col-sm-6 m-auto">
<div class="single-action-item d-flex align-items-center">
<div class="call-action-icon">
<i class="fa fa-truck"></i>
</div>
<div class="call-action-info">
<h4>免费送货</h4>
<p>订单超过$100</p>
</div>
</div>
</div>
<!-- 单个行动号召结束 -->
<!-- 单个行动号召开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-action-item d-flex align-items-center">
<div class="call-action-icon">
<i class="fa fa-support"></i>
</div>
<div class="call-action-info">
<h4>24/7 支持</h4>
<p>在线咨询</p>
</div>
</div>
</div>
<!-- 单个行动号召结束 -->
<!-- 单个行动号召开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-action-item d-flex align-items-center">
<div class="call-action-icon">
<i class="fa fa-calendar"></i>
</div>
<div class="call-action-info">
<h4>每日更新</h4>
<p>查看商店</p>
</div>
</div>
</div>
<!-- 单个行动号召结束 -->
<!-- 单个行动号召开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-action-item d-flex align-items-center">
<div class="call-action-icon">
<i class="fa fa-refresh"></i>
</div>
<div class="call-action-info">
<h4>30天退货</h4>
<p>退款保证</p>
</div>
</div>
</div>
<!-- 单个行动号召结束 -->
</div>
</div>
</div>
</section>
<!--== 结束行动号召 ==-->
<!--== Start Products Area ==-->
<div id="product-area-wrapper">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="product-content-wrap">
<!-- 产品标签菜单开始 -->
<nav class="product-teb-menu">
<ul class="nav justify-content-center" role="tablist">
<li><a class="active" href="#new-products" id="new-product-tab" data-toggle="tab">新品</a>
</li>
<li><a href="#sale-products" id="sale-product-tab" data-toggle="tab">促销</a></li>
<li><a href="#feature-products" id="feature-product-tab" data-toggle="tab">特色产品</a></li>
</ul>
</nav>
<!-- 产品标签菜单结束 -->
<!-- 产品标签内容开始 -->
<div class="tab-content" id="productContent">
<div class="tab-pane fade show active" id="new-products" role="tabpanel">
<div class="products-wrapper">
<div class="product-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-1.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看"
data-toggle="modal" data-target="#quickView"><i
class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-2.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看"
data-toggle="modal" data-target="#quickView"><i
class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看"
data-toggle="modal" data-target="#quickView"><i
class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga
Bag</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看"
data-toggle="modal" data-target="#quickView"><i
class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Chaz Kangeroo
Hoodie</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看"
data-toggle="modal" data-target="#quickView"><i
class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Endeavor Daytrip
Backpack</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
<div class="tab-pane fade" id="sale-products" role="tabpanel">
<div class="products-wrapper">
<div class="product-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-1.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price-box d-flex">
<span class="product-price">$20.99</span>
<del class="product-price sale">$40.99</del>
</div>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-2.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price-box d-flex">
<span class="product-price">$33.99</span>
<del class="product-price sale">$44.99</del>
</div>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga
Bag</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price-box d-flex">
<span class="product-price">77.99</span>
<del class="product-price sale">55.99</del>
</div>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Chaz Kangeroo
Hoodie</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Endeavor Daytrip
Backpack</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price-box d-flex">
<span class="product-price">$88.99</span>
<del class="product-price sale">$99.99</del>
</div>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
<div class="tab-pane fade" id="feature-products" role="tabpanel">
<div class="products-wrapper">
<div class="product-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-1.jpg"
alt="产品"></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<div class="price-box d-flex">
<span class="product-price">$20.99</span>
<del class="product-price sale">$40.99</del>
</div>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart"
title="加入愿望清单"><i class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart"
title="加入比较"><i class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- Product Tab Content End -->
</div>
</div>
</div>
</div>
</div>
<!--== End Products Area ==-->
<!-- 开始促销横幅区域 -->
<div class="banner-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<a href="shop.html">
<img src="assets/img/banner-home-one.jpg" alt="横幅" />
</a>
</div>
</div>
</div>
</div>
<!-- 结束促销横幅区域 -->
<!-- Start Product By Category -->
<section id="productsby-category">
<div class="container">
<div class="productby-cate-content">
<div class="row">
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">平板电脑</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-1.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-1.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-2.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">电脑</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-2.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">安卓电视</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-3.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">耳机</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-4.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">手机</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-5.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
<!-- 单个分类产品开始 -->
<div class="col-lg-6">
<div class="category-product-wrap">
<h4 class="cate-pro-title"><a href="shop.html">相机</a></h4>
<figure class="cat-banner">
<a href="shop.html"><img src="assets/img/cat-pro-6.jpg" alt="分类"></a>
</figure>
<div class="products-wrapper">
<div class="cat-pro-carousel owl-carousel">
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-3.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Rival Field
Messenger</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-4.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Compete Track
Tote</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
<!-- 单个产品开始 -->
<div class="single-product-item">
<figure class="product-thumb">
<a href="single-product.html"><img src="assets/img/product-5.jpg"
alt="产品"></a>
<a href="#" class="btn btn-round btn-cart" title="快速查看" data-toggle="modal"
data-target="#quickView"><i class="fa fa-eye"></i></a>
</figure>
<div class="product-details">
<h2 class="product-title"><a href="single-product.html">Voyage Yoga Bag</a>
</h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
</div>
<span class="product-price">$40.99</span>
<div class="product-meta">
<a href="#" class="btn btn-round btn-cart" title="加入购物车"><i
class="fa fa-shopping-cart"></i></a>
<a href="wishlist.html" class="btn btn-round btn-cart" title="加入愿望清单"><i
class="fa fa-heart"></i></a>
<a href="compare.html" class="btn btn-round btn-cart" title="加入比较"><i
class="fa fa-exchange"></i></a>
</div>
</div>
</div>
<!-- 单个产品结束 -->
</div>
</div>
</div>
</div>
<!-- 单个分类产品结束 -->
</div>
</div>
</div>
</section>
<!-- End Product By Category -->
<!-- 开始热门分类 -->
<section id="popular-category">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="section-title">
<h2>热门分类</h2>
</div>
</div>
</div>
<div class="popular-cate-wrap">
<div class="row">
<!-- 单个热门分类 -->
<div class="col-lg-6">
<div class="single-popular-category">
<dl class="popular-cat-list">
<dt>电脑</dt>
<dd><a href="#">笔记本电脑</a></dd>
<dd><a href="#">内存/存储</a></dd>
<dd><a href="#">显示器</a></dd>
</dl>
</div>
</div>
<!-- 单个热门分类结束 -->
<!-- 单个热门分类 -->
<div class="col-lg-6">
<div class="single-popular-category pop-cat-2">
<dl class="popular-cat-list">
<dt>智能手机</dt>
<dd><a href="#">耳机</a></dd>
<dd><a href="#">耳塞</a></dd>
<dd><a href="#">充电器</a></dd>
</dl>
</div>
</div>
<!-- 单个热门分类结束 -->
<!-- 单个热门分类 -->
<div class="col-lg-6">
<div class="single-popular-category pop-cat-3">
<dl class="popular-cat-list">
<dt>相机</dt>
<dd><a href="#">存储卡</a></dd>
<dd><a href="#">闪光灯</a></dd>
<dd><a href="#">镜头</a></dd>
</dl>
</div>
</div>
<!-- 单个热门分类结束 -->
<!-- 单个热门分类 -->
<div class="col-lg-6">
<div class="single-popular-category pop-cat-4">
<dl class="popular-cat-list">
<dt>台式机</dt>
<dd><a href="#">键盘</a></dd>
<dd><a href="#">音箱</a></dd>
<dd><a href="#">内存</a></dd>
</dl>
</div>
</div>
<!-- 单个热门分类结束 -->
</div>
</div>
</div>
</section>
<!-- 结束热门分类 -->
<!--== 开始近期文章和评论区域 ==-->
<div class="recent-post-testimonial">
<div class="container">
<div class="row">
<!-- 近期文章区域开始 -->
<div class="col-lg-7">
<div class="recent-post-area-wrap">
<div class="row">
<div class="col-lg-12">
<div class="section-title">
<h2>近期文章</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="recent-post-content">
<div class="recent-post-carousel owl-carousel">
<!-- 单个近期文章开始 -->
<div class="single-blog-wrap">
<figure class="blog-thumb">
<a href="single-blog.html"><img src="assets/img/blog-thumb-1.jpg"
alt="博客" /></a>
<figcaption class="blog-icon">
<a href="single-blog.html"><i class="fa fa-file-image-o"></i></a>
</figcaption>
</figure>
<div class="blog-details">
<h3><a href="single-blog.html">Mirum est notare quam</a></h3>
<div class="post-meta">
<a href="single-blog.html">2018年6月20日</a>
<a href="single-blog.html">作者: Tuntuni</a>
</div>
<p>我被认为是古希腊文化，但从未在文化之前就明确指出这一点。</p>
</div>
</div>
<!-- 单个近期文章结束 -->
<!-- 单个近期文章开始 -->
<div class="single-blog-wrap">
<figure class="blog-thumb">
<a href="single-blog.html"><img src="assets/img/blog-thumb-2.jpg"
alt="博客" /></a>
<figcaption class="blog-icon">
<a href="single-blog.html"><i class="fa fa-file-image-o"></i></a>
</figcaption>
</figure>
<div class="blog-details">
<h3><a href="single-blog.html">您现在可以购买的耳机</a></h3>
<div class="post-meta">
<a href="single-blog.html">2018年6月20日</a>
<a href="single-blog.html">作者: Tuntuni</a>
</div>
<p>众所周知，即使是古希腊的文字，也无法清晰地阐述，也无法解释文字本身。</p>
</div>
</div>
<!-- 单个近期文章结束 -->
<!-- 单个近期文章开始 -->
<div class="single-blog-wrap">
<figure class="blog-thumb">
<a href="single-blog.html"><img src="assets/img/blog-thumb-3.jpg"
alt="博客" /></a>
<figcaption class="blog-icon">
<a href="single-blog.html"><i class="fa fa-file-image-o"></i></a>
</figcaption>
</figure>
<div class="blog-details">
<h3><a href="single-blog.html">您现在可以购买的耳机</a></h3>
<div class="post-meta">
<a href="single-blog.html">2018年6月20日</a>
<a href="single-blog.html">作者: Tuntuni</a>
</div>
<p>众所周知，即使是古希腊的文字，也无法清晰地阐述，也无法解释文字本身。</p>
</div>
</div>
<!-- 单个近期文章结束 -->
<!-- 单个近期文章开始 -->
<div class="single-blog-wrap">
<figure class="blog-thumb">
<a href="single-blog.html"><img src="assets/img/blog-thumb-4.jpg"
alt="博客" /></a>
<figcaption class="blog-icon">
<a href="single-blog.html"><i class="fa fa-file-image-o"></i></a>
</figcaption>
</figure>
<div class="blog-details">
<h3><a href="single-blog.html">您现在可以购买的耳机</a></h3>
<div class="post-meta">
<a href="single-blog.html">2018年6月20日</a>
<a href="single-blog.html">作者: Tuntuni</a>
</div>
<p>众所周知，即使是古希腊的文字，也无法清晰地阐述，也无法解释文字本身。</p>
</div>
</div>
<!-- 单个近期文章结束 -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 近期文章区域结束 -->
<!-- 客户评论区域开始 -->
<div class="col-lg-5">
<div class="client-says-area-wrap">
<div class="row">
<div class="col-lg-6">
<div class="section-title">
<h2>客户评价</h2>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="reviews-content">
<div class="reviews-carousel owl-carousel">
<!-- 单个评论开始 -->
<div class="single-reviews">
<a href="#" class="client-thumb">
<img src="assets/img/client-1.jpg" alt="客户" />
</a>
<a href="#" class="client-name">Stefano Colombarolli <span
class="client-designation">Akamla 经理</span></a>
<p class="client-quote">
一切都完美！！我有三个使用Magento的网站，这个主题是最好的！！支持非常出色，主题安装包的建议也非常好，抱歉我的英语不好，我是意大利人，但我没有任何问题！！谢谢！
</p>
</div>
<!-- 单个评论结束 -->
<!-- 单个评论开始 -->
<div class="single-reviews">
<a href="#" class="client-thumb">
<img src="assets/img/client-2.jpg" alt="客户" />
</a>
<a href="#" class="client-name">Alex Tuntuni <span
class="client-designation">产品经理</span></a>
<p class="client-quote">
一切都完美！！我有三个使用Magento的网站，这个主题是最好的！！支持非常出色，主题安装包的建议也非常好，抱歉我的英语不好，我是意大利人，但我没有任何问题！！谢谢！
</p>
</div>
<!-- 单个评论结束 -->
<!-- 单个评论开始 -->
<div class="single-reviews">
<a href="#" class="client-thumb">
<img src="assets/img/client-3.jpg" alt="客户" />
</a>
<a href="#" class="client-name">Stefano Colombarolli <span
class="client-designation">Akamla 经理</span></a>
<p class="client-quote">
一切都完美！！我有三个使用Magento的网站，这个主题是最好的！！支持非常出色，主题安装包的建议也非常好，抱歉我的英语不好，我是意大利人，但我没有任何问题！！谢谢！
</p>
</div>
<!-- 单个评论结束 -->
</div>
</div>
</div>
</div>
</div>
</div>
<!-- 客户评论区域结束 -->
</div>
</div>
</div>
<!--== 结束近期文章和评论区域 ==-->
<!--== 开始品牌轮播区域 ==-->
<div class="brand-logo-area">
<div class="container">
<div class="row">
<div class="col-lg-12">
<div class="brand-logo-carousel owl-carousel">
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-1.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-2.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-3.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-4.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-5.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
<!-- 单个品牌Logo开始 -->
<div class="single-brand-item">
<a href="#"><img src="assets/img/logo-6.png" alt="品牌"></a>
</div>
<!-- 单个品牌Logo结束 -->
</div>
</div>
</div>
</div>
</div>
<!--== 结束品牌轮播区域 ==-->
<!--== 开始新闻通讯区域 ==-->
<div class="newsletter-area">
<div class="container">
<div class="row">
<div class="col-lg-9 m-auto">
<!-- 新闻通讯内容开始 -->
<div class="newsletter-content-wrap text-center text-lg-left d-lg-flex">
<h2><i class="fa fa-envelope-square"></i> 订阅新闻通讯</h2>
<div class="newsletter-form-wrap">
<form id="subscribe-form" action="assets/php/subscribe.php" method="post">
<input type="email" name="newsletter_email" id="address" placeholder="输入您的电子邮件地址"
required />
<button class="btn" type="submit">订阅</button>
</form>
<!-- 显示错误和成功信息 -->
<div id="subscribeResult"></div>
</div>
</div>
<!-- 新闻通讯内容结束 -->
</div>
<div class="col-lg-3 m-auto text-center text-lg-right">
<!-- 社交图标区域开始 -->
<div class="social-icons">
<a href="#"><i class="fa fa-facebook"></i></a>
<a href="#"><i class="fa fa-twitter"></i></a>
<a href="#"><i class="fa fa-linkedin"></i></a>
<a href="#"><i class="fa fa-youtube"></i></a>
</div>
<!-- 社交图标区域结束 -->
</div>
</div>
</div>
</div>
<!--== 结束新闻通讯区域 ==-->
<!--== 开始页脚区域 ==-->
<footer id="footer-area">
<!-- 页脚小部件区域开始 -->
<div class="footer-widget-area">
<div class="container">
<div class="footer-widget-content">
<div class="row">
<!-- 单个小部件项开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-widget-item">
<h3 class="widget-title">关于市场</h3>
<div class="widget-body">
<ul class="footer-list">
<li><a href="#">我的账户</a></li>
<li><a href="#">订单历史</a></li>
<li><a href="#">退货</a></li>
<li><a href="#">特价商品</a></li>
<li><a href="#">网站地图</a></li>
</ul>
</div>
</div>
</div>
<!-- 单个小部件项结束 -->
<!-- 单个小部件项开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-widget-item">
<h3 class="widget-title">客户服务</h3>
<div class="widget-body">
<ul class="footer-list">
<li><a href="#">退货</a></li>
<li><a href="#">订单历史</a></li>
<li><a href="#">我的账户</a></li>
<li><a href="#">网站地图</a></li>
<li><a href="#">特价商品</a></li>
</ul>
</div>
</div>
</div>
<!-- 单个小部件项结束 -->
<!-- 单个小部件项开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-widget-item">
<h3 class="widget-title">信息</h3>
<div class="widget-body">
<ul class="footer-list">
<li><a href="#">订单历史</a></li>
<li><a href="#">网站地图</a></li>
<li><a href="#">退货</a></li>
<li><a href="#">特价商品</a></li>
<li><a href="#">我的账户</a></li>
</ul>
</div>
</div>
</div>
<!-- 单个小部件项结束 -->
<!-- 单个小部件项开始 -->
<div class="col-lg-3 col-sm-6">
<div class="single-widget-item">
<h3 class="widget-title">联系我们</h3>
<div class="widget-body">
<div class="contact-info">
<div class="single-contact-info">
<span class="contact-icon">
<i class="fa fa-home"></i>
</span>
<a href="mailto:your@example.com" class="contact-text">
<strong>地址：</strong> 15/C, Uttara, Dhaka
</a>
</div>
<div class="single-contact-info">
<span class="contact-icon">
<i class="fa fa-phone"></i>
</span>
<a href="mailto:your@example.com" class="contact-text">
<strong>电话：</strong> (+1) 866-540-3229
</a>
</div>
<div class="single-contact-info">
<span class="contact-icon">
<i class="fa fa-envelope"></i>
</span>
<a href="mailto:your@example.com" class="contact-text">
<strong>邮箱：</strong> your@email.here
</a>
</div>
</div>
</div>
</div>
</div>
<!-- 单个小部件项结束 -->
</div>
</div>
</div>
</div>
<!-- 页脚小部件区域结束 -->
<!-- 页脚底部区域 -->
<div class="footer-bttom-area">
<div class="container">
<div class="row">
<!-- 版权文本区域 -->
<div class="col-md-6 m-auto text-center text-md-left order-last order-md-first">
<p>版权所有 © 2018.公司名称 保留所有权利。<a target="_blank"
href="http://sc.chinaz.com/moban/">网页模板</a></p>
</div>
<!-- 版权文本区域 -->
<!-- 支付方式区域 -->
<div class="col-md-6 m-auto text-center text-md-right">
<div class="payment-support">
<img src="assets/img/payment.png" alt="支付方式" class="d-inline-block" />
</div>
</div>
<!-- 支付方式区域 -->
</div>
</div>
</div>
<!-- 页脚底部区域 -->
</footer>
<!--== 结束页脚区域 ==-->
<!-- 滚动到顶部开始 -->
<a href="#" class="scrolltotop"><i class="fa fa-angle-up"></i></a>
<!-- 滚动到顶部结束 -->
<!--== 产品快速查看模态框区域 ==-->
<div class="modal" id="quickView" tabindex="-1" role="dialog">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="关闭">
<span aria-hidden="true"><img src="assets/img/icons/cancel.png" alt="关闭" class="img-fluid" /></span>
</button>
<div class="modal-body">
<div class="quick-view-content single-product-page-content">
<div class="row">
<!-- 产品缩略图开始 -->
<div class="col-lg-5 col-md-6">
<div class="product-thumbnail-wrap">
<div class="product-thumb-carousel owl-carousel">
<div class="single-thumb-item">
<a href="single-product.html"><img class="img-fluid"
src="assets/img/single-pro-1.jpg" alt="产品" /></a>
</div>
<div class="single-thumb-item">
<a href="single-product.html"><img class="img-fluid"
src="assets/img/single-pro-2.jpg" alt="产品" /></a>
</div>
<div class="single-thumb-item">
<a href="single-product.html"><img class="img-fluid"
src="assets/img/single-pro-3.jpg" alt="产品" /></a>
</div>
<div class="single-thumb-item">
<a href="single-product.html"><img class="img-fluid"
src="assets/img/single-pro-4.jpg" alt="产品" /></a>
</div>
</div>
</div>
</div>
<!-- 产品缩略图结束 -->
<!-- 产品详情开始 -->
<div class="col-lg-7 col-md-6 mt-5 mt-md-0">
<div class="product-details">
<h2><a href="single-product.html">Crown Summit 背包</a></h2>
<div class="rating">
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star"></i>
<i class="fa fa-star-half"></i>
<i class="fa fa-star-o"></i>
</div>
<span class="price">$52.00</span>
<div class="product-info-stock-sku">
<span class="product-stock-status text-success">有货</span>
<span class="product-sku-status ml-5"><strong>SKU</strong> MH03</span>
</div>
<p class="products-desc">适合寒冷天气训练的Chaz
Hoodie，每次穿着都能提供卓越的保暖效果。厚实的材料阻挡寒风，罗纹袖口和下摆密封身体热量。Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Enim, reprehenderit.</p>
<div class="shopping-option-item">
<h4>颜色</h4>
<ul class="color-option-select d-flex">
<li class="color-item black">
<div class="color-hvr">
<span class="color-fill"></span>
<span class="color-name">黑色</span>
</div>
</li>
<li class="color-item green">
<div class="color-hvr">
<span class="color-fill"></span>
<span class="color-name">绿色</span>
</div>
</li>
<li class="color-item orange">
<div class="color-hvr">
<span class="color-fill"></span>
<span class="color-name">橙色</span>
</div>
</li>
</ul>
</div>
<div class="product-quantity d-flex align-items-center">
<div class="quantity-field">
<label for="qty">数量</label>
<input type="number" id="qty" min="1" max="100" value="1" />
</div>
<a href="cart.html" class="btn">加入购物车</a>
</div>
</div>
</div>
<!-- 产品详情结束 -->
</div>
</div>
</div>
</div>
</div>
</div>
<!--== 产品快速查看模态框区域结束 ==-->
<!--=======================Javascript============================-->
<!--=== Jquery Min Js ===-->
<script src="assets/js/vendor/jquery-3.3.1.min.js"></script>
<!--=== Jquery Migrate Min Js ===-->
<script src="assets/js/vendor/jquery-migrate-1.4.1.min.js"></script>
<!--=== Popper Min Js ===-->
<script src="assets/js/vendor/popper.min.js"></script>
<!--=== Bootstrap Min Js ===-->
<script src="assets/js/vendor/bootstrap.min.js"></script>
<!--=== Ajax Mail Js ===-->
<script src="assets/js/ajax-mail.js"></script>
<!--=== Plugins Min Js ===-->
<script src="assets/js/plugins.js"></script>
<!--=== Active Js ===-->
<script src="assets/js/active.js"></script>
</body>
</html>六、学习更多
关注我，学习更多知识。
码字不易，各位大佬点点赞
有需要完整源码的同学可三联留言、后台私信我
博客有待更新
码字不易，各位大佬点点赞
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
