css+html模仿京东app底部导航栏

完成效果如下：
上下滑动页面，底部导航栏一直存在，位置不变

底部导航栏实现代码如下：

只需css写超简单代码
重点是footer标签，其余标签是为和京东导航栏一样而设置的样式

footer {width: 193rem;margin-top: 2rem;height: 25rem;background-color: white;padding-bottom: 1px;position: fixed;   //定位bottom: 0;   //一直在最下端display: flex;flex-flow: row;
}
.boxfooter{width: 26rem;height: 25rem;margin-left: 2rem;}
.boxfooter img{margin-top: 2rem;margin-left: 3rem;width: 21rem;height: 12rem;}
.boxfootertext{margin-left: 2rem;width: 19rem;height: 15rem;font-size: 6rem;text-align: center;
}.boxfooter1{width: 52rem;height: 20rem;margin-left: 2rem;margin-right: 3rem;color: white;background: #FF0000;font-size: 7rem;border-radius: 50px 50px 50px 50px;text-align: center;margin-top: 2rem;}
.boxfooter1 span{display: inline-block;position:relative;line-height:24px;top:50%;margin-top:-12px;vertical-align:top;
}
.boxfooter2{width: 52rem;height: 20rem;color: white;background-color: rgb(255,194,13);font-size: 7rem;border-radius: 50px 50px 50px 50px;text-align: center;margin-top: 2rem;
}
.boxfooter2 span{display: inline-block;position:relative;line-height:24px;top:50%;margin-top:-12px;vertical-align:top;
}

然后在html中应用footer标签，就可实现

<footer><div class="boxfooter"><img src="img/店铺.JPG" /><div class="boxfootertext">店铺</div></div><div class="boxfooter"><img src="img/客服1.jpg" /><div class="boxfootertext">客服</div></div><div class="boxfooter"><img src="img/购物车.JPG" /><div class="boxfootertext">购物车</div></div><div class="boxfooter1"><span><b>加入购物车</b></span></div><div class="boxfooter2"><span><b>立即购买</b></span></div></footer>

css+html模仿京东app底部导航栏相关推荐

app底部导航栏的设计模板素材
底部导航栏有权重平分.强调信息.引导操作这三种模式. 底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面.早期的底部导航栏是单一的指路功能,经过多年的交互设计迭代后, ...
安卓APP底部导航栏（有消息圆点指示器），实现fragment切换（eclipse）
本项目使用了相对布局和单选按钮实现了安卓app常见的底部导航栏(带有消息圆点指示器),效果如果所示一.布局代码如下: <RelativeLayout xmlns:android="h ...
UI实用素材模板|app底部导航栏的图标可临摹素材，教你分析！
图标在产品中的应用非常重要,不同位置的图标有不同的设计思路. 底部导航栏图标重要性底部导航栏的图标是路牌,承担着指路的作用,给用户指明进入产品后可以分别通往什么页面.早期的底部导航栏是单一的指路功能 ...
仿喜马拉雅app底部导航栏五个按钮-clipChildren属性
clipChildren属性 clipChildren属性表示是否限制子控件在该容器所在的范围内,clipChildren属性配合layout_gravity属性,可以用来设置多余部分的显示位置,我这 ...
hbuilderx 底部_如何在Hbuilder中制作app底部导航栏
. 1 问题描述最近在使用Hbuilder进行移动app前端开发中,我通常搭建首页框架的常规方法是在index.html主文件中使用多种框架组件模块,再通过css叠层样式表对相应模块加以修饰.但在分 ...
html+css——做一个简单的底部导航栏
ps:小项目由html和css实现目录项目设计效果图设计 html部分 css部分源代码项目设计效果图话不多说,先直接上一下完成后的效果图: 通过以上效果图可以大致想一下你的思路,以及 ...
模仿手机QQ底部导航栏Icon拖拽效果
本文已授权微信公众号:鸿洋(hongyangAndroid)原创首发. 之前玩手机QQ时发现下面的图标竟然可以拖拽,发现还蛮好玩的.于是自己也模仿着写了一个. 先上个效果图吧实现的方式有很多,我说一 ...
Android Navigation与BottomNavigationView实现底部导航栏
底部导航栏一.效果图二.实现 1.创建Fragment以及布局文件 2.添加FragmentContainerView和BottomNavigationView两个控件 3.配置xml资源文件 4 ...
css + HTML 实现京东app左右拖动导航栏
css + HTML 实现京东app左右拖动导航栏也可实现图片左右拖动(原理一样的) 京东app左右拖动导航栏效果: 图片左右拖动效果: 只写导航栏如下,因为图片原理一样只需css定义两个盒子模型 ...

css+html模仿京东app底部导航栏

css+html模仿京东app底部导航栏相关推荐

最新文章

热门文章