<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>通用适配应用</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/icons.css">
<link rel="stylesheet" href="css/index.css">
<script src="js/flexible.js"></script>
</head>
<body>
<header class="header-container">
<div class="navbar">
<div class="navbar-left">
<i class="iconfont icon-scan"></i>
</div>
<div class="navbar-center">
<div class="searchBox">
<div class="searchBox-prepend">
<i class="iconfont icon-search"></i>
</div>
<input type="text" class="searchBox-input" placeholder="开学季有礼，好货5折起">
<div class="searchBox-append">
<i class="iconfont icon-close"></i>
</div>
</div>
</div>
<div class="navbar-right">
<i class="iconfont icon-msg"></i>
</div>
</div>
</header>
<div class="main-container">
<div class="slider-container">
<img src="img/slider/1.jpg" alt="slider">
</div>
<nav class="nav-container">
<ul class="nav">
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/1.png" alt="nav" class="nav-img">
<span class="nav-text">团购</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/2.png" alt="nav" class="nav-img">
<span class="nav-text">一元购</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/3.png" alt="nav" class="nav-img">
<span class="nav-text">优惠券</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/4.png" alt="nav" class="nav-img">
<span class="nav-text">教育</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/5.png" alt="nav" class="nav-img">
<span class="nav-text">旅行</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/6.png" alt="nav" class="nav-img">
<span class="nav-text">在线订餐</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/7.png" alt="nav" class="nav-img">
<span class="nav-text">庆典</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/8.png" alt="nav" class="nav-img">
<span class="nav-text">秒杀</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/9.png" alt="nav" class="nav-img">
<span class="nav-text">拍卖</span>
</a>
</li>
<li class="nav-item">
<a href="###" class="nav-link">
<img src="img/nav/10.png" alt="nav" class="nav-img">
<span class="nav-text">服务</span>
</a>
</li>
</ul>
</nav>
<div class="recommend-container">
<ul class="recommend">
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/1.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">欧派整体橱柜定制简约现代</p>
<p class="recommend-origPrice">
<del>¥2000.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">1000</strong></span>
<span class="recommend-count">985件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/2.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">创维55吋4K超高清HDR</p>
<p class="recommend-origPrice">
<del>¥2999.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">2299</strong></span>
<span class="recommend-count">63件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/3.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">【到手259元】苏泊尔 5L电压力锅</p>
<p class="recommend-origPrice">
<del>¥799.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">299</strong></span>
<span class="recommend-count">1908件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/4.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">三只松鼠坚果礼包</p>
<p class="recommend-origPrice">
<del>¥125.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">108</strong></span>
<span class="recommend-count">9532件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/5.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">蓝月亮洗衣液12斤</p>
<p class="recommend-origPrice">
<del>¥133.40</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
<span class="recommend-count">5399件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/6.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">福临门葵花玉米油</p>
<p class="recommend-origPrice">
<del>¥109.90</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">89.9</strong></span>
<span class="recommend-count">6294件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/7.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">TP-LINK 全千兆端口双频无线路由器</p>
<p class="recommend-origPrice">
<del>¥179.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">169</strong></span>
<span class="recommend-count">4255件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/8.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">【前1800名再减50】家用高压洗车机</p>
<p class="recommend-origPrice">
<del>¥790.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">268</strong></span>
<span class="recommend-count">1599件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/9.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">德国鲁茜rusch迷你婴儿辅食机 宝宝</p>
<p class="recommend-origPrice">
<del>¥898.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">159</strong></span>
<span class="recommend-count">881件已售</span>
</p>
</a>
</li>
<li class="recommend-item">
<a href="###" class="recommend-link">
<p class="recommend-pic">
<img src="img/recommend/10.jpg" alt="recommend" class="recommend-img">
</p>
<p class="recommend-name">西域之尚红枣500g*5袋</p>
<p class="recommend-origPrice">
<del>¥89.00</del>
</p>
<p class="recommend-info">
<span class="recommend-price">¥<strong class="recommend-price-num">29.9</strong></span>
<span class="recommend-count">15049件已售</span>
</p>
</a>
</li>
</ul>
</div>
</div>
<div class="tabbar-container">
<ul class="tabbar">
<li class="tabbar-item tabbar-item-active">
<a href="###" class="tabbar-link">
<i class="iconfont icon-home"></i>
<span>首页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-category"></i>
<span>分类页</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-cart"></i>
<span>购物车</span>
</a>
</li>
<li class="tabbar-item">
<a href="###" class="tabbar-link">
<i class="iconfont icon-personal"></i>
<span>个人中心</span>
</a>
</li>
</ul>
</div>
</body>
</html>