滚动到对应楼层时，楼层导航项不能显示为对应的文字

滚动到对应楼层时，楼层导航项不能显示为对应的文字

<!DOCTYPE html>
<html>
<head>
 <meta charset="UTF-8">
 <title>慕淘网</title>
 <link rel="stylesheet" type="text/css" href="css/style.css">
 <script src="js/jquery-3.3.1.js"></script>
</head>
<body>
 <div class="header">

 <!--顶部-->
 <div class="top clearfix">
 <div class="left-login">
 <span style="color:red" id="login">亲,请登录</span>
 <span id="register">免费注册</span>
 <span>手机逛慕淘</span>
 </div>
 <ul class="right-nav">
 <li>我的慕淘<img src="image/icon/22.png">
 <ul class="nav-ul">
 <li>已买到的宝贝</li>
 <li>我的足迹</li>
 </ul>
 </li>
 <li>收藏夹<img src="image/icon/22.png">
 <ul class="nav-ul">
 <li>已买到的宝贝</li>
 <li>我的足迹</li>
 </ul>
 </li>
 <li>商品分类<img src="image/icon/22.png">
 <ul class="nav-ul">
 <li>已买到的宝贝</li>
 <li>我的足迹</li>
 </ul>
 </li>
 <li>卖家中心<img src="image/icon/22.png">
 <ul class="nav-ul">
 <li>免费开店</li>
 <li>已卖出的宝贝</li>
 <li>出售中的宝贝</li>
 <li>卖家服务市场</li>
 <li>卖家培训中心</li>
 <li>体验中心</li>
 </ul>
 </li>
 <li>联系客服<img src="image/icon/22.png">
 <ul class="nav-ul">
 <li>消费者客服</li>
 <li>卖家举报</li>
 </ul>
 </li>
 </ul>
 </div>

 <!--logo区-->
 <div class="logo .clearfix">
 <img class="logo-img" src="image/logo.png">
 <input type="text" name="search" placeholder="灵魂美食一元抢"><span class="ser-span">搜索</span>
 <div class="shopping-cart">
 <img src="image/icon/26.png">&nbsp;
 <span class="cart">购物车 &nbsp;|&nbsp;&nbsp;0</span>&nbsp;
 <img src="image/icon/23.png">
 </div>
 </div>

 <!--导航区-->
 <div class="nav">
 <ul>
 <li>数码城</li>
 <li>天天特价</li>
 <li>团购</li>
 <li>发现</li>
 <li>二手特价</li>
 <li>名品汇</li>
 </ul>
 </div>

 </div>

 <!--banner区-->
 <div class="banner clearfix">

 <!--左侧导航栏-->
 <div class="menu-box">
 <p><img src="image/icon/18.png">
 <span>商品分类</span>
 </p>
 <div class="menu-item">
 <a href="#">
 <span>家用电器</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>手机、运营商、数码</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>电脑、办公</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>家具、家装、厨具</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>男装、女装、童装</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>化妆、清洁、宠物</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>运动户外、钟表</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>汽车、汽车用品</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>母婴、玩具乐器</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>食品、生鲜、特产</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>食品、生鲜、特产</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>医疗保健</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>图书、录像、电子书</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 <div class="menu-item">
 <a href="#">
 <span>旅行、充值、票务</span>
 <span class="dayu">&gt;</span>
 </a>
 </div>
 </div>

 <!--子菜单-->
 <div class="sub-menu">

 <!--家用电器-->
 <div class="sub-inner-box">
 <div class="sub-row">
 <span class="bold mr10">电器</span>
 <a href="#">手机</a>
 <a href="#">手机维修</a>
 <a href="#">以旧换新</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">冰箱</span>
 <a href="#">手机壳</a>
 <a href="#">手机存储卡</a>
 <a href="#">数据线</a>
 <a href="#">充电器</a>
 <a href="#">电池</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">洗衣机</span>
 <a href="#">中国联通</a>
 <a href="#">中国移动</a>
 <a href="#">中国电信</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">电脑</span>
 <a href="#">智能手环</a>
 <a href="#">智能家居</a>
 <a href="#">智能手表</a>
 <a href="#">其他配件</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">微波炉</span>
 <a href="#">耳机</a>
 <a href="#">音响</a>
 <a href="#">收音机</a>
 <a href="#">麦克风</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">开水壶</span>
 <a href="#">耳机</a>
 <a href="#">音响</a>
 <a href="#">收音机</a>
 <a href="#">麦克风</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">吹风机</span>
 <a href="#">耳机</a>
 <a href="#">音响</a>
 <a href="#">收音机</a>
 <a href="#">麦克风</a>
 </div>

 <div class="sub-row">
 <span class="bold mr10">学习机</span>
 <a href="#">耳机</a>
 <a href="#">音响</a>
 <a href="#">收音机</a>
 <a href="#">麦克风</a>
 </div>
 </div>
 <!--家用电器end-->

 <!--手机运营商数码-->
 <div class="sub-inner-box">
 <div class="sub-row">
               <span class="bold mr10">手机通讯</span>
               <a href="">笔记本</a>
               <a href="">平板</a>
               <a href="">一体机</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">运营商</span>
               <a href="">显示器</a>
               <a href="">CPU</a>
               <a href="">主板</a>
               <a href="">硬盘</a>
               <a href="">电源</a>
               <a href="">显卡</a>
               <a href="">其他配件</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">手机配件</span>
               <a href="">游戏机</a>
               <a href="">耳机</a>
               <a href="">游戏软件</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">数码产品</span>
               <a href="">路由器</a>
               <a href="">网络机顶盒</a>
               <a href="">交换机</a>
               <a href="">存储卡</a>
               <a href="">网卡</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">电子教育</span>
               <a href="">鼠标</a>
               <a href="">键盘</a>
               <a href="">U盘</a>
               <a href="">移动硬盘</a>
               <a href="">鼠标垫</a>
               <a href="">电脑清洁</a>
 </div>
 </div>
 <!--手机数码产品end-->

 <!--电脑办公-->
 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">电脑</span>
               <a href="">国产品牌</a>
               <a href="">韩国品牌</a>
               <a href="">欧美品牌</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">办公</span>
               <a href="">显示器</a>
               <a href="">柜式</a>
               <a href="">中央</a>
               <a href="">壁挂式</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">冰箱</span>
               <a href="">多门</a>
               <a href="">对开门</a>
               <a href="">三门</a>
               <a href="">双门</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">洗衣机</span>
               <a href="">滚筒式洗衣机</a>
               <a href="">迷你洗衣机</a>
               <a href="">洗烘一体机</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨房电器</span>
               <a href="">油烟机</a>
               <a href="">洗碗机</a>
               <a href="">燃气灶</a>
 </div>
 </div>
 <!--电脑办公end-->

 <!--家具家居-->
 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>
 <!--家具家居end-->

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div>

 <div class="sub-inner-box">

 <div class="sub-row">
               <span class="bold mr10">家纺</span>
               <a href="">被子</a>
               <a href="">枕头</a>
               <a href="">四件套</a>
               <a href="">床垫</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">灯具</span>
               <a href="">台灯</a>
               <a href="">顶灯</a>
               <a href="">节能灯</a>
               <a href="">应急灯</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">厨具</span>
               <a href="">烹饪锅具</a>
               <a href="">餐具</a>
               <a href="">菜板刀具</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">家装</span>
               <a href="">地毯</a>
               <a href="">沙发垫套</a>
               <a href="">装饰字画</a>
               <a href="">照片墙</a>
               <a href="">窗帘</a>
 </div>

 <div class="sub-row">
               <span class="bold mr10">生活日用</span>
               <a href="">收纳用品</a>
               <a href="">浴室用品</a>
               <a href="">雨伞雨衣</a>
 </div>
 </div> 
 </div>

 <!--轮播图-->
 <div class="slideImage">
 <div class="banner1"><img src="image/focus-carousel/1.jpg"></div>
 <div class="banner1"><img src="image/focus-carousel/2.jpg"></div>
 <div class="banner1"><img src="image/focus-carousel/3.jpg"></div>
 <div class="banner1"><img src="image/focus-carousel/4.jpg"></div>
 <div class="banner1"><img src="image/focus-carousel/5.jpg"></div>

 <div class="next"><img src="image/focus-carousel/pre.png">
 </div>
 <div class="prev"><img src="image/focus-carousel/pre2.png">
 </div>

 <!--圆点-->
 <div class="dots">
 <span class="dot-active"></span>
 <span></span>
 <span></span>
 <span></span>
 <span></span>
 </div> 
 </div>

 <!--生活区-->
 <div class="services">
 <!--慕快报-->
 <div class="news">
 <div><span class="kuaibao">慕快报</span><span class="more">更多&nbsp;&gt;</span></div>
 <p>[转载]山东法萨芬十分大手动阀</p>
 <p>[转载]山东法萨芬十分大达尔文</p>
 <p>[转载]山东法萨芬十分大范围</p>
 <p>[转载]山东法萨芬十分大萨芬</p>
 <p>[转载]山东法萨芬十分大二个人股</p>
 </div>
 <!--生活区-->
 <div class="service-img">
 <a href="#">
 <img src="image/icon/1.png"><br/>
 <span>话费</span>
 </a>
 <a href="#">
 <img src="image/icon/2.png"><br/>
 <span>机票</span>
 </a>
 <a href="#">
 <img src="image/icon/3.png"><br/>
 <span>电影票</span>
 </a>
 <a href="#">
 <img src="image/icon/4.png"><br/>
 <span>游戏</span>
 </a>
 <a href="#">
 <img src="image/icon/5.png"><br/>
 <span>彩票</span>
 </a>
 <a href="#">
 <img src="image/icon/6.png"><br/>
 <span>加油卡</span>
 </a>
 <a href="#">
 <img src="image/icon/7.png"><br/>
 <span>酒店</span>
 </a>
 <a href="#">
 <img src="image/icon/8.png"><br/>
 <span>火车票</span>
 </a>
 <a href="#">
 <img src="image/icon/9.png"><br/>
 <span>众筹</span>
 </a>
 <a href="#">
 <img src="image/icon/10.png"><br/>
 <span>理财</span>
 </a>
 <a href="#">
 <img src="image/icon/11.png"><br/>
 <span>礼品卡</span>
 </a>
 <a href="#">
 <img src="image/icon/12.png"><br/>
 <span>白条</span>
 </a>
 </div>
 <img class="ad" src="image/ad.png">
 </div>
 </div>

 <!--弹出层遮罩-->
 <div class="mask-layer"></div>

 <!--弹出层窗体-->
 <div class="pop-layer">

 <!--登录、注册按钮-->
 <div class="log-reg-but clearfix">
 <div class="login-but active">登录</div>
 <div class="register-but">注册</div>
 <div class="close-but"><img src="image/icon/20.png"></div>
 </div>

 <!--登录内容-->
 <div class="log-content" >
 <div><input class="login-user" type="text" name="username" placeholder="请输入登录邮箱/手机号">
 </div>
 <p class="ver-user" style="display: none;">请输入正确的手机号或邮箱</p>
 <div><input class="login-pass" type="text" name="username" placeholder="6-14位密码，区分大小写，不能用空格">
 </div>
 <p class="ver-user" style="display: none;">请正确输入密码</p>
 <div class="check-forgetpass"><input class="checkbox" type="checkbox" name="">下次自动登录
 <span>忘记密码</span>
 </div>
 <div><button class="button">登录</button></div>
 <div class="social-btn">
 <img src="image/icon/xinlang.png" class="xinlang">
 <img src="image/icon/weixin.png" class="weixin">
 <img src="image/icon/QQ.png" class="QQ">
 </div>
 </div>

 <!--注册内容-->
 <div class="reg-content" style="display: none;">
 <div><input class="login-user" type="text" name="username" placeholder="请输入邮箱/手机号">
 </div>
 <p class="ver-user" style="display: none;">请输入正确的手机号或邮箱</p>
 <div>
 <input class="login-pass" type="text" name="username" placeholder="请输入验证码">
 <img class="vertify" src="image/verify.png">
 </div>
 <p class="ver-user" style="display: none;">验证码错误</p>
 <div><button class="button">登录</button></div>
 <div class="social-btn">
 <img src="image/icon/xinlang.png" class="xinlang">
 <img src="image/icon/weixin.png" class="weixin">
 <img src="image/icon/QQ.png" class="QQ">
 </div>
 </div>
 </div>

 <!--楼层区-->
 <div class="floors">

 <!--服装鞋包-->
 <div class="floor clearfix">
 <div class="large-category">
 <span class="floor-number">1F</span>
 <span class="category">服装鞋包</span>
 </div>

 <div class="small-category">
 <span class="small-category-active">大牌</span>|
 <span>男装</span>|
 <span>女装</span>
 </div>
 </div>

 <div class="floor-img">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/2.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/2.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/3.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/3.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/4.jpg">
 <p>针织衫修身女子</p>
 <p>￥379</p>
 </div>
 </div>
 </div>

 <!--个体美妆-->
 <div class="floor clearfix">
 <div class="large-category">
 <span class="floor-number">2F</span>
 <span class="category">个体美妆</span>
 </div>

 <div class="small-category">
 <span class="small-category-active">热门</span>|
 <span>保湿系列</span>|
 <span>美白系列</span>
 </div>
 </div>

 <div class="floor-img">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/5.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/1.png">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <!--手机通讯-->
 <div class="floor clearfix">
 <div class="large-category">
 <span class="floor-number">3F</span>
 <span class="category">手机通讯</span>
 </div>

 <div class="small-category">
 <span class="small-category-active">热门</span>|
 <span>安卓</span>|
 <span>苹果</span>
 </div>
 </div>

 <div class="floor-img">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 </div>
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/7.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥3479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <!--家用电器-->
 <div class="floor clearfix">
 <div class="large-category">
 <span class="floor-number">4F</span>
 <span class="category">家用电器</span>
 </div>

 <div class="small-category">
 <span class="small-category-active">热门</span>|
 <span>液晶</span>|
 <span>大屏</span>
 </div>
 </div>

 <div class="floor-img">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 </div>
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/8.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥3479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <!--电脑数码-->
 <div class="floor clearfix">
 <div class="large-category">
 <span class="floor-number">5F</span>
 <span class="category">电脑数码</span>
 </div>

 <div class="small-category">
 <span class="small-category-active">热门</span>|
 <span>惠普</span>|
 <span>苹果</span>
 </div>
 </div>

 <div class="floor-img">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 </div>
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥479</p>
 </div>
 <div class="clothing">
 <img src="image/floor/9.jpg">
 <p>iphone7 4.7英寸</p>
 <p>￥3479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 <div class="floor-img" style="display: none;">
 <div class="clearfix">
 <div class="clothing">
 <img src="image/floor/6.jpg">
 <p>阿迪达斯训练男子</p>
 <p>￥479</p>
 </div>
 </div>
 </div>

 </div>
 <!--楼层区结束-->

 <!--楼层导航-->
 <div class="floor-nav">
 <div>1F</div>
 <div>2F</div>
 <div>3F</div>
 <div>4F</div>
 <div>5F</div>
 </div>
 <!--楼层导航结束--> 

 <script src="js/script.js"></script>
