代码拉取完成，页面将自动刷新
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>头部导航栏布局</title>
<link rel="stylesheet" href="./css/reset.css">
<link rel="stylesheet" href="./css/swiper.min.css">
<link rel="stylesheet" href="./css/home.css">
</head>
<body>
<!-- 项目的最外层 -->
<div class="outer">
<!-- 头部 -->
<header class="header">
<!-- 头部的第一行 -->
<div class="top">
<div class="container">
<div class="loginList">
<p>尚品汇欢迎您！</p>
<p>
<span>请</span>
<a href="###">登录</a>
<a href="###" class="register">免费注册</a>
</p>
</div>
<div class="typeList">
<a href="###">我的订单</a>
<a href="###">我的购物车</a>
<a href="###">我的尚品汇</a>
<a href="###">尚品汇会员</a>
<a href="###">企业采购</a>
<a href="###">关注尚品汇</a>
<a href="###">合作招商</a>
<a href="###">商家后台</a>
</div>
</div>
</div>
<!--头部第二行 搜索区域-->
<div class="bottom">
<h1 class="logoArea">
<a class="logo" title="尚品汇" href="###" target="_blank">
<img src="./images/logo.png" alt="">
</a>
</h1>
<div class="searchArea">
<form action="###" class="searchForm">
<input type="text" id="autocomplete" class="input-error input-xxlarge" />
<button class="sui-btn btn-xlarge btn-danger" type="button">搜索</button>
</form>
</div>
</div>
</header>
<!-- 商品分类导航 -->
<div class="type-nav">
<div class="container">
<h2 class="all">全部商品分类</h2>
<nav class="nav">
<a href="###">服装城</a>
<a href="###">美妆馆</a>
<a href="###">尚品汇超市</a>
<a href="###">全球购</a>
<a href="###">闪购</a>
<a href="###">团购</a>
<a href="###">有趣</a>
<a href="###">秒杀</a>
</nav>
<div class="sort">
<div class="all-sort-list2">
<div class="item bo">
<h3>
<a href="">图书、音像、数字商品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书</a>
</dt>
<dd>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家用电器</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书1</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">手机、数码、充值</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">充值</a>
</dt>
<dd>
<em>
<a href="recharge.html">充值</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">电子书2</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">电脑、办公</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书3</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">家居、家具、家装、厨具</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书4</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">服饰内衣</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书5</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">个护化妆</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书6</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>少儿</dt>
<dd>
<em>
<a href="">少儿</a>
</em>
<em>
<a href="">0-2岁</a>
</em>
<em>
<a href="">3-6岁</a>
</em>
<em>
<a href="">7-10岁</a>
</em>
<em>
<a href="">11-14岁</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>教育</dt>
<dd>
<em>
<a href="">教材教辅</a>
</em>
<em>
<a href="">考试</a>
</em>
<em>
<a href="">外语学习</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>其它</dt>
<dd>
<em>
<a href="">英文原版书</a>
</em>
<em>
<a href="">港台图书</a>
</em>
<em>
<a href="">工具书</a>
</em>
<em>
<a href="">套装书</a>
</em>
<em>
<a href="">杂志/期刊</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">运动健康</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书7</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">汽车用品</a>
</h3>
<div class="item-list clearfix">
<div class="subitem">
<dl class="fore">
<dt>
<a href="">电子书8</a>
</dt>
<dd>
<em>
<a href="">免费</a>
</em>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
<em>
<a href="">婚恋/两性</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">经管</a>
</em>
<em>
<a href="">畅读VIP</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">数字音乐</a>
</dt>
<dd>
<em>
<a href="">通俗流行</a>
</em>
<em>
<a href="">古典音乐</a>
</em>
<em>
<a href="">摇滚说唱</a>
</em>
<em>
<a href="">爵士蓝调</a>
</em>
<em>
<a href="">乡村民谣</a>
</em>
<em>
<a href="">有声读物</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>
<a href="">音像</a>
</dt>
<dd>
<em>
<a href="">音乐</a>
</em>
<em>
<a href="">影视</a>
</em>
<em>
<a href="">教育音像</a>
</em>
<em>
<a href="">游戏</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>文艺</dt>
<dd>
<em>
<a href="">小说</a>
</em>
<em>
<a href="">文学</a>
</em>
<em>
<a href="">青春文学</a>
</em>
<em>
<a href="">传记</a>
</em>
<em>
<a href="">艺术</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>人文社科</dt>
<dd>
<em>
<a href="">历史</a>
</em>
<em>
<a href="">心理学</a>
</em>
<em>
<a href="">政治/军事</a>
</em>
<em>
<a href="">国学/古籍</a>
</em>
<em>
<a href="">哲学/宗教</a>
</em>
<em>
<a href="">社会科学</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>经管励志</dt>
<dd>
<em>
<a href="">经济</a>
</em>
<em>
<a href="">金融与投资</a>
</em>
<em>
<a href="">管理</a>
</em>
<em>
<a href="">励志与成功</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>生活</dt>
<dd>
<em>
<a href="">家庭与育儿</a>
</em>
<em>
<a href="">旅游/地图</a>
</em>
<em>
<a href="">烹饪/美食</a>
</em>
<em>
<a href="">时尚/美妆</a>
</em>
<em>
<a href="">家居</a>
</em>
<em>
<a href="">婚恋与两性</a>
</em>
<em>
<a href="">娱乐/休闲</a>
</em>
<em>
<a href="">健身与保健</a>
</em>
<em>
<a href="">动漫/幽默</a>
</em>
<em>
<a href="">体育/运动</a>
</em>
</dd>
</dl>
<dl class="fore">
<dt>科技</dt>
<dd>
<em>
<a href="">科普</a>
</em>
<em>
<a href="">IT</a>
</em>
<em>
<a href="">建筑</a>
</em>
<em>
<a href="">医学</a>
</em>
<em>
<a href="">工业技术</a>
</em>
<em>
<a href="">电子/通信</a>
</em>
<em>
<a href="">农林</a>
</em>
<em>
<a href="">科学与自然</a>
</em>
</dd>
</dl>
</div>
</div>
</div>
<div class="item">
<h3>
<a href="">彩票、旅行</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">理财、众筹</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">母婴、玩具</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">运动户外</a>
</h3>
</div>
<div class="item">
<h3>
<a href="">箱包</a>
</h3>
</div>
</div>
</div>
</div>
</div>
<!--列表-->
<div class="list-container">
<div class="sortList clearfix">
<div class="center">
<!--banner轮播-->
<div class="swiper-container" id="mySwiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home/banner1.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/home/banner2.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/home/banner3.jpg" />
</div>
<div class="swiper-slide">
<img src="./images/home/banner4.jpg" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="right">
<div class="news">
<h4>
<em class="fl">尚品汇快报</em>
<span class="fr tip">更多 ></span>
</h4>
<div class="clearix"></div>
<ul class="news-list unstyled">
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[公告]</span>备战开学季 全民半价购数码
</li>
<li>
<span class="bold">[特惠]</span>备战开学季 全民半价购数码
</li>
</ul>
</div>
<ul class="lifeservices">
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">话费</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">机票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">电影票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">游戏</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">彩票</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">加油站</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">酒店</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">火车票</span>
</li>
<li class=" life-item ">
<i class="list-item"></i>
<span class="service-intro">众筹</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">理财</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">礼品卡</span>
</li>
<li class=" life-item">
<i class="list-item"></i>
<span class="service-intro">白条</span>
</li>
</ul>
<div class="ads">
<img src="./images/home/ad1.png" />
</div>
</div>
</div>
</div>
<!--今日推荐-->
<div class="today-recommend">
<div class="py-container">
<ul class="recommend">
<li class="clock">
<div class="time">
<img src="./images/home/clock.png" />
<h3>今日推荐</h3>
</div>
</li>
<li class="banner">
<img src="./images/home/today01.png" />
</li>
<li class="banner">
<img src="./images/home/today02.png" />
</li>
<li class="banner">
<img src="./images/home/today03.png" />
</li>
<li class="banner">
<img src="./images/home/today04.png" />
</li>
</ul>
</div>
</div>
<!-- 商品排行 -->
<div class="rank">
<div class="tab">
<div class="tab-tit clearfix">
<a href="javascript:;" class="on">
<p class="img">
<i></i>
</p>
<p class="text">热卖排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">特价排行</p>
</a>
<a href="javascript:;">
<p class="img">
<i></i>
</p>
<p class="text">新品排行</p>
</a>
</div>
</div>
<div class="content">
<ul>
<li>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/home/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/home/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/home/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
<div class="img-item">
<p class="tab-pic">
<a href="#">
<img src="./images/home/1.jpg" />
</a>
</p>
<div class="tab-info">
<div class="info-title">
<a href="#">【官网价直降1100】Apple iPhone 8 Plus 256GB 银色 移动联通电信4G手机</a>
</div>
<p class="info-price">定金：¥100.00</p>
</div>
</div>
</li>
</ul>
</div>
</div>
<!-- 猜你喜欢 -->
<div class="like">
<div class="py-container">
<div class="title">
<h3 class="fl">猜你喜欢</h3>
<a href="javascript:;" class="fr tip changeBnt">换一换</a>
</div>
<div class="bd">
<ul class="favourate">
<li>
<img src="./images/home/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/home/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/home/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/home/like_02.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/home/like_03.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
<li>
<img src="./images/home/like_01.png" alt="" />
<div class="like-text">
<p>阳光美包新款单肩包女包时尚子母包四件套女</p>
<h3>¥116.00</h3>
</div>
</li>
</ul>
</div>
</div>
</div>
<!--楼层-->
<div class="floor">
<div class="py-container">
<div class="title clearfix">
<h3 class="fl">家用电器</h3>
<div class="fr">
<ul class="nav-tabs clearfix">
<li class="active">
<a href="#tab1" data-toggle="tab">热门</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">大家电</a>
</li>
<li>
<a href="#tab3" data-toggle="tab">生活电器</a>
</li>
<li>
<a href="#tab4" data-toggle="tab">厨房电器</a>
</li>
<li>
<a href="#tab5" data-toggle="tab">应季电器</a>
</li>
<li>
<a href="#tab6" data-toggle="tab">空气/净水</a>
</li>
<li>
<a href="#tab7" data-toggle="tab">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane">
<div class="floor-1">
<div class="blockgary">
<ul class="jd-list">
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<img src="./images/home/floor-1-1.png" />
</div>
<div class="floorBanner">
<div class="swiper-container" id="floor1Swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home/floor-1-b01.png">
</div>
<div class="swiper-slide">
<img src="./images/home/floor-1-b02.png">
</div>
<div class="swiper-slide">
<img src="./images/home/floor-1-b03.png">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-2.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-3.png" />
</div>
</div>
<div class="split center">
<img src="./images/home/floor-1-4.png" />
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-5.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-6.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--楼层-->
<div class="floor">
<div class="py-container">
<div class="title clearfix">
<h3 class="fl">家用电器</h3>
<div class="fr">
<ul class="nav-tabs clearfix">
<li class="active">
<a href="#tab1" data-toggle="tab">热门</a>
</li>
<li>
<a href="#tab2" data-toggle="tab">大家电</a>
</li>
<li>
<a href="#tab3" data-toggle="tab">生活电器</a>
</li>
<li>
<a href="#tab4" data-toggle="tab">厨房电器</a>
</li>
<li>
<a href="#tab5" data-toggle="tab">应季电器</a>
</li>
<li>
<a href="#tab6" data-toggle="tab">空气/净水</a>
</li>
<li>
<a href="#tab7" data-toggle="tab">高端电器</a>
</li>
</ul>
</div>
</div>
<div class="tab-content">
<div class="tab-pane">
<div class="floor-1">
<div class="blockgary">
<ul class="jd-list">
<li>节能补贴</li>
<li>4K电视</li>
<li>空气净化器</li>
<li>IH电饭煲</li>
<li>滚筒洗衣机</li>
<li>电热水器</li>
</ul>
<img src="./images/home/floor-1-1.png" />
</div>
<div class="floorBanner">
<div class="swiper-container" id="floor2Swiper">
<div class="swiper-wrapper">
<div class="swiper-slide">
<img src="./images/home/floor-1-b01.png">
</div>
<div class="swiper-slide">
<img src="./images/home/floor-1-b02.png">
</div>
<div class="swiper-slide">
<img src="./images/home/floor-1-b03.png">
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
</div>
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-2.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-3.png" />
</div>
</div>
<div class="split center">
<img src="./images/home/floor-1-4.png" />
</div>
<div class="split">
<span class="floor-x-line"></span>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-5.png" />
</div>
<div class="floor-conver-pit">
<img src="./images/home/floor-1-6.png" />
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!--商标-->
<div class="brand">
<div class="py-container">
<ul class="brand-list">
<li class="brand-item">
<img src="./images/home/brand_21.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_03.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_05.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_07.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_09.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_11.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_13.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_15.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_17.png" />
</li>
<li class="brand-item">
<img src="./images/home/brand_19.png" />
</li>
</ul>
</div>
</div>
<!-- 底部 -->
<div class="footer">
<div class="footer-container">
<div class="footerList">
<div class="footerItem">
<h4>购物指南</h4>
<ul class="footerItemCon">
<li>购物流程</li>
<li>会员介绍</li>
<li>生活旅行/团购</li>
<li>常见问题</li>
<li>购物指南</li>
</ul>
</div>
<div class="footerItem">
<h4>配送方式</h4>
<ul class="footerItemCon">
<li>上门自提</li>
<li>211限时达</li>
<li>配送服务查询</li>
<li>配送费收取标准</li>
<li>海外配送</li>
</ul>
</div>
<div class="footerItem">
<h4>支付方式</h4>
<ul class="footerItemCon">
<li>货到付款</li>
<li>在线支付</li>
<li>分期付款</li>
<li>邮局汇款</li>
<li>公司转账</li>
</ul>
</div>
<div class="footerItem">
<h4>售后服务</h4>
<ul class="footerItemCon">
<li>售后政策</li>
<li>价格保护</li>
<li>退款说明</li>
<li>返修/退换货</li>
<li>取消订单</li>
</ul>
</div>
<div class="footerItem">
<h4>特色服务</h4>
<ul class="footerItemCon">
<li>夺宝岛</li>
<li>DIY装机</li>
<li>延保服务</li>
<li>尚品汇E卡</li>
<li>尚品汇通信</li>
</ul>
</div>
<div class="footerItem">
<h4>帮助中心</h4>
<img src="./images/wx_cz.jpg">
</div>
</div>
<div class="copyright">
<ul class="helpLink">
<li>关于我们
<span class="space"></span>
</li>
<li>联系我们
<span class="space"></span>
</li>
<li>关于我们
<span class="space"></span>
</li>
<li>商家入驻
<span class="space"></span>
</li>
<li>营销中心
<span class="space"></span>
</li>
<li>友情链接
<span class="space"></span>
</li>
<li>关于我们
<span class="space"></span>
</li>
<li>营销中心
<span class="space"></span>
</li>
<li>友情链接
<span class="space"></span>
</li>
<li>关于我们</li>
</ul>
<p>地址：北京市昌平区宏福科技园综合楼6层</p>
<p>京ICP备19006430号</p>
</div>
</div>
</div>
</div>
<script src="./js/swiper.min.js"></script>
<script>
var mySwiper = new Swiper('#mySwiper', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
});
var floor1Swiper = new Swiper('#floor1Swiper', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
});
var floor2Swiper = new Swiper('#floor2Swiper', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
}
})
</script>
</body>
</html>
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。
马建仓 AI 助手
