HTML5怎么把导航固定在底部?是只滑动内容,导航固定不动的。

HTML5怎么把导航固定在底部?是只滑动内容,导航固定不动的。,第1张

HTML5怎么把导航固定在底部的步骤如下:

css的定位样式属性来实现;会用到css中的position:fixed属性,结合来实现

<style>.foot-menu{width:100%height:60pxbackground:#000position:fixedbottom:0/**距离底部为0*/left:0z-index:1}</style><div class="foot-menu">

<!---导航具体内容-->

</div>

拓展资料

css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍:

1、边框特性

CSS3对网页中的边框进行了一些改进,主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框,通过CSS3的属性可以快速实现圆角定义,同时还可以根据实际情况针对特定角进行圆角定义 。

2、多背景图

CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。

需要知道导航固定在底部是定位实现的;

结合所学的css的定位样式属性来实现;

会用到css中的position:fixed属性,结合来实现。

<style>.foot-menu{width:100%height:60pxbackground:#000position:fixedbottom:0/**距离底部为0*/left:0z-index:1} </style> <div class="foot-menu">

    <!---导航具体内容-->

</div>

content { width:960pxheight:2024pxborder:1px solid #000margin:0 auto}nav { width:100%height:30pxmargin:0 autobackground:#f00position:fixedbottom:0text-align:center}导航HTML5怎么把导航固定在底部?是只滑动内容,导航固


欢迎分享,转载请注明来源:内存溢出

原文地址: https://outofmemory.cn/zaji/7172687.html

(0)
打赏 微信扫一扫 微信扫一扫 支付宝扫一扫 支付宝扫一扫
上一篇 2023-04-02
下一篇 2023-04-02

发表评论

登录后才能评论

评论列表(0条)

保存