</body>
</html>
是否可以坚持走得更远些 2018-08-23
源自：项目：JQ实现瀑布流   5-2 作业题
1
收起

正在回答

登陆购买课程后可参与讨论，去登陆吧

6回答
好帮手慕星星 回答被采纳获得+3积分 2018-08-24 13:59:04

http://img1.sycdn.imooc.com//climg/5b7f9e6c0001b6d604780109.jpg

这是两个后代选择器，之间用逗号隔开，都有相同的样式而已。后面的选择器是通过js在html中添加的。

0
收起回答
好帮手慕星星 2018-08-24 11:22:12

用两个数组很难完成交换，因为index是当前的楼层索引，如果滚动到下一楼层，其它的都会变成下一楼层的数字，所以建议在html中添加两个，一个显示，一个隐藏。参考：

http://img1.sycdn.imooc.com//climg/5b7f798600015b0e06050527.jpg

css样式：

http://img1.sycdn.imooc.com//climg/5b7f799700010d3304550430.jpg

js脚本：

http://img1.sycdn.imooc.com//climg/5b7f79b20001ee1208610479.jpg

把鼠标移入楼层的js脚本去掉，因为上面已经在css样式中添加了。

http://img1.sycdn.imooc.com//climg/5b7f79da000163db07050275.jpg

