效果圖 tab.html <!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="../css/b ...
效果圖
tab.html
<!DOCTYPE html> <html lang="zh-CN"><!-- 設置簡體中文 --> <head> <meta charset="UTF-8"> <title>tab</title> <link rel="stylesheet" href="../css/base.css"> <link rel="stylesheet" href="../css/tab.css"> <!-- css一般放在DOM載入前，防止DOM裸奔 --> </head> <body> <!-- 樓層一 --> <div class="floor"> <div class="container"> <div class="tab-head"> <div class="tab-head-title fl"> <span class="tab-head-title-num">1F</span><span class="tab-head-title-name">服裝箱包</span> </div> <ul class="tab-head-item-wrap fr"> <li class="fl"><a href="javascript:;" class="tab-head-item tab-head-item-active">大牌</a></li> <li class="fl tab-head-item-divider text-hidden">分割線</li> <li class="fl"><a href="javascript:;" class="tab-head-item">男裝</a></li> <li class="fl tab-head-item-divider text-hidden">分割線</li> <li class="fl"><a href="javascript:;" class="tab-head-item">女裝</a></li> </ul> </div> <div class="tab-body"> <ul class="tab-body-panel"> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/1/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> </ul> <ul class="tab-body-panel"> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/2/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> </ul> <ul class="tab-body-panel"> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class="tab-body-panel-item-price">￥479</p> </li> <li class="tab-body-panel-item fl"> <p class="tab-body-panel-item-pic"><a href="#" class="link"><img src="../img/floor/1/3/1.png"></a></p> <p class="tab-body-panel-item-name">匡威男棒球開衫外套2020</p> <p class
