html5怎样将导航栏置顶居中,编辑html,如何把导航栏固定在网页底部随屏幕移动?...

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

工具/原料

需要的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里面清除,这样不会影响布局;

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值