自己测试下。

0
收起回答
  • 提问者 是否可以坚持走得更远些 #1
    .floor-nav div:hover .elevator-num,.elevator-active .elevator-num{ display: none; } 逗号后面的是啥意思，这个又是CSS的什么写法？
    2018-08-24 13:47:42
好帮手慕星星 2018-08-24 09:50:05

参考：

http://img1.sycdn.imooc.com//climg/5b7f62950001b5f408200417.jpg

这是按照你的代码进行修改的。

1、定义的offset是一个楼层的高度。

2、使用each循环，里面判断条件页面的高度+滚动的高度>=当前楼层距离顶部的高度+一个楼层的高度，这个条件是想让楼层出现一部分之后，左侧导航再变换样式。

自己测试下。

0
收起回答
  • 提问者 是否可以坚持走得更远些 #1
    each 循环我是想到了，我现在遇到的问题是：比如，滚到到了家用电器的楼层，楼层导航的1-4层的文字导航都会显示出来了。我是想让滚到到第几层就让第几层的文字显示出来，其他的就还是显示数字导航。这又改怎么修改。
    2018-08-24 10:31:56
好帮手慕星星 2018-08-23 18:58:04

测试了你的代码，使用for循环不太对，你可以打印一下arr数组，在开始滚动的时候，就把每个楼层的数据存储进去了，循环一次，存储一次，i的值滚动的时候是不确定的，因为滚动一下，就会执行for循环，i是不会对应到相应楼层的。建议使用for循环的时候可以使用this，判断条件：当窗口高度+滚动的高度>this，也就是当前楼层的高度的时候，再通过当前的索引添加样式。自己试着写一写，如果还有问题，可以继续提问哦。祝学习愉快~~


