按照國際慣例先放效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/style.css"> ...
按照國際慣例先放效果圖
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="main" id="main"> <div class="menu-box"></div> <!-- 子導航 --> <div class="sub-menu hide" id="sub-menu"> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">手機、配件</div> <div class="sub-row"> <span class="bold mr10">手機通訊：</span> <a href="">手機</a> <span class="ml10 mr10">/</span> <a href="">手機維修</a> <span class="ml10 mr10">/</span> <a href="">以舊換新</a> </div> <div class="sub-row"> <span class="bold mr10">手機配件：</span> <a href="">手機殼</a> <span class="ml10 mr10">/</span> <a href="">手機存儲卡</a> <span class="ml10 mr10">/</span> <a href="">數據線</a> <span class="ml10 mr10">/</span> <a href="">充電器</a> <span class="ml10 mr10">/</span> <a href="">電池</a> </div> <div class="sub-row"> <span class="bold mr10">運營商：</span> <a href="">中國聯通</a> <span class="ml10 mr10">/</span> <a href="">中國移動</a> <span class="ml10 mr10">/</span> <a href="">中國電信</a> </div> <div class="sub-row"> <span class="bold mr10">智能設備：</span> <a href="">智能手環</a> <span class="ml10 mr10">/</span> <a href="">智能家居</a> <span class="ml10 mr10">/</span> <a href="">智能手錶</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">娛樂：</span> <a href="">耳機</a> <span class="ml10 mr10">/</span> <a href="">音響</a> <span class="ml10 mr10">/</span> <a href="">收音機</a> <span class="ml10 mr10">/</span> <a href="">麥克風</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">電腦</div> <div class="sub-row"> <span class="bold mr10">電腦：</span> <a href="">筆記本</a> <span class="ml10 mr10">/</span> <a href="">平板</a> <span class="ml10 mr10">/</span> <a href="">一體機</a> </div> <div class="sub-row"> <span class="bold mr10">電腦配件：</span> <a href="">顯示器</a> <span class="ml10 mr10">/</span> <a href="">CPU</a> <span class="ml10 mr10">/</span> <a href="">主板</a> <span class="ml10 mr10">/</span> <a href="">硬碟</a> <span class="ml10 mr10">/</span> <a href="">電源</a> <span class="ml10 mr10">/</span> <a href="">顯卡</a> <span class="ml10 mr10">/</span> <a href="">其他配件</a> </div> <div class="sub-row"> <span class="bold mr10">游戲設備：</span> <a href="">游戲機</a> <span class="ml10 mr10">/</span> <a href="">耳機</a> <span class="ml10 mr10">/</span> <a href="">游戲軟體</a> </div> <div class="sub-row"> <span class="bold mr10">網路產品：</span> <a href="">路由器</a> <span class="ml10 mr10">/</span> <a href="">網路機頂盒</a> <span class="ml10 mr10">/</span> <a href="">交換機</a> <span class="ml10 mr10">/</span> <a href="">存儲卡</a> <span class="ml10 mr10">/</span> <a href="">網卡</a> </div> <div class="sub-row"> <span class="bold mr10">外部產品：</span> <a href="">滑鼠</a> <span class="ml10 mr10">/</span> <a href="">鍵盤</a> <span class="ml10 mr10">/</span> <a href="">U盤</a> <span class="ml10 mr10">/</span> <a href="">移動硬碟</a> <span class="ml10 mr10">/</span> <a href="">滑鼠墊</a> <span class="ml10 mr10">/</span> <a href="">電腦清潔</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">家用電器</div> <div class="sub-row"> <span class="bold mr10">電視：</span> <a href="">國產品牌</a> <span class="ml10 mr10">/</span> <a href="">南韓品牌</a> <span class="ml10 mr10">/</span> <a href="">歐美品牌</a> </div> <div class="sub-row"> <span class="bold mr10">空調：</span> <a href="">顯示器</a> <span class="ml10 mr10">/</span> <a href="">櫃式</a> <span class="ml10 mr10">/</span> <a href="">中央</a> <span class="ml10 mr10">/</span> <a href="">壁掛式</a> </div> <div class="sub-row"> <span class="bold mr10">冰箱：</span> <a href="">多門</a> <span class="ml10 mr10">/</span> <a href="">對開門</a> <span class="ml10 mr10">/</span> <a href="">三門</a> <span class="ml10 mr10">/</span> <a href="">雙門</a> </div> <div class="sub-row"> <span class="bold mr10">洗衣機：</span> <a href="">滾筒式洗衣機</a> <span class="ml10 mr10">/</span> <a href="">迷你洗衣機</a> <span class="ml10 mr10">/</span> <a href="">洗烘一體機</a> </div> <div class="sub-row"> <span class="bold mr10">廚房電器：</span> <a href="">油煙機</a> <span class="ml10 mr10">/</span> <a href="">洗碗機</a> <span class="ml10 mr10">/</span> <a href="">燃氣竈</a> </div> </div> </div> <div class="inner-box"> <div class="sub-inner-box"> <div class="title">傢具</div> <div class="sub-row"> <span class="bold mr10">家紡：</span> <a href="">被子</a> <span class="ml10 mr10">/</span> <a href="">枕頭</a> <span class="ml10 mr10">/</span> <a href="">四件套</a> <span class="ml10 mr10">/</span> <a href="">床墊</a> </div> <div class="sub-row"> <span class="bold mr10">燈具：</span> <a href="">臺燈</a> <span class="ml10 mr10">/</span> <a href="">頂燈</a> <span class="ml10 mr10">/</span> <a href="">節能燈</a> <span class="ml10 mr10">/</span> <a href="">應急燈</a> </div> <div class="sub-row"> <span class="bold mr10">廚具：</span> <a href="">烹飪鍋具</a> <span class="ml10 mr10">/</span> <a href="">餐具</a> <span class="ml10 mr10">/</span> <a href="">菜板刀具</a> </div> <div class="sub-row"> <span
