移动端电梯导航页面

目录

html代码

css代码

js代码

效果图

html代码

  <!-- 头部 -->
    <div class="head">

        <div class="right-tou"><img src="./img/icon/icon-back.png" alt=""></div>
        <div class="middle">
            <!-- 放大镜 -->
            <span><svg class="icon fangda" aria-hidden="true">
                    <use xlink:href="#icon-fangdajing"></use>
                </svg></span>
            <!-- input输入框 -->
            <input id="ipt" type="text" placeholder="手机狂欢节抢iPhone X">

        </div>

        <div class="redback"><svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-hongseqiandai"></use>
            </svg></div>
        <div class="xx"><span class="iconfont icon-duanxinxiaoxixinxi xi
            "></span></div>

    </div>


    <!-- 侧边栏 -->

    <div class="slider">
        <ul class="list-l">
            <li class="active">热门推荐</li>
            <li>美容彩妆</li>
            <li>母婴专区</li>
            <li>箱包配饰</li>
            <li>家居个护</li>
            <li>营养保健</li>
            <li>服饰鞋靴</li>
            <li>数码家电</li>
            <li>运动户外</li>
            <li>汽车用品</li>
            <li>生活旅行</li>
        </ul>

        <div class="list-right">
            <div class="box">
                <p class="img"><img src="./img/pd/cf-4.jpg" alt=""></p>
                <h2>热门推荐</h2>

                <ul class="ww">
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                </ul>
            </div>


            <!-- 家具狂欢节 -->
            <div class="box">
                <p class="img"><img src="./img/pd/cf-4.jpg" alt=""></p>
                <h2>美容彩妆</h2>

                <ul class="ww">
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>

                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                    <li>
                        <p><img src="./img/pd/sp-sf800.jpg" alt=""></p>手机数码
                    </li>
                </ul>
            </div>

            <!-- 母婴专区 -->
            <div class="box">
                <h2>母婴专区</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 箱包配饰 -->
            <div class="box">
                <h2>箱包配饰</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 家居个护 -->
            <div class="box">
                <h2>家居个护</h2>
                <div class="kongbai">

                </div>
            </div>
            <!-- 营养保健 -->
            <div class="box">
                <h2> 营养保健</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 服饰鞋靴 -->
            <div class="box">
                <h2>服饰鞋靴</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 数码家电 -->
            <div class="box">
                <h2>数码家电</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 运动户外 -->
            <div class="box">
                <h2>运动户外</h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 汽车用品 -->
            <div class="box">
                <h2>汽车用品 </h2>
                <div class="kongbai">

                </div>
            </div>

            <!-- 生活旅行 -->
            <div class="box">
                <h2>生活旅行</h2>
                <div class="kongbai">

                </div>
            </div>

        </div>








    </div>


    <!-- 底部 -->
    <div class="footer">
        <ul>
            <li>
                <a href="./index.html">
                    <span class="iconfont icon-home_fill  "></span>
                    <!-- <span><svg class="icon" aria-hidden="true">
                            <use xlink:href="#icon-home_fill"></use>
                        </svg></span> -->
                    <p> 首页</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-fenlei dd icon-red "></span>
                    <p class="footer-red">分类</p>
                </a>

            </li>
            <li>
                <a href="./faxian.html">
                    <span class="iconfont icon-icon_find dd  "></span>
                    <p >发现</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-gouwuchefill dd "></span>
                    <p>购物车</p>
                </a>

            </li>
            <li>
                <a href="#">
                    <span class="iconfont icon-my dd"></span>
                    <p>我的</p>
                </a>

            </li>
        </ul>
    </div>

css代码

* {
    list-style: none;
    padding: 0;
    margin: 0;
    text-decoration: none;
}

html,
body {
    /* padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    overflow: hidden; */
    overflow-y: auto;
}

/* 头部固定部分 */
.head {
    width: 10rem;
    height: 1.2rem;
    display: flex;
    justify-content: space-around;
    align-items: center;
    /* border-bottom: 1px solid #e6e3e3; */
    position: fixed;
    top: 0;
    left: 0;
    background-color: white;
    margin-bottom: .0267rem;
}

.img {
    width: 6.8rem;
    height: 1.2rem;
    text-align: center;
    line-height: 1.2rem;
}