0
收起回答
提问者 是否可以坚持走得更远些 2018-08-23 17:35:57

字符超出了，CSS和JS写在这里了。

$(function(){

	//顶部下拉菜单的滑动事件开始
	$('.right-nav').children().hover(function(){
		$(this).children().show();
	},function(){
		$('.nav-ul').hide();
	});


	$('.nav-ul').hover(function(){
		$(this).show();
	},function(){
		$(this).hide();
	});
	//顶部下拉菜单的滑动事件结束


	// 登录开始
	$('#login').click(function(){
		console.log("11");
		$('.mask-layer').show();//显示弹出层遮罩
		$('.pop-layer').show();//显示弹出层窗体

		$('.login-but').click(function(){
			$('.log-content').show();
			$('.reg-content').hide();
			$('.register-but').removeClass('active');
			$(this).addClass('active');//字体变红色且增加下边框
		});

		$('.register-but').click(function(){
			$('.reg-content').show();
			$('.log-content').hide();
			$('.login-but').removeClass('active');
			$(this).addClass('active');//字体变红色且增加下边框
		});

	});

	//关闭窗体、遮罩层
	$('.close-but').click(function(){
		$('.mask-layer').hide();//关闭弹出层遮罩
		$('.pop-layer').hide();//关闭弹出层窗体
	});
	// 登录结束


	//轮播图开始
	var index=0;
	var timer;//定时器
	var len=$('.banner1').length;

	//图片轮播的主体函数
	function changeImg(){
		$('.slideImage').children('.banner1').hide();
		$('.banner1').eq(index).show();
		$('.dots').children().removeClass('dot-active');
		$('.dots').children().eq(index).addClass('dot-active');
	}

	function startAutoPlay(){
		timer=setInterval(function(){
			index++;
			if(index==len){
				index=0;
			}
			changeImg();
		},2000);
	}

	function stopAutoPlay(){
		if(timer){
			clearInterval(timer);
		}
	}

	startAutoPlay();//一开始就让banner图自动轮播

	//控制banner图
	function slideImg(){
		
		//滑进、滑出
		$('.slideImage').hover(stopAutoPlay,startAutoPlay);
		
		//上一张
		$('.prev').click(function(){
			index--;
			if(index<0){
				index=4;
			}
			changeImg();
		});

		//下一张
		$('.next').click(function(){
			index++;
			if(index==len){
				index=0;
			}
			changeImg();
		});

		//小圆点
		$('.dots').children().click(function(){
			index=$(this).index();
			console.log(index);
			changeImg();
		});
	}

	slideImg();
	//轮播图结束


	//左侧导航栏开始
	$('.menu-item').mouseover(function(){

		//鼠标滑过导航栏背景变白色，字体变红色
		$('.menu-item').removeClass('menu-item-active');
		$(this).addClass('menu-item-active');
		$('.menu-item').children().removeClass('a-active');
		$(this).children().addClass('a-active');

		//显示子菜单
		$('.sub-menu').show();
		var index = $(this).index()-1;
		console.log(index);

		$('.sub-inner-box').hide();//滑过之前先全部隐藏
		$('.sub-inner-box').eq(index).show();
	
		
		//滑过子菜单显示
		$('.sub-menu').mouseover(function(){
			$(this).show();
		});
		
		//滑出子菜单隐藏
		$('.sub-menu').mouseout(function(){
			$(this).hide();
		});

	});

	$('.menu-item').mouseout(function(){

		//鼠标滑过导航栏背景变白色，字体变红色
		$('.menu-item').removeClass('menu-item-active');
		$('.menu-item').children().removeClass('a-active');

		//滑出时隐藏子菜单
		$('.sub-menu').hide();
	});
	//左侧导航栏结束
	
	
	//楼层区开始
	$('.small-category').find('span').mouseover(function(){
		//加上小三角且颜色变红色
		$(this).parent().find('span').removeClass('small-category-active');
		$(this).addClass('small-category-active');

		//显示不同的类别
		var index = $(this).index();
		$(this).parent().parent().nextUntil('.floor').hide();
		$(this).parents('.floor').nextUntil('.floor').eq(index).show();
	});
	
	//楼层导航
	$(window).scroll(function(){
		var index1 = $('.floors').find('.floor').eq(1);
		var top = index1.offset().top+61;//获得个体美妆所在位置的高度,61是外层DIV的高度	
		var windowHeight = $(window).height();
		var scrollTop = $(window).scrollTop();
		
		//当文档高度+滚动条滚动的高度>个体美妆所在位置的高度时显示楼层导航
		if(windowHeight+scrollTop>top){
			$('.floor-nav').show();
		}else{
			$('.floor-nav').hide();
		}

		//滚动到对应楼层时，楼层导航显示对应的文字导航
		var len = $('.floors').find('.floor').length;
		var arr = [];
		var text_arr = ['服装','美妆','手机','家电','电脑'];
		var number_arr = ['1F','2F','3F','4F','5F'];
		var top1 = windowHeight+scrollTop;
		for(var i=0;i<len;i++){
			//取得每个楼层的top值放在数组中，61是外层DIV的高度	
			arr[i] = $('.floors').find('.floor').eq(i).offset().top+61;

			//如果文档高度+滚动条滚动的高度在各个楼层的top值之间，楼层导航显示为文字导航且字体变红色
			if( arr[i]<top1<arr[i+1]){
				$('.floor-nav').children().eq(i).text(text_arr[i]);
				$('.floor-nav').children().eq(i).css('color','red');
			}else{
				$('.floor-nav').children().eq(i).text(number_arr[i]);
				$('.floor-nav').children().eq(i).css('color','gray');
			}
		}


	});
	

	//点击楼层导航跳到相应的位置
	$('.floor-nav').children().click(function(){
		
		var index2 = $(this).index();
		var top2 = $('.floors').find('.floor').eq(index2).offset().top;
		// console.log(top);
		$(window).scrollTop(top2);
	});
	

	//鼠标滑过楼层导航时显示对应的文字导航
	var text_arr = ['服装','美妆','手机','家电','电脑'];
	var number_arr = ['1F','2F','3F','4F','5F'];
	
	$('.floor-nav').children().hover(function(){
		var floor_index1 = $(this).index();
		$(this).text(text_arr[floor_index1]);
	},function(){
		var floor_index2 = $(this).index();
		$(this).text(number_arr[floor_index2]);
	});

	//楼层区结束
});


