按照國際慣例先放效果圖 安靜的時候它長這樣 等待載入時它長這樣（功能是設置的按需載入，網速慢或者載入數據大時會出現） 載入之後購物車沒有商品時這樣 有商品長這樣 首頁index.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head ...
按照國際慣例先放效果圖
安靜的時候它長這樣
等待載入時它長這樣（功能是設置的按需載入，網速慢或者載入數據大時會出現）
載入之後購物車沒有商品時這樣
有商品長這樣
首頁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>
