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

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

2019-04-15 15:19 作者:佚名 来源:硅谷网综合 HV: 编辑:GuiGu 【搜索试试

导航栏固定在底部,随浏览器一起移动;

工具/原料

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

正常导航,

方法/步骤1:

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

position:fixed;

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

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

方法/步骤2:

用fixed?#24149;埃?#20250;出现优先级别较低,导致被其他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,如何把导航栏固定在网页底部随屏幕移动?”发布评论】

版权及免责声明:
① 本网站部分投稿来源于“网友?#20445;?#28041;及投资、理财、消费等内容,请亲们反复甄别,切勿轻信。本网站部分由赞助商提供的内容属于【广告】性质,仅供阅读,不构成具体实施建议,请谨慎对待。据此操作,风险自担。
② 内容来源注明“硅谷网”及其相关称谓的文字、图片和音视?#25285;?#29256;权均属本网站所有,任何?#25945;濉?#32593;站或个人需经本网站许可方可复制或转载,并在使用时必须注明来源【硅谷网】或对应来源,违者本网站将依法追究责任。
③ 注明来源为各大报纸、杂志、网站及其他?#25945;?#30340;文章,文章原作者享有著作权,本网站转载其他?#25945;?#31295;件是为传播更多的信息,并不代表赞同其观点和对其真实性负责,本网站不承担此类稿件侵权行为的连带责任。
④ 本网站不对非自身发布内容的真实性、合法性、准确性作担保。若硅谷网因为自身和转载内容,涉及到侵权、违法等问题,请有关单位或个人速与本网站取得联?#25285;?#32852;系电话:01057255600),我们将第一时间核实处理。
相关
·html如何把导航栏固定在底部随浏览器移动?
广告
头条
图文
查找我的iPhone详细教程:苹果?#21482;?#20002;了怎?#31383;歟?></a><br />
      <a  href="http://www.sfuqq.club/school/20180405116330.html"  target="_blank">查找我的iPhone详细教程:苹果?#21482;?#20002;了怎么</a></td>
    <td width="150" align="center" class="tp"></td>
<td width="150" align="center" class="tp"><a class="" href="http://www.sfuqq.club/school/20170523100737.html"  target="_blank"><img src=
山寨安卓?#21482;?#21047;机教程 不用担心自己不会刷
dedecms织梦上传图片相对路径改成绝对路径方法
dedecms织梦上传图片相对路径改成绝对路径
织梦dedecms配置?#21482;鷚ap站点并绑定二级域名!
织梦dedecms配置?#21482;鷚ap站点并绑定二级域名
最新
·编辑html,如何把导航栏固定在网页底部随屏幕移动
·html如何把导航栏固定在底部随浏览器移动?
·查找我的iPhone详细教程:苹果?#21482;?#20002;了怎?#31383;歟?/a>
·
dede下载远程图片格式修改?JPEG图片本地化!
·dedecms批量命令:dede合并栏目、删除栏目方法
热点
·dedecms批量命令:dede合并栏目、删除栏目方
·dedecms织梦上传图片相对路径改成绝对路径方
·织梦dedecms配置?#21482;鷚ap站点并绑定二级域名!
·DEDE?#20302;?#22914;何调用图片?图片标签调用方法大全
·为何总写自我意淫型文案?文案应该怎么写?
旧闻
·简易教程:如何将iPad mini快速升级到iOS 7 b
·?#20146;?#21010;分日期和时间查询??#20146;?#21010;分方式是什么
·织梦dedecms浏览次数初始默?#29616;?#22914;何设置修改
·去掉1个字符,解决织梦移动版无法自动更新问
·微信营销时代 ?#20146;?#36825;五步就能优化微信营销
广告
硅谷影像
查找我的iPhone详细教程:苹果?#21482;?#20002;了怎?#31383;歟?></a><br><a class="" href="http://www.sfuqq.club/school/20180405116330.html" title="硅谷网" target="_blank">查找我的iPhone详细教程:苹果?#21482;?#20002;了怎?#31383;歟?/a></td>
<td align=山寨安卓?#21482;?#21047;机教程 不用担心自己不会刷机了
山寨安卓?#21482;?#21047;机教程 不用担心自己不会刷机了
?#20146;?#21010;分日期和时间查询??#20146;?#21010;分方式是什么?
?#20146;?#21010;分日期和时间查询??#20146;?#21010;分方式是什么?
为何总写自我意淫型文案?文案应该怎么写?
为何总写自我意淫型文案?文案应该怎么写?
织梦dede后台页面和功能 修改及精简操作方法
织梦dede后台页面和功能 修改及精简操作方法
安卓?#20302;?#39044;装软件?#23545;?无需ROOT删除自带APP
安卓?#20302;?#39044;装软件?#23545;?无需ROOT删除自带APP
关于我们·About | 联系我们·contact | 加入我们·Join | 赞助我们·Sponsor | Site Map | Tags | RSS Map
电脑版·PC版 移动版·MD版 网站热线:(+86)010-57255600
Copyright © 2007-2019 硅谷网. 版权所有. All Rights Reserved. <京ICP备12003855号-2>
英雄杀斗魂