老师，在JS中的184行至202里的代码为什么没起到作用，是我的逻辑本来就有问题吗？该怎么修改呢？


0
收起回答
提问者 是否可以坚持走得更远些 2018-08-23 17:33:11 
*{
    margin:0;
    padding: 0;
}

a{
    text-decoration: none;
    color: white;
}


li{
    list-style-type: none;
}

body{
    font-family: "微软雅黑";
    font-size: 14px;
}

.clearfix:after{
    content:"";
    height:0;
    display:block;
    visibility:hidden;
    clear:both;
}

.clearfix{
    zoom:1;
}


.header{
    width: 100%;
    height: auto;
    
}

/*顶部*/
.top{
    width: 1600px;
    height: 80px;
    background: #f3f5f7;
    margin: 0 auto;
    border-bottom: 1px solid #cecfd3;
}

.top .left-login{
    float: left;
    height: 80px;
    line-height: 80px;
}

.top .left-login span{
    margin: 0 5px;
}

.top .left-login span:hover{
    cursor: pointer;
    color: red;
}

.top .right-nav{
    height: 80px;
    line-height: 80px;
    float: right;   
}

.top .right-nav>li{
    float: left;
    position: relative; 
    text-align: center;
    box-sizing: border-box;
    width: 150px;   
}

