火币网

              火币网
                |  首页  |  资讯  |  评测  |  活动  |  学院  |  访谈  |  专题  |  杂志  |  产服  |  
              您现在的位置:火币网> 学院> 经验>

              编辑html,如何把导航栏固定在网页底部随屏幕移动?

              2019-04-15 15:19 作者:佚名 来源:硅谷网综合 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),我们将第一时间核实处理。
              广告
              相关
              ·html如何把导航栏固定在底部随浏览器移动?
              头条
              新闻来源很重要?将近一半读者根本不关心它! 新闻来源很重要?将近一半读者根本不关心它!
              在网络主页上发新闻的好日子早就过去了。今天的受众更愿意把超过一半的流量花在社交媒……
              ·新闻来源很重要?将近一半读者根本不关心它!
              图文
              如何把苹果iPhone手机的照片传到苹果Mac电脑?
              如何把苹果iPhone手机的照片传到苹果Mac电
              mcafee是什么软件好用吗?McAfee中文译名是什么?
              mcafee是什么软件好用吗?McAfee中文译名是
              自媒体账号如何申请?各个平台运营方法汇总!
              自媒体账号如何申请?各个平台运营方法汇总
              如何把苹果iPhone手机的照片传到苹果Mac电脑?
              如何把苹果iPhone手机的照片传到苹果Mac电
              最新
              ·巴西5G不排除华为是什么情况?为何巴西5G不排除华
              ·如何把苹果iPhone手机的照片传到苹果Mac电脑?
              ·硅谷有多大面积?美国硅谷有多大?面积多少?
              ·iframe怎么用?iframe标签属性iframe写法详解!
              ·mcafee是什么软件好用吗?McAfee中文译名是什么?
              热点
              ·做客、作客、座客和坐客的意思和区别是什么?
              ·硅谷为什么叫硅谷?硅谷到底是什么意思呢?
              ·知道UV、VV,CV是什么?PV、UV、IP什么意思?
              ·自媒体账号如何申请?各个平台运营方法汇总!
              ·目前微信有什么bug?微信bug是什么意思???
              旧闻
              ·从事游戏策划,工作中中最难的一点是什么?
              ·CAXA二维CAD教程:把图纸名默认为文件名
              ·简易教程:如何将iPad mini快速升级到iOS 7 b
              ·百度新闻源:百度新闻源审核、被清理、解封办
              ·苹果电脑MAC系统登录远程桌面 如何能够实现?
              广告
              硅谷影像
              如何把苹果iPhone手机的照片传到苹果Mac电脑?
              如何把苹果iPhone手机的照片传到苹果Mac电脑?
              mcafee是什么软件好用吗?McAfee中文译名是什么?
              mcafee是什么软件好用吗?McAfee中文译名是什么?
              什么是域名纠错系统?怎么关闭域名纠错系统?
              什么是域名纠错系统?怎么关闭域名纠错系统?
              董事长属于高管吗?公司董事属于公司高管吗?
              董事长属于高管吗?公司董事属于公司高管吗?
              server服务:server服务自动停止关闭如何解决?
              server服务:server服务自动停止关闭如何解决?
              怎么关闭域名纠错系统?什么是域名纠错系统?
              怎么关闭域名纠错系统?什么是域名纠错系统?
              火币网 关于我们·About | 联系我们·contact | 加入我们·Join | 关注我们·Invest | Site Map | Tags | RSS Map
              火币网 移动版·MD版 网站热线:(+86)010-57255600
              Copyright © 2007-2020 硅谷网. 版权所有. All Rights Reserved. <京ICP备12003855号-2>

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

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

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