每日日报2021.11.29
完成内容：
人机交互bs
404页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>404</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/css2.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/owl.carousel.min.css">
<link rel="stylesheet" href="static/css/animate.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.css">
<link rel="stylesheet" href="static/css/slick.css">
<link rel="stylesheet" href="static/css/chosen.min.css">
<link rel="stylesheet" href="static/css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="static/css/magnific-popup.min.css">
<link rel="stylesheet" href="static/css/lightbox.min.css">
<link rel="stylesheet" href="static/css/jquery.fancybox.css">
<link rel="stylesheet" href="static/css/jquery.scrollbar.min.css">
<link rel="stylesheet" href="static/css/mobile-menu.css">
<link rel="stylesheet" href="static/css/flaticon.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body class="inblog-page">
<header class="header style7">
<div class="top-bar">
<div class="container">
<div class="top-bar-left">
<div class="header-message">
欢迎来到雷宇的小店
</div>
</div>
<div class="top-bar-right">
<ul class="header-user-links">
<li>
<a href="login.html">注册或登录</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="main-header">
<div class="row">
<div class="col-lg-3 col-sm-4 col-md-3 col-xs-7 col-ts-12 header-element">
<div class="logo">
<a href="index.html">
<img src="static/picture/logo.png" alt="img">
</a>
</div>
</div>
<div class="col-lg-7 col-sm-8 col-md-6 col-xs-5 col-ts-12">
<div class="block-search-block">
<form class="form-search form-search-width-category">
<div class="form-content">
<div class="category">
<select title="cate" data-placeholder="All Categories" class="chosen-select" tabindex="1">
<option value="United States">配件</option>
<option value="United Kingdom">电视 & 视频</option>
<option value="Afghanistan">桌子</option>
<option value="Aland Islands">沙发</option>
<option value="Albania">新品上市</option>
<option value="Algeria">存储</option>
</select>
</div>
<div class="inner">
<input type="text" class="input" name="s" value="" placeholder="请输入">
</div>
<button class="btn-search" type="submit">
<span class="icon-search"></span>
</button>
</div>
</form>
</div>
</div>
<div class="col-lg-2 col-sm-12 col-md-3 col-xs-12 col-ts-12">
<div class="header-control">
<div class="block-minicart dungar-mini-cart block-header dungar-dropdown">
<a href="javascript:void(0);" class="shopcart-icon" data-dungar="dungar-dropdown">
Cart
<span class="count">
0
</span>
</a>
<div class="no-product dungar-submenu">
<p class="text">
你的购物车有
<span>
0 个
</span>
物品
</p>
</div>
</div>
<div class="block-account block-header dungar-dropdown">
<a href="javascript:void(0);" data-dungar="dungar-dropdown">
<span class="flaticon-user"></span>
</a>
<div class="header-account dungar-submenu">
<div class="header-user-form-tabs">
<ul class="tab-link">
<li class="active">
<a data-toggle="tab" aria-expanded="true" href="#header-tab-login">登录</a>
</li>
<li>
<a data-toggle="tab" aria-expanded="true" href="#header-tab-rigister">注册</a>
</li>
</ul>
<div class="tab-container">
<div id="header-tab-login" class="tab-panel active">
<form method="post" class="login form-login">
<p class="form-row form-row-wide">
<input type="email" placeholder="邮箱" class="input-text">
</p>
<p class="form-row form-row-wide">
<input type="password" class="input-text" placeholder="密码">
</p>
<p class="form-row">
<label class="form-checkbox">
<input type="checkbox" class="input-checkbox">
<span>
记住
</span>
</label>
<input type="submit" class="button" value="登录">
</p>
<p class="lost_password">
<a href="#">忘记密码?</a>
</p>
</form>
</div>
<div id="header-tab-rigister" class="tab-panel">
<form method="post" class="register form-register">
<p class="form-row form-row-wide">
<input type="email" placeholder="邮箱" class="input-text">
</p>
<p class="form-row form-row-wide">
<input type="password" class="input-text" placeholder="密码">
</p>
<p class="form-row">
<input type="submit" class="button" value="注册">
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<a class="menu-bar mobile-navigation menu-toggle" href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-nav-container">
<div class="container">
<div class="header-nav-wapper main-menu-wapper">
<div class="vertical-wapper block-nav-categori">
<div class="block-title">
<span class="icon-bar">
<span></span>
<span></span>
<span></span>
</span>
<span class="text">所有分类</span>
</div>
<div class="block-content verticalmenu-content">
<ul class="dungar-nav-vertical vertical-menu dungar-clone-mobile-menu">
<li class="menu-item">
<a href="#" class="dungar-menu-item-title" title="New Arrivals">新品上市</a>
</li>
<li class="menu-item">
<a title="Hot Sale" href="#" class="dungar-menu-item-title">热销</a>
</li>
<li class="menu-item menu-item-has-children">
<a title="Accessories" href="#" class="dungar-menu-item-title">配件</a>
<span class="toggle-submenu"></span>
<ul role="menu" class=" submenu">
<li class="menu-item">
<a title="Clock" href="#" class="dungar-item-title">时钟</a>
</li>
<li class="menu-item">
<a title="TV & Video" href="#" class="dungar-item-title">电视 & 视频</a>
</li>
<li class="menu-item">
<a title="New Arrivals" href="#" class="dungar-item-title">新品上市</a>
</li>
<li class="menu-item">
<a title="Storage" href="#" class="dungar-item-title">存储</a>
</li>
</ul>
</li>
<li class="menu-item">
<a title="TV & Video" href="#" class="dungar-menu-item-title">电视 & 视频</a>
</li>
<li class="menu-item">
<a title="Headphones" href="#" class="dungar-menu-item-title">耳机</a>
</li>
<li class="menu-item">
<a title="Mouse" href="#" class="dungar-menu-item-title">鼠标</a>
</li>
<li class="menu-item">
<a title="Cell Phones" href="#" class="dungar-menu-item-title">手机</a>
</li>
<li class="menu-item">
<a title="Camera" href="#" class="dungar-menu-item-title">相机</a>
</li>
</ul>
</div>
</div>
<div class="header-nav">
<div class="container-wapper">
<ul class="dungar-clone-mobile-menu dungar-nav main-menu " id="menu-main-menu">
<li class="menu-item menu-item-has-children">
<a href="index.html" class="dungar-menu-item-title" title="Home">主页</a>
<span class="toggle-submenu"></span>
<ul class="submenu">
<li class="menu-item">
<a href="index.html">主页</a>
</li>
<li class="menu-item">
<a href="home2.html">副页</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="gridproducts.html" class="dungar-menu-item-title" title="Shop">购买</a>
<span class="toggle-submenu"></span>
<ul class="submenu">
<li class="menu-item">
<a href="gridproducts.html">网格</a>
</li>
<li class="menu-item">
<a href="gridproducts_leftsidebar.html">侧边栏</a>
</li>
<li class="menu-item">
<a href="listproducts.html">列表</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children item-megamenu">
<a href="#" class="dungar-menu-item-title" title="Pages">页面</a>
<span class="toggle-submenu"></span>
<div class="submenu mega-menu menu-page">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
<div class="dungar-custommenu default">
<h2 class="widgettitle">购物页面</h2>
<ul class="menu">
<li class="menu-item">
<a href="shoppingcart.html">购物车</a>
</li>
<li class="menu-item">
<a href="wishlist.html">愿望清单</a>
</li>
<li class="menu-item">
<a href="checkout.html">付款</a>
</li>
<li class="menu-item">
<a href="contact.html">联系我们</a>
</li>
<li class="menu-item">
<a href="404page.html">404</a>
</li>
<li class="menu-item">
<a href="login.html">登录/注册</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
<div class="dungar-custommenu default">
<h2 class="widgettitle">产品</h2>
<ul class="menu">
<li class="menu-item">
<a href="productdetails-fullwidth.html">产品详细</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
</div>
</div>
</div>
</li>
<li class="menu-item">
<a href="bloggrid.html" class="dungar-menu-item-title" title="Blogs">博客</a>
<span class="toggle-submenu"></span>
</li>
<li class="menu-item">
<a href="about.html" class="dungar-menu-item-title" title="About">关于我们</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div class="main-content main-content-404 right-sidebar">
<div class="container">
<div class="row">
<div class="content-area content-404 col-lg-12 col-md-12 col-sm-12 col-xs-12">
<div class="site-main">
<section class="error-404 not-found">
<div class="images">
<img src="static/picture/404.png" alt="img">
</div>
<div class="text-404">
<h1 class="page-title">
Error 404 Not Found
</h1>
<p class="page-content">
很抱歉你所访问的页面不存在<br>
你可以返回
<a href="index.html" class="hightlight"> 主页面</a>
!
</p>
</div>
</section>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/jquery-1.12.4.min.js"></script>
<script src="static/js/jquery.plugin-countdown.min.js"></script>
<script src="static/js/jquery-countdown.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/magnific-popup.min.js"></script>
<script src="static/js/isotope.min.js"></script>
<script src="static/js/jquery.scrollbar.min.js"></script>
<script src="static/js/jquery-ui.min.js"></script>
<script src="static/js/mobile-menu.min.js"></script>
<script src="static/js/chosen.min.js"></script>
<script src="static/js/slick.min.js"></script>
<script src="static/js/jquery.elevateZoom.min.js"></script>
<script src="static/js/jquery.actual.min.js"></script>
<script src="static/js/jquery.fancybox.js"></script>
<script src="static/js/lightbox.min.js"></script>
<script src="static/js/owl.thumbs.min.js"></script>
<script src="static/js/jquery.scrollbar.min.js"></script>
<script src="static/js/frontend-plugin.js"></script>
</body>
</html>
主页面
<!DOCTYPE html>
<html lang="en">
<head>
<title>Home</title>
<meta charset="UTF-8">
<meta http-equiv="X-UA-compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="static/css/css2.css" rel="stylesheet">
<link rel="stylesheet" href="static/css/bootstrap.min.css">
<link rel="stylesheet" href="static/css/font-awesome.min.css">
<link rel="stylesheet" href="static/css/owl.carousel.min.css">
<link rel="stylesheet" href="static/css/animate.min.css">
<link rel="stylesheet" href="static/css/jquery-ui.css">
<link rel="stylesheet" href="static/css/slick.css">
<link rel="stylesheet" href="static/css/chosen.min.css">
<link rel="stylesheet" href="static/css/pe-icon-7-stroke.css">
<link rel="stylesheet" href="static/css/magnific-popup.min.css">
<link rel="stylesheet" href="static/css/lightbox.min.css">
<link rel="stylesheet" href="static/css/jquery.fancybox.css">
<link rel="stylesheet" href="static/css/jquery.scrollbar.min.css">
<link rel="stylesheet" href="static/css/mobile-menu.css">
<link rel="stylesheet" href="static/css/flaticon.css">
<link rel="stylesheet" href="static/css/style.css">
</head>
<body class="home">
<header class="header style7">
<div class="top-bar">
<div class="container">
<div class="top-bar-left">
<div class="header-message">
欢迎来到雷宇的小店
</div>
</div>
<div class="top-bar-right">
<ul class="header-user-links">
<li>
<a href="login.html">注册或登录</a>
</li>
</ul>
</div>
</div>
</div>
<div class="container">
<div class="main-header">
<div class="row">
<div class="col-lg-3 col-sm-4 col-md-3 col-xs-7 col-ts-12 header-element">
<div class="logo">
<a href="index.html">
<img src="static/picture/logo.png" alt="img">
</a>
</div>
</div>
<div class="col-lg-7 col-sm-8 col-md-6 col-xs-5 col-ts-12">
<div class="block-search-block">
<form class="form-search form-search-width-category">
<div class="form-content">
<div class="category">
<select title="cate" data-placeholder="All Categories" class="chosen-select" tabindex="1">
<option value="United States">配件</option>
<option value="United Kingdom">电视 & 视频</option>
<option value="Afghanistan">桌子</option>
<option value="Aland Islands">沙发</option>
<option value="Albania">新品上市</option>
<option value="Algeria">存储</option>
</select>
</div>
<div class="inner">
<input type="text" class="input" name="s" value="" placeholder="请输入">
</div>
<button class="btn-search" type="submit">
<span class="icon-search"></span>
</button>
</div>
</form>
</div>
</div>
<div class="col-lg-2 col-sm-12 col-md-3 col-xs-12 col-ts-12">
<div class="header-control">
<div class="block-minicart dungar-mini-cart block-header dungar-dropdown">
<a href="javascript:void(0);" class="shopcart-icon" data-dungar="dungar-dropdown">
Cart
<span class="count">
0
</span>
</a>
<div class="no-product dungar-submenu">
<p class="text">
你的购物车有
<span>
0 个
</span>
物品
</p>
</div>
</div>
<div class="block-account block-header dungar-dropdown">
<a href="javascript:void(0);" data-dungar="dungar-dropdown">
<span class="flaticon-user"></span>
</a>
<div class="header-account dungar-submenu">
<div class="header-user-form-tabs">
<ul class="tab-link">
<li class="active">
<a data-toggle="tab" aria-expanded="true" href="#header-tab-login">登录</a>
</li>
<li>
<a data-toggle="tab" aria-expanded="true" href="#header-tab-rigister">注册</a>
</li>
</ul>
<div class="tab-container">
<div id="header-tab-login" class="tab-panel active">
<form method="post" class="login form-login">
<p class="form-row form-row-wide">
<input type="email" placeholder="邮箱" class="input-text">
</p>
<p class="form-row form-row-wide">
<input type="password" class="input-text" placeholder="密码">
</p>
<p class="form-row">
<label class="form-checkbox">
<input type="checkbox" class="input-checkbox">
<span>
记住
</span>
</label>
<input type="submit" class="button" value="登录">
</p>
<p class="lost_password">
<a href="#">忘记密码?</a>
</p>
</form>
</div>
<div id="header-tab-rigister" class="tab-panel">
<form method="post" class="register form-register">
<p class="form-row form-row-wide">
<input type="email" placeholder="邮箱" class="input-text">
</p>
<p class="form-row form-row-wide">
<input type="password" class="input-text" placeholder="密码">
</p>
<p class="form-row">
<input type="submit" class="button" value="注册">
</p>
</form>
</div>
</div>
</div>
</div>
</div>
<a class="menu-bar mobile-navigation menu-toggle" href="#">
<span></span>
<span></span>
<span></span>
</a>
</div>
</div>
</div>
</div>
</div>
<div class="header-nav-container">
<div class="container">
<div class="header-nav-wapper main-menu-wapper">
<div class="vertical-wapper block-nav-categori">
<div class="block-title">
<span class="icon-bar">
<span></span>
<span></span>
<span></span>
</span>
<span class="text">所有分类</span>
</div>
<div class="block-content verticalmenu-content">
<ul class="dungar-nav-vertical vertical-menu dungar-clone-mobile-menu">
<li class="menu-item">
<a href="#" class="dungar-menu-item-title" title="New Arrivals">新品上市</a>
</li>
<li class="menu-item">
<a title="Hot Sale" href="#" class="dungar-menu-item-title">热销</a>
</li>
<li class="menu-item menu-item-has-children">
<a title="Accessories" href="#" class="dungar-menu-item-title">配件</a>
<span class="toggle-submenu"></span>
<ul role="menu" class=" submenu">
<li class="menu-item">
<a title="Clock" href="#" class="dungar-item-title">时钟</a>
</li>
<li class="menu-item">
<a title="TV & Video" href="#" class="dungar-item-title">电视 & 视频</a>
</li>
<li class="menu-item">
<a title="New Arrivals" href="#" class="dungar-item-title">新品上市</a>
</li>
<li class="menu-item">
<a title="Storage" href="#" class="dungar-item-title">存储</a>
</li>
</ul>
</li>
<li class="menu-item">
<a title="TV & Video" href="#" class="dungar-menu-item-title">电视 & 视频</a>
</li>
<li class="menu-item">
<a title="Headphones" href="#" class="dungar-menu-item-title">耳机</a>
</li>
<li class="menu-item">
<a title="Mouse" href="#" class="dungar-menu-item-title">鼠标</a>
</li>
<li class="menu-item">
<a title="Cell Phones" href="#" class="dungar-menu-item-title">手机</a>
</li>
<li class="menu-item">
<a title="Camera" href="#" class="dungar-menu-item-title">相机</a>
</li>
</ul>
</div>
</div>
<div class="header-nav">
<div class="container-wapper">
<ul class="dungar-clone-mobile-menu dungar-nav main-menu " id="menu-main-menu">
<li class="menu-item menu-item-has-children">
<a href="index.html" class="dungar-menu-item-title" title="Home">主页</a>
<span class="toggle-submenu"></span>
<ul class="submenu">
<li class="menu-item">
<a href="index.html">主页</a>
</li>
<li class="menu-item">
<a href="home2.html">副页</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children">
<a href="gridproducts.html" class="dungar-menu-item-title" title="Shop">购买</a>
<span class="toggle-submenu"></span>
<ul class="submenu">
<li class="menu-item">
<a href="gridproducts.html">网格</a>
</li>
<li class="menu-item">
<a href="gridproducts_leftsidebar.html">侧边栏</a>
</li>
<li class="menu-item">
<a href="listproducts.html">列表</a>
</li>
</ul>
</li>
<li class="menu-item menu-item-has-children item-megamenu">
<a href="#" class="dungar-menu-item-title" title="Pages">页面</a>
<span class="toggle-submenu"></span>
<div class="submenu mega-menu menu-page">
<div class="row">
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
<div class="dungar-custommenu default">
<h2 class="widgettitle">购物页面</h2>
<ul class="menu">
<li class="menu-item">
<a href="shoppingcart.html">购物车</a>
</li>
<li class="menu-item">
<a href="wishlist.html">愿望清单</a>
</li>
<li class="menu-item">
<a href="checkout.html">付款</a>
</li>
<li class="menu-item">
<a href="contact.html">联系我们</a>
</li>
<li class="menu-item">
<a href="404page.html">404</a>
</li>
<li class="menu-item">
<a href="login.html">登录/注册</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
<div class="dungar-custommenu default">
<h2 class="widgettitle">产品</h2>
<ul class="menu">
<li class="menu-item">
<a href="productdetails-fullwidth.html">产品详细</a>
</li>
</ul>
</div>
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
</div>
<div class="col-xs-12 col-sm-12 col-md-12 col-lg-3 menu-page-item">
</div>
</div>
</div>
</li>
<li class="menu-item">
<a href="bloggrid.html" class="dungar-menu-item-title" title="Blogs">博客</a>
<span class="toggle-submenu"></span>
</li>
<li class="menu-item">
<a href="about.html" class="dungar-menu-item-title" title="About">关于我们</a>
</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</header>
<div>
<div class="fullwidth-template">
<div class="home-slider-banner">
<div class="container">
<div class="row10">
<div class="col-lg-8 silider-wrapp">
<div class="home-slider">
<div class="slider-owl owl-slick equal-container nav-center" data-slick='{"autoplay":true, "autoplaySpeed":9000, "arrows":false, "dots":true, "infinite":true, "speed":1000, "rows":1}' data-responsive='[{"breakpoint":"2000","settings":{"slidesToShow":1}}]'>
<div class="slider-item style7">
<div class="slider-inner equal-element">
<div class="slider-infor">
<h5 class="title-small">
折扣高达 40% !
</h5>
<h3 class="title-big">
秋冬 <br>系列
</h3>
<div class="price">
价格:
<span class="number-price">
2700元
</span>
</div>
<a href="gridproducts.html" class="button btn-shop-the-look bgroud-style">立即购买</a>
</div>
</div>
</div>
<div class="slider-item style8">
<div class="slider-inner equal-element">
<div class="slider-infor">
<h5 class="title-small">
平板电脑
</h5>
<h3 class="title-big">
现在拥有<br>25%的折扣!
</h3>
<div class="price">
价格:
<span class="number-price">
1700元
</span>
</div>
<a href="gridproducts.html" class="button btn-shop-product">立即购买</a>
</div>
</div>
</div>
<div class="slider-item style9">
<div class="slider-inner equal-element">
<div class="slider-infor">
<h5 class="title-small">
高端系列
</h5>
<h3 class="title-big">
头戴式耳机 <br>高端音质
</h3>
<div class="price">
价格:
<span class="number-price">
2500元
</span>
</div>
<a href="gridproducts.html" class="button btn-chekout">立即购买</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-4 banner-wrapp">
<div class="banner">
<div class="item-banner style7">
<div class="inner">
<div class="banner-content">
<h3 class="title">挑选 <br>物品</h3>
<a href="gridproducts.html" class="button btn-lets-do-it">立即购买</a>
</div>
</div>
</div>
</div>
<div class="banner">
<div class="item-banner style8">
<div class="inner">
<div class="banner-content">
<h3 class="title">最好的<br>产品</h3>
<span class="price">$379.00</span>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dungar-product produc-featured rows-space-65">
<div class="container">
<h3 class="custommenu-title-blog">
限时折扣
</h3>
<div class="owl-products owl-slick equal-container nav-center" data-slick='{"autoplay":false, "autoplaySpeed":1000, "arrows":false, "dots":true, "infinite":false, "speed":800, "rows":1}' data-responsive='[{"breakpoint":"2000","settings":{"slidesToShow":4}},{"breakpoint":"1200","settings":{"slidesToShow":3}},{"breakpoint":"992","settings":{"slidesToShow":2}},{"breakpoint":"480","settings":{"slidesToShow":1}}]'>
<div class="product-item style-5">
<div class="product-inner equal-element">
<div class="product-top">
<div class="flash">
<span class="onnew">
<span class="text">
新品
</span>
</span>
</div>
</div>
<div class="product-thumb">
<div class="thumb-inner">
<a href="productdetails-fullwidth.html">
<img src="static/picture/product-item-17.jpg" alt="img">
</a>
<div class="thumb-group">
<div class="yith-wcwl-add-to-wishlist">
<div class="yith-wcwl-add-button">
<a href="wishlist.html">Add to Wishlist</a>
</div>
</div>
<a href="#" class="button quick-wiew-button">Quick View</a>
<div class="loop-form-add-to-cart">
<a href="shoppingcart.html" class="single_add_to_cart_button button">Add to cart</a>
</div>
</div>
</div>
<div class="product-count-down">
<div class="dungar-countdown" data-y="2021" data-m="10" data-w="4" data-d="10" data-h="20" data-i="20" data-s="60"></div>
</div>
</div>
<div class="product-info">
<h5 class="product-name product_title">
<a href="productdetails-fullwidth.html">音响</a>
</h5>
<div class="group-info">
<div class="stars-rating">
<div class="star-rating">
<span class="star-3"></span>
</div>
<div class="count-star">
(3)
</div>
</div>
<div class="price">
<del>
$65
</del>
<ins>
$45
</ins>
</div>
</div>
</div>
</div>
</div>
<div class="product-item style-5">
<div class="product-inner equal-element">
<div class="product-top">
<div class="flash">
<span class="onnew">
<span class="text">
新品
</span>
</span>
</div>
</div>
<div class="product-thumb">
<div class="thumb-inner">
<a href="productdetails-fullwidth.html">
<img src="static/picture/product-item-21.jpg" alt="img">
</a>
<div class="thumb-group">
<div class="yith-wcwl-add-to-wishlist">
<div class="yith-wcwl-add-button">
<a href="wishlist.html">Add to Wishlist</a>
</div>
</div>
<a href="#" class="button quick-wiew-button">Quick View</a>
<div class="loop-form-add-to-cart">
<a href="shoppingcart.html" class="single_add_to_cart_button button">Add to cart</a>
</div>
</div>
</div>
<div class="product-count-down">
<div class="dungar-countdown" data-y="2021" data-m="9" data-w="2" data-d="30" data-h="20" data-i="60" data-s="60"></div>
</div>
</div>
<div class="product-info">
<h5 class="product-name product_title">
<a href="productdetails-fullwidth.html">鼠标</a>
</h5>
<div class="group-info">
<div class="stars-rating">
<div class="star-rating">
<span class="star-3"></span>
</div>
<div class="count-star">
(3)
</div>
</div>
<div class="price">
<del>
$65
</del>
<ins>
$45
</ins>
</div>
</div>
</div>
</div>
</div>
<div class="product-item style-5">
<div class="product-inner equal-element">
<div class="product-top">
<div class="flash">
<span class="onnew">
<span class="text">
新品
</span>
</span>
</div>
</div>
<div class="product-thumb">
<div class="thumb-inner">
<a href="productdetails-fullwidth.html">
<img src="static/picture/product-item-20.jpg" alt="img">
</a>
<div class="thumb-group">
<div class="yith-wcwl-add-to-wishlist">
<div class="yith-wcwl-add-button">
<a href="wishlist.html">Add to Wishlist</a>
</div>
</div>
<a href="#" class="button quick-wiew-button">Quick View</a>
<div class="loop-form-add-to-cart">
<a href="shoppingcart.html" class="single_add_to_cart_button button">Add to cart</a>
</div>
</div>
</div>
<div class="product-count-down">
<div class="dungar-countdown" data-y="2021" data-m="12" data-w="1" data-d="24" data-h="20" data-i="50" data-s="60"></div>
</div>
</div>
<div class="product-info">
<h5 class="product-name product_title">
<a href="productdetails-fullwidth.html">手柄</a>
</h5>
<div class="group-info">
<div class="stars-rating">
<div class="star-rating">
<span class="star-3"></span>
</div>
<div class="count-star">
(3)
</div>
</div>
<div class="price">
<del>
$65
</del>
<ins>
$45
</ins>
</div>
</div>
</div>
</div>
</div>
<div class="product-item style-5">
<div class="product-inner equal-element">
<div class="product-top">
<div class="flash">
<span class="onnew">
<span class="text">
新品
</span>
</span>
</div>
</div>
<div class="product-thumb">
<div class="thumb-inner">
<a href="productdetails-fullwidth.html">
<img src="static/picture/product-item-22.jpg" alt="img">
</a>
<div class="thumb-group">
<div class="yith-wcwl-add-to-wishlist">
<div class="yith-wcwl-add-button">
<a href="wishlist.html">Add to Wishlist</a>
</div>
</div>
<a href="#" class="button quick-wiew-button">Quick View</a>
<div class="loop-form-add-to-cart">
<a href="shoppingcart.html" class="single_add_to_cart_button button">Add to cart</a>
</div>
</div>
</div>
<div class="product-count-down">
<div class="dungar-countdown" data-y="2022" data-m="7" data-w="3" data-d="20" data-h="10" data-i="10" data-s="20"></div>
</div>
</div>
<div class="product-info">
<h5 class="product-name product_title">
<a href="productdetails-fullwidth.html">Iphone 8</a>
</h5>
<div class="group-info">
<div class="stars-rating">
<div class="star-rating">
<span class="star-3"></span>
</div>
<div class="count-star">
(3)
</div>
</div>
<div class="price">
<del>
$65
</del>
<ins>
$45
</ins>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-wrapp">
<div class="container">
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="banner">
<div class="item-banner style4">
<div class="inner">
<div class="banner-content">
<h4 class="dungar-subtitle">巅峰之作</h4>
<h3 class="title">顶尖系列</h3>
<a href="gridproducts.html" class="button btn-shop-now">立即购买</a>
</div>
</div>
</div>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="banner">
<div class="item-banner style5">
<div class="inner">
<div class="banner-content">
<h3 class="title">配件折扣</h3>
<span class="code">
所有配件均享受25%折扣!
</span>
<a href="gridproducts.html" class="button btn-shop-now">立即购买</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="banner-wrapp rows-space-65">
<div class="container">
<div class="banner">
<div class="item-banner style17">
<div class="inner">
<div class="banner-content">
<h3 class="title">系列上新</h3>
<div class="description">
准备好了吗？<br>快来购物吧!
</div>
<div class="banner-price">
价格:
<span class="number-price">4500元</span>
</div>
<a href="gridproducts.html" class="button btn-shop-now">立即购买</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="dungar-iconbox-wrapp default">
<div class="container">
<div class="row">
<div class="col-md-4 col-sm-4">
<div class="dungar-iconbox default">
<div class="iconbox-inner">
<div class="icon-item">
<span class="icon flaticon-rocket-ship"></span>
</div>
<div class="content">
<h4 class="title">
免费配送
</h4>
<div class="text">
我们拥有最快的配送速度，第一时间为你送上我们的产品
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="dungar-iconbox default">
<div class="iconbox-inner">
<div class="icon-item">
<span class="icon flaticon-return"></span>
</div>
<div class="content">
<h4 class="title">
产品服务
</h4>
<div class="text">
我们提供30天的免费退换服务，尽情享用我们的产品
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 col-sm-4">
<div class="dungar-iconbox default">
<div class="iconbox-inner">
<div class="icon-item">
<span class="icon flaticon-padlock"></span>
</div>
<div class="content">
<h4 class="title">
24/7 全天候支持
</h4>
<div class="text">
我们提供7*24小时的咨询服务，你想了解的立马知道
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="static/js/jquery-1.12.4.min.js"></script>
<script src="static/js/jquery.plugin-countdown.min.js"></script>
<script src="static/js/jquery-countdown.min.js"></script>
<script src="static/js/bootstrap.min.js"></script>
<script src="static/js/owl.carousel.min.js"></script>
<script src="static/js/magnific-popup.min.js"></script>
<script src="static/js/isotope.min.js"></script>
<script src="static/js/jquery.scrollbar.min.js"></script>
<script src="static/js/jquery-ui.min.js"></script>
<script src="static/js/mobile-menu.min.js"></script>
<script src="static/js/chosen.min.js"></script>
<script src="static/js/slick.min.js"></script>
<script src="static/js/jquery.elevateZoom.min.js"></script>
<script src="static/js/jquery.actual.min.js"></script>
<script src="static/js/jquery.fancybox.js"></script>
<script src="static/js/lightbox.min.js"></script>
<script src="static/js/owl.thumbs.min.js"></script>
<script src="static/js/jquery.scrollbar.min.js"></script>
<script src="static/js/frontend-plugin.js"></script>
</body>
</html>
遇到问题：
无
目标：继续学习