.top .right-nav>li:hover{
    cursor: pointer;
    color: red;
    border-left: 1px solid #cecfd3;
    border-right: 1px solid #cecfd3;
    /*outline:1px solid #cecfd3;*/
}

.top .right-nav .nav-ul {   
    position: absolute;
    top: 80px;
    display: none;
    border: 1px solid #cecfd3;
    margin-left: -2px;
    text-align: center;
    width: 150px;  
    z-index: 2; 
}

.top .right-nav .nav-ul li{
    color: black;   
}

.top .right-nav .nav-ul li:hover{
    color: red;
}

/*弹出层遮罩*/
.mask-layer{
    width: 100%;
    height: 100%;
    background: black;
    opacity: 0.5;
    position: fixed;
    top: 0;
    z-index: 99;
    display: none;
}

/*弹出层窗体*/
.pop-layer{
    width: 500px;
    height: 400px;
    background: white;
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    z-index: 100;
    display: none;
    padding: 50px;
   
}

.pop-layer .log-reg-but .login-but{
    float: left;
    cursor: pointer;
}

.pop-layer .log-reg-but .active{
    color: red;
    border-bottom: 2px solid red;
}

.pop-layer .log-reg-but .register-but{
    float: left;
    margin-left: 30px;
    cursor: pointer;
}

.pop-layer .log-reg-but .close-but{
    float: right;
    cursor: pointer;
}

/*登录内容样式*/
.pop-layer .log-content .login-user,.login-pass{
    width: 496px;
    height: 50px;
    margin-top: 20px;

}

.pop-layer .log-content .check-forgetpass{
    margin-top: 20px;
}

.pop-layer .log-content .checkbox{
    width: 25px;
    height: 25px;
}

.pop-layer .log-content span{
    float: right;
    cursor: pointer;
}

.pop-layer .log-content button{
    width: 496px;
    height: 50px;
    margin-top: 20px;
    cursor: pointer;
}

.pop-layer .log-content button:hover{
    background: #07bbbf;
}

.pop-layer .log-content .social-btn{
    text-align: center;
    margin-top: 20px;
}

.pop-layer .log-content .social-btn img{
    background: #cecfd3;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right :50px;
    cursor: pointer;
}

.pop-layer .log-content .social-btn img:hover{
    background: #07bbbf;
}