.icon {
    width: 1em;
    height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    font-size: .6667rem;
}

.img img {
    width: 2.4rem;
    height: .6749rem;
    vertical-align: middle;

}

.right-tou img {
    width: .6667rem;
    height: .6667rem;
}

.xi {
    font-size: .5333rem;
}

.fangda {
    font-size: .5333rem;
    color: white;

    opacity: 0.2;

}

.middle span {
    display: inline-block;
    width: .5333rem;
    /* height: .7467rem; */
    height: .6133rem;
    margin-left: .2667rem;
    /* background-color: chartreuse; */
    /* padding-top: .1333rem; */

}

.middle input {
    outline: none;
    border: none;
    /* background-color: brown; */
    background-color: #e5e5e5;
    height: .7467rem;
    width: 6.1333rem;
    /* font-size: 18px; */

}

/* 搜索框 */
.middle {
    width: 7.36rem;
    height: .7467rem;
    background-color: #e5e5e5;
    border-radius: .3733rem;

    display: inline-flex;

}

/* 侧边栏 */
.slider {
    /* margin-top: 1.3333rem; */
    display: flex;
    background-color: #f2f4f5;
   
}
.slider .list-l{
    height: 15.4667rem;
    width: 1.9467rem;
    position:fixed;
    top: 1.3333rem;
    left: 0;
    /* background-color: #f2f4f5; */
}
.slider .list-l>li {
    width: 1.9467rem;
    height: 1.28rem;
    /* background-color: #f2f4f5; */
    font-size: .32rem;
    text-align: center;
    line-height: 1.28rem;
}

/* .slider ul{
    float: left;
} */
body {
    background-color: #f2f4f5;
}

.list-right {
    background-color: white;
    /* float: left; */
    /* width: 7.6267rem;
    height: 15.4667rem; */
    overflow-y: auto;
    /* margin-left: .1333rem; */
    padding-left: .1333rem;
    padding-right: .1333rem;
    margin-top: 1.3333rem;

    margin-left: 1.8667rem;
}

/* 侧边具体内容 */
.list-right .img {
    width: 7.6213rem;
    height: 2.2581rem;
    margin-top: .2667rem;
}

.list-right .img img {
    width: 7.6213rem;
    height: 2.2581rem;
}

.list-right h2 {
    font-size: .3413rem;
    /* margin-bottom: .2667rem; */

    color: #555;
    margin: .2667rem;
}

.ww li {
    width: 2.5333rem;
    height: 2.5333rem;
    /* background-color: lawngreen; */
    margin-bottom: .1333rem;
    text-align: center;
}

.ww li>p>img {
    width: 1.6rem;
    height: 1.6rem;
}

.ww li {
    font-size: .2933rem;
}

.ww {
    display: flex;
    flex-wrap: wrap;
}

/* 母婴专区 */

.box .kongbai {
    width: 7.6267rem;
    height: 8rem;
    background-color: #EDEDED;

}
.box{
margin-bottom: .8rem;

}

/* 底部 */
.footer ul {
    display: flex;
    justify-content: space-around;
}

.footer li {
    width: 2rem;
    height: 1.12rem;
    text-align: center;
}

.footer li a {
    text-decoration: none;
    color: #707070;
}

.footer p {
    font-size: .32rem;

}

.footer {
    position: fixed;
    left: 0;
    bottom: 0;
    height: 1.3rem;
    width: 10rem;
    background-color: #f7fcfe;
}

.dd {
    font-size: .5333rem;
}

.rrr {
    background-color: #E73C3C;
}


/* 点击时添加的类 */
.list-l .active{
    background-color: white;
    color: #E73C3C;
    border-left: 2px solid red;
}



.footer li .footer-red{
    color: red;
}
.iconfont{
    font-size: .5333rem;
}
.footer li .icon-red{
    color: #E51C23;
}

js代码

  //电梯导航
        const lis = document.querySelectorAll('.list-l li')
        const divs = document.querySelectorAll(' .list-right .box')

        lis.forEach((item, index) => {
            item.addEventListener('click', () => {
                document.querySelector('.list-l .active').classList.remove('active')
                item.classList.add('active')
                //页面被卷去的尺寸等于点击时对应div到顶部的距离-50
                document.documentElement.scrollTop = divs[index].offsetTop - 50
            })
        })

效果图