火币网

              火币网
                |  首页  |  资讯  |  评测  |  人物  |  活动  |  学院  |  新报  |  专栏  |  专题  |  专区  |  
              您现在的位置:火币网> 学院> 教程>

              html如何把导航栏固定在底部随浏览器移动?

              2019-04-15 15:14 作者:百度经验 来源:硅谷网综合 HV: 编辑:GuiGu 【搜索试试

              火币网 www.bbhmx.com 导航栏固定在底部,随浏览器一起移动;

              工具/原料

              需要的CSS样式:position:fixed;z-index:999;left:0;right:0;bottom:0;

              正常导航,

              方法/步骤1:

              原理:通过CSS样式就可以完成

              position:fixed;

              生成绝对定位的元素,相对于浏览器窗口进行定位。

              元素的位置通过 "left", "top", "right" 以及 "bottom" 属性进行规定。

              方法/步骤2:

              用fixed的话,会出现优先级别较低,导致被其他div覆盖的情况,那么这里就需要用到z-index:999;来让他成为最高级别,不至于被覆盖,999只是个数字,可以随意更改,比其他的高就可以;

              方法/步骤3:

              定位:left:0;right:0;bottom:0;

              这三个样式写好后,就可以固定在底部并居中了。不要写top:0;

              方法/步骤4:

              div部分:

              首页

              列表页

              内容页

              方法/步骤5:

              CSS样式部分:

              .a1{

              margin: auto;

              padding:0;

              list-style: none;

              font-size:14px;

              width:1020px;

              position:fixed;

              z-index:999;

              bottom:0px;

              left:0;

              right:0;

              }

              注意事项

              样式要作用于,不要作用到 上面,会出现堆叠

              z-index的数值不一定非得999,比其他大就可以;

              样式添加浮动后,不要在div里面清除,这样不会影响布局;

              【对“html如何把导航栏固定在底部随浏览器移动?”发布评论】

              版权及免责声明:
              ① 本网站部分投稿来源于“网友”,涉及投资、理财、消费等内容,请亲们反复甄别,切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质,仅供阅读,不构成具体实施建议,请谨慎对待。据此操作,风险自担。
              ② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视频,版权均属本网站所有,任何媒体、网站或个人需经本网站许可方可复制或转载,并在使用时必须注明来源【硅谷网】或对应来源,违者本网站将依法追究责任。
              ③ 注明来源为各大报纸、杂志、网站及其他媒体的文章,文章原作者享有著作权,本网站转载其他媒体稿件是为传播更多的信息,并不代表赞同其观点和对其真实性负责,本网站不承担此类稿件侵权行为的连带责任。
              ④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容,涉及到侵权、违法等问题,请有关单位或个人速与本网站取得联系(联系电话:01057255600),我们将第一时间核实处理。
              相关
              广告
              头条
              图文
              查找我的iPhone详细教程:苹果手机丢了怎么办?
              查找我的iPhone详细教程:苹果手机丢了怎么
              山寨安卓手机刷机教程 不用担心自己不会刷机了
              山寨安卓手机刷机教程 不用担心自己不会刷
              dedecms织梦上传图片相对路径改成绝对路径方法
              dedecms织梦上传图片相对路径改成绝对路径
              织梦dedecms配置手机wap站点并绑定二级域名!
              织梦dedecms配置手机wap站点并绑定二级域名
              最新
              ·编辑html,如何把导航栏固定在网页底部随屏幕移动
              ·html如何把导航栏固定在底部随浏览器移动?
              ·查找我的iPhone详细教程:苹果手机丢了怎么办?
              ·dede下载远程图片格式修改?JPEG图片本地化!
              ·dedecms批量命令:dede合并栏目、删除栏目方法
              热点
              ·dedecms织梦上传图片相对路径改成绝对路径方
              ·dedecms批量命令:dede合并栏目、删除栏目方
              ·织梦dedecms配置手机wap站点并绑定二级域名!
              ·DEDE系统如何调用图片?图片标签调用方法大全
              ·为何总写自我意淫型文案?文案应该怎么写?
              广告
              旧闻
              ·编辑html,如何把导航栏固定在网页底部随屏幕
              ·dede下载远程图片格式修改?JPEG图片本地化!
              ·三维CAD实用教程:开关基座如何快速建模
              ·CAXA二维CAD教程:把图纸名默认为文件名
              ·用这个小技巧,你可以百度上找到想要的一切!
              广告
              硅谷影像
              查找我的iPhone详细教程:苹果手机丢了怎么办?
              查找我的iPhone详细教程:苹果手机丢了怎么办?
              山寨安卓手机刷机教程 不用担心自己不会刷机了
              山寨安卓手机刷机教程 不用担心自己不会刷机了
              星座划分日期和时间查询?星座划分方式是什么?
              星座划分日期和时间查询?星座划分方式是什么?
              为何总写自我意淫型文案?文案应该怎么写?
              为何总写自我意淫型文案?文案应该怎么写?
              织梦dede后台页面和功能 修改及精简操作方法
              织梦dede后台页面和功能 修改及精简操作方法
              安卓系统预装软件卸载 无需ROOT删除自带APP
              安卓系统预装软件卸载 无需ROOT删除自带APP
              火币网 关于我们·About | 联系我们·contact | 加入我们·Join | 赞助我们·Sponsor | Site Map | Tags | RSS Map
              火币网 移动版·MD版 网站热线:(+86)010-57255600
              Copyright © 2007-2019 硅谷网. 版权所有. All Rights Reserved. <京ICP备12003855号-2>

              百度|中国纪委国家监委网站|北京纪检监察网|火币网注册 | 火币网平台 | www.baidu.com-百度百科|

              健康遊戲忠告:抵制不良遊戲拒絕盜版遊戲注意自我保護謹防受騙上當適度遊戲益腦沉迷遊戲傷身合理安排時間享受健康生活

              備案號:皖B2-2334451本站www.bbhmx.com所有