/*注册内容样式*/
.pop-layer .reg-content .login-user{
    width: 496px;
    height: 50px;
    margin-top: 20px;

}

.pop-layer .reg-content .login-pass{
    width: 396px;
    height: 50px;
    margin-top: 20px;

}

.pop-layer .reg-content .vertify{
    float: right;
    margin-top: 23px;
    
}

.pop-layer .reg-content span{
    float: right;
    cursor: pointer;
}

.pop-layer .reg-content button{
    width: 496px;
    height: 50px;
    margin-top: 20px;
    cursor: pointer;
}

.pop-layer .reg-content button:hover{
    background: #07bbbf;
}

.pop-layer .reg-content .social-btn{
    text-align: center;
    margin-top: 20px;
}

.pop-layer .reg-content .social-btn img{
    background: #cecfd3;
    width: 50px;
    height: 50px;
    border-radius: 50%;
    margin-right :50px;
    cursor: pointer;
}

.pop-layer .reg-content .social-btn img:hover{
    background: #07bbbf;
}

/*logo区*/
.header .logo{
    width: 1600px;
    height: 80px;
    margin:70px auto;
   
}

.header .logo .logo-img{
    height: 80px;
    float: left;
}

.header .logo input{
    width: 630px;
    height: 76px;
    margin-left: 200px;
    line-height: 76px;
    float: left;

}

.header .logo .ser-span{
    display: inline-block;
    width: 80px;
    height: 80px;
    background: black;
    color: white;
    line-height: 80px;
    cursor: pointer;
    text-align: center;
    
}

.header .logo .shopping-cart{
    float: right;
    width: 320px;
    height: 80px;
    background-color: red;
    text-align: center;
    line-height: 80px;
    color: white;
    font-size: 28px;
    cursor: pointer;
}

.header .logo .shopping-cart img{
    height: 33px;
    vertical-align: middle;
}

/*导航区*/
.header .nav{
    /*width: 100%;*/
    height: 80px;
    background: black;
    color: white;
    line-height: 80px;
    padding-left: 550px;
}

.header .nav li{
    float: left;
    margin-right: 60px;
    cursor: pointer;
    font-size: 26px;
}

.header .nav li:hover{
    color: red;
}

/*banner区*/
.banner{
    width: 1600px;
    margin:0 auto;
    height: 705px;
    /*background: green;*/
    margin-top: 10px;
    position: relative;
    
}

/*左侧导航栏*/
.banner .menu-box{
    width: 290px;
    height: 800px;
    background: red;
    color: white;
    /*padding: 0 20px 20px 20px;*/
    float: left;
    margin-top: -95px;
}

.banner .menu-box p{
    height: 80px;
    line-height: 80px;
    font-size: 28px;
    margin-top: 5px;
    color: white;
    margin-left: 20px;
}

.banner .menu-box p img{
    width: 30px;
    height: 30px;
    margin-right: 15px;
}

.banner .menu-box .menu-item{
    height: 50px;
    line-height: 50px;
   
}

.banner .menu-box .menu-item a{
    padding: 20px;
        
}

/*鼠标滑过左侧菜单时背景变白色*/
.menu-item-active{
    background: white;
}

/*鼠标滑过左侧菜单时字体变红色*/
.a-active{
    color: red;
}

.banner .menu-box .menu-item .dayu{
    float: right;
    padding-right: 20px;
}

/*子菜单*/
.banner .sub-menu{
    width: 890px;
    height: 705px;
    background: white;
    position: absolute;
    top: 0;
    left: 290px;
    z-index: 3;
    overflow: hidden;
    display: none;
}


.banner .sub-menu .sub-inner-box{
    margin-left: 30px;
    display: none;
}

.banner .sub-menu .sub-inner-box .sub-row{
    margin-bottom: 45px;

}

.banner .sub-menu .sub-inner-box .sub-row .bold{
    font-weight: bold;
    /*display: inline-block;
    width: 105px;
    text-align: right;*/
  
}

.banner .sub-menu .sub-inner-box .sub-row a{
    color: black;
    margin-left: 40px;  
}

.banner .sub-menu .sub-inner-box .sub-row a:hover{
    color: red;
}

/*轮播图*/
.banner .slideImage{
    width: 880px;
    height: 705px;
    float: left;
    overflow:hidden;
    margin-left: 10px;
    position: relative;
}

.banner .slideImage img{
    width: 880px;
    height: 705px;
}

/*下一张*/
.banner .slideImage .next{
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -25px;
    cursor: pointer;
}

.banner .slideImage .next:hover,.prev:hover{
    background: #cecfd3;
}

/*上一张*/
.banner .slideImage .prev{
    width: 50px;
    height: 50px;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 10px;
     margin-top: -25px;
    cursor: pointer;
}

.banner .slideImage .next img{
    width: auto;
    height: auto;
    margin-top: 7px;
}

