按照国际惯例先放效果图
安静的时候它长这样
等待加载时它长这样（功能是设置的按需加载，网速慢或者加载数据大时会出现）
加载之后购物车没有商品时这样
有商品长这样
首页index.html
<!DOCTYPE html>
<html lang="zh-CN"><!-- 设置简体中文 -->
<head>
<meta charset="UTF-8">
<title>index</title>
<link rel="stylesheet" href="css/base.css">
<link rel="stylesheet" href="css/common.css">
<link rel="stylesheet" href="css/index.css">
<!-- css一般放在DOM加载前，防止DOM裸奔 -->
</head>
<body>
<!-- 导航 -->
<div class="nav-site">
<div class="container">
<ul class="fl">
<li class="fl"><a href="javascript:;" class="nav-site-login">亲，请登录</a></li>
<li class="fl"><a href="javascript:;" class="nav-site-reg link">免费注册</a></li>
<li class="fl"><a href="#" class="nav-site-shop link">手机逛慕淘</a></li>
</ul>
<ul class="fr">
<li class="fl dropdown menu" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link transition">我的慕淘<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-left">
<li class="menu-item"><a href="#">已买到的宝贝</a></li>
<li class="menu-item"><a href="#">我的足迹</a></li>
</ul>
</li>
<li class="fl dropdown menu" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link transition">收藏夹<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-left">
<li class="menu-item"><a href="#">收藏的宝贝</a></li>
<li class="menu-item"><a href="#">收藏的店铺</a></li>
</ul>
</li>
<li class="fl dropdown">
<a href="javascript:;" class="nav-site-cat link">商品分类</i></a>
</li>
<li class="fl dropdown menu" data-active="menu" data-load="js/dropdown-seller.json">
<a href="javascript:;" class="dropdown-toggle link transition">卖家中心<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-left">
<li class="dropdown-loading"></li>
<!-- <li class="menu-item"><a href="#">免费开店</a></li>
<li class="menu-item"><a href="#">已卖出的宝贝</a></li>
<li class="menu-item"><a href="#">出售中的宝贝</a></li>
<li class="menu-item"><a href="#">卖家服务市场</a></li>
<li class="menu-item"><a href="#">卖家培训中心</a></li>
<li class="menu-item"><a href="#">体验中心</a></li> -->
</ul>
</li>
<li class="nav-site-service fl dropdown menu" data-active="menu">
<a href="javascript:;" class="dropdown-toggle link transition">联系客服<i class="dropdown-arrow iconfont transition"></i></a>
<ul class="dropdown-list dropdown-right">
<li class="menu-item"><a href="#">已买到的宝贝</a></li>
<li class="menu-item"><a href="#">我的足迹</a></li>
</ul>
</li>
</ul>
</div>
</div>
<!-- 头部 -->
<div class="header">
<div class="container">
<!-- h1标签是为了搜索引擎优化，表示重要
但是页面内不要出现太多 -->
<h1 class="fl"><a href="#" class="header-logo text-hidden">慕淘网</a></h1>
<div id="header-search" class="search fl">
<!-- 由于没有自己的搜索页，演示时设置为提交到淘宝，参考淘宝设置 -->
<form action="https://s.taobao.com/search" class="search-form">
<!-- 由于input是内联块，相当于display:inline-block
如果换行写，会造成空隙，空隙大小一般是默认字体的一半
可以不换行书写，但是可读性较差
都添加左浮动可以解决 -->
<!-- 设置name才能提交 -->
<input type="text" class="search-input fl" name="q" placeholder="灵魂美食一元抢" autocomplete="off">
<input type="submit" value="搜索" class="search-btn fl">
</form>
<ul class="search-list">
<!-- <li class="search-item text-ellipsis" title="111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111">111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111111</li>
<li class="search-item text-ellipsis" title="222">222</li>
<li class="search-item text-ellipsis" title="333">333</li> -->
</ul>
</div>
<div class="cart fr dropdown" data-active="cart" data-load="js/dropdown-cart.json">
<a href="javascript:;" class="dropdown-toggle link transition">
<i class="cart-icon iconfont"></i>
<span class="cart-txt">购物车</span>
<span class="cart-line">|</span>
<span class="cart-txt">0</span>
<i class="dropdown-arrow iconfont transition"></i>
</a>
<div class="dropdown-list dropdown-right">
<!-- 加载 -->
<div class="dropdown-loading cart-loading"></div>
<!-- 无商品 -->
<!-- <div class="cart-no">
<i class="cart-icon iconfont cart-no-icon"></i>
<span class="cart-no-txt">购物车里还没有商品<br>赶紧去选购吧</span>
</div> -->
<!-- 有商品 -->
<!-- <div class="cart-list">
<h2>最新加入的商品</h2>
<div class="cart-item">
<img src="img/cart/1.png" class="cart-item-img">
<p class="cart-item-title text-ellipsis">adidas 训练 男子</p>
<p class="cart-item-price">
<b>￥<span class="item1">355</span> x <span class="item2">1</span></b>
</p>
<a href="#"><i class="cart-close">x</i></a>
</div>
<div class="cart-item">
<img src="img/cart/1.png" class="cart-item-img">
<p class="cart-item-title text-ellipsis">adidas 训练 男子</p>
<p class="cart-item-price">
<b>￥<span class="item1">355</span> x <span class="item2">1</span></b>
</p>
<a href="#"><i class="cart-close">x</i></a>
</div>
<div class="cart-end">
<div class="cart-end-txt">
共 <b id="totalC">0</b> 件商品 共计￥ <b id="totalP">0.00 </b>
</div>
<button class="cart-end-btn">去购物车</button>
</div>
</div> -->
</div>
</div>
</div>
</div>
<!-- 主菜单 -->
<div class="main-nav">
<div class="container">
<a href="#" class="link">数码城</a>
<a href="#" class="link">天黑黑</a>
<a href="#" class="link">团购</a>
<a href="#" class="link">发现</a>
<a href="#" class="link">二手特惠</a>
<a href="#" class="link">名品汇</a>
</div>
</div>
<div class="content">
<div class="container">
<div id="cat" class="cat">
<a href="#" class="cat-title"><i class="cart-icon">#</i>商品分类</a>
<div class="cat-item dropdown" data-active="cat" data-load="js/cat-1.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">家用电器</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
<!-- <dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯1</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl>
<dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl> -->
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="js/cat-2.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">手机、运营商、数码</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
<!-- <dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯2</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl>
<dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl> -->
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="js/cat-3.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">电脑、办公</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
<!-- <dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯3</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl>
<dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl> -->
</div>
</div>
<div class="cat-item dropdown" data-active="cat" data-load="js/cat-4.json">
<div class="dropdown-toggle">
<a href="#" class="cat-item-link">家居、家具、家装、厨具</a>
<span class="dropdown-arrow cat-arrow">></span>
</div>
<div class="dropdown-list">
<div class="dropdown-loading"></div>
<!-- <dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯4</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl>
<dl class="dropdown-list-item">
<dt class="dropdown-list-item-title"><a href="#">手机通讯</a></dt>
<dd class="dropdown-list-item-txt">
<a href="#">手机</a>
<a href="#">对讲机</a>
</dd>
</dl> -->
</div>
</div>
</div>
<div class="banner"></div>
<div class="news"></div>
</div>
</div>
<!-- <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script>
<script>
//短路操作，如果cdn的jquery没有引用成功，则会执行后面一句，引入本地jquery
//括号中的<\/script>标签会被当做当前标签的结束标签，因此需要转义
window.jQuery || document.write('<script src="js/jquery.js"><\/script>');
</script> -->
<script src="js/jquery.js"></script>
<script src="js/transition.js"></script>
<script src="js/showhide.js"></script>
<script src="js/dropdown.js"></script>
<script src="js/search.js"></script>
<script src="js/index.js"></script>
</body>
</html>
来源：https://www.cnblogs.com/chenyingying0/p/12359393.html