效果圖 index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head ...
效果圖
index.html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>index</title> <link rel="stylesheet" href="css/style.css"> </head> <body> <div class="container"> <div class="mallCategory"> <!-- 一級菜單 --> <div class="catList"> <h2><a href="#">家用電器</a></h2> <ul class="clearfix"> <li class="J_MenuItem"> <h3 class="itemtit1"><span></span><a href="#">大家電 </a></h3> <p class="itemCol"><a href="#">空調</a> <a href="#">LED電視 </a> <a href="#">冰箱 </a></p> </li> <li class="J_MenuItem"> <h3 class="itemtit2"><span> </span> <a href="#">生活電器/ </a> <a href="#">個人護理 </a></h3> <p class="itemCol"> <a href="#">空調扇 </a> <a href="#">掛燙機 </a> <a href="#">剃鬚刀 </a></p> </li> <li class="J_MenuItem"> <h3 class="itemtit3"><span> </span><a href="#">廚房電器 </a></h3> <p class="itemCol"><a href="#">豆漿機</a> <a href="#">電飯煲</a> <a href="#">微波爐 </a></p> </li> <li class="J_MenuItem"> <h3 class="itemtit4"><span></span><a href="#">影音電器 </a></h3> <p class="itemCol"><a href="#">耳機 </a> <a href="#">硬碟播放器 </a> <a href="#">組合音響 </a></p> </li> </ul> </div> <!-- 遮罩層 --> <div class="border"> <ul> <li class="mask-top"></li> <li class="mask-bottom"></li> </ul> </div> <!-- 二級菜單 --> <div class="cat-subcategory"> <div class="shadow"> <div class="entity-main"> <!-- 左側二級菜單 --> <ul class="shadow-left"> <li><a href="#">LED電視</a> <a href="#">LCD電視</a> <a href="#">3D電視</a> <a href="#">等離子電視</a> <a href="#">家庭影院</a> <a href="#">配件</a></li> <li><a href="#">壁掛空調</a> <a href="#">櫃式空調</a> <a href="#">移動空調</a> <a href="#">冷暖空調</a></li> <li><a href="#">對開門</a> <a href="#">雙門冰箱</a> <a href="#">三門冰箱</a> <a href="#">迷你冰箱</a> <a href="#">酒櫃</a> <a href="#">冷櫃</a></li> <li><a href="#">煙竈套裝</a> <a href="#">油煙機</a> <a href="#">燃氣竈</a> <a href="#">消毒櫃</a> <a href="#">歐式</a> <a href="#">中式</a> <a href="#">側吸式</a></li> <li><a href="#">滾筒洗衣機</a> <a href="#">雙缸洗衣機</a> <a href="#">迷你洗衣機</a> <a href="#">單脫水機</a></li> </ul> <!-- 右側廣告 --> <dl class="shadow-right"> <dt><b>大家電品牌 </b></dt> <dd><a href="#">海爾</a> <a href="#">TCL</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> <a href="#">pangoo</a> <a href="#">康佳</a> <a href="#">長虹</a> <a href="#">帥康</a> <a href="#">LG</a> <a href="#">康寶</a> <a href="#">德意</a> <a href="#">樂華</a> <a href="#">科龍</a> </dd> </dl> </div> <div class="entity-main"> <ul class="shadow-left"> <li><a href="#">風扇</a> <a href="#">空調扇</a> <a href="#">弔扇</a> <a href="#">落地扇</a> <a href="#">轉頁扇</a> <a href="#">台扇</a></li> <li><a href="#">掛燙機</a> <a href="#">電熨斗</a> <a href="#">蒸汽刷/乾汽刷</a> <a href="#">乾鞋器</a> <a href="#">乾衣機</a></li> <li><a href="#">吸塵器</a> <a href="#">智能掃地機</a> <a href="#">蒸汽拖把</a> <a href="#">超聲波清潔機</a> <a href="#">迷你吸塵器</a></li> <li><a href="#">空氣凈化器</a> <a href="#">加濕器</a> <a href="#">抽濕器</a> <a href="#">活氧/解毒機</a></li> <li><a href="#">對講機</a> <a href="#">電話機</a> <a href="#">子母機</a></li> <li><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> <a href="#">醫療器械</a> <a href="#">血壓計</a> <a href="#">血糖儀</a> <a href="#">溫度計</a></li> </ul> <dl class="shadow-right"> <dt><b>生活電器/個人護理品牌</b></dt> <dd><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="#">KV8</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> </div> <div class="entity-main"> <ul class="shadow-left"> <li><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></li> <li><a href="#">麵包機</a> <a href="#">電烤箱</a> <a href="#">三明治機</a> <a
