移动端电梯导航页面
2023-12-23 18:20:41
目录
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
})
})
效果图
文章来源:https://blog.csdn.net/m0_56713342/article/details/135169960
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符，请联系我的编程经验分享网邮箱：veading@qq.com进行投诉反馈，一经查实，立即删除！