.banner .slideImage .prev img{
    width: auto;
    height: auto;
    margin-top: 7px;
}

/*圆点*/
.banner .slideImage .dots{
    position: absolute;
    bottom: 20px;
    left: 50%;
}

.banner .slideImage .dots .dot-active{
    background-color: rgb(255,255,255);
    box-shadow: 0 0 0 2px rgba(7, 17, 27, 0.8) ;
}

.banner .slideImage .dots span{
    display: inline-block;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background-color: rgba(7, 17, 27, 0.4);
    cursor: pointer;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.8) inset;
    
}

/*生活区*/
.banner .services{
    float: right;
    width: 410px;
    height:705px;
    /*background: blue;*/
    margin-left: 10px;
}

.banner .services .news{
    
    width: 377px;
    height: 235px;
    padding: 13px;
    border:1px solid #cecfd3; 
}

.banner .services .news .kuaibao{
    color: red;
    font-size: 26px;
}

.banner .services .news .more{
    float: right;
}

.banner .services .news p{
    margin-top: 15px;
}

.banner .services .news .kuaibao:hover,.more:hover{
    cursor: pointer;
    color: red;
}

.banner .services .news p:hover{
    cursor: pointer;
    color: red;
}

.banner .services .service-img{
    border-left: 1px solid #cecfd3;
    width: 410px;
    height: 302px;

}

.banner .services .service-img a{
    float: left;
    width: 100px;
    height: 100px;
    text-align: center;
    border-bottom: 1px solid #cecfd3;
    border-right: 1px solid #cecfd3;
    color: black;
}

.banner .services .service-img a span:hover{
    color: red;
}

.banner .services .service-img a img{
    margin-top: 17px;
}

.banner .services .ad{
    width: 408px;
    height: 140px;
    cursor: pointer;
}

/*楼层区*/
.floors{
    width: 1600px;
    margin:0 auto;
    margin-top: 40px;
    /*background: green;*/
}

.floors .floor{
    width: 1600px;
    height: 60px;
    border-bottom: 1px solid red;
    line-height: 60px;
    margin-top: 40px;
}

.large-category{
    float: left;
    font-size: 28px;
}

.category{
    font-weight: bold;
}

.floor-number{
    display: inline-block;
    color: white;
    background: black;
    width: 45px;
    height: 45px;
    border-radius: 50%;
    text-align: center;
    line-height: 45px;
}

.small-category{
    float: right;
    width: auto;
}

.small-category span{
    display: inline-block;
    width: 110px;
    height: 60px;
    text-align: center;
    cursor: pointer;
}

/*小三角*/
.small-category-active{
    background-image: url(../image/floor-arrow.png);
    background-repeat: no-repeat;
    background-position: 50% 100%;
    color: red;
    position: relative;
    top: 1px;
}

.clothing{
    float: left;
    text-align: center;
    margin: 20px 37px;
    cursor: pointer;
    width: 192px;
    height: 221px;
}

.clothing p{
    margin:15px 0;
}

.clothing p:hover{
    color: red;
}

/*楼层导航*/
.floor-nav{
    height: 280px;
    font-size: 30px;
    color:gray;
    position: fixed;
    top: 50%;
    left: 80px;
    /*margin-top: -140px;*/
    cursor: pointer;
    display: none;
}

.floor-nav div{
    margin:13px;
}

.floor-nav div:hover{
    color: red;
}


0
收起回答
问题已解决，确定采纳
还有疑问，暂不采纳

恭喜解决一个难题，获得1积分~

来为老师/同学的回答评分吧

0 星

相似问题

5-2楼层导航问题
78 0 4
老师 有关楼层导航条效果实现的问题
27 0 5
5-2作业问题
66 0 7
左侧楼层导航的实现以及右侧导航的动画效果该怎么实现
0 0 6
导航楼什么时候显示文字
23 0 1

登录后可查看更多问答，登录/注册

前端小白入门系列课程
  • 参与学习           人
  • 提交作业       11218    份
  • 解答问题       36712    个

从一个不会编程的小白到一个老司机是需要过程的，首先得入门，学习基础知识，然后才能进阶，最后再到精通，本专题是你走进前端世界的不二选择！

了解课程

本课精华内容

问答 作业

为什么我的没有框

5 45

表格的问题

377 41

大家好,body前面有一个红色的小××，麻烦大家帮我看看

378 40

到底是cellspacing还是cellpacing?

0 35

课间活动的表格怎么实现，想了很久也想不出来

60 30

查看更多本课问答
请稍等 ...
微信客服

购课补贴
联系客服咨询优惠详情

 帮助反馈 APP下载

慕课网APP
您的移动学习伙伴

 公众号

扫描二维码
关注慕课网微信公众号

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码，添加
你的专属老师