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

html-css09

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等)在一个元素上添加多层背景图片。

css3可以做到兼容ie9和市面上的多数非IE内核浏览器,它的

 background-size可以设置2个值,1个为必填,1个为可选。

其中第1个值用于指定背景图的width,第2个值用于指定背景图的height,如果只给background-size设置1个值,则第2个值默认为auto(cover和contain特定值除外)。

div{

background-image:url(test.png)

background-repeat:no-repeat

background-size:100px

}

cover表示覆盖整个容器。你要背景全部那么需要注意的是html,body {height:100%}

当然以上内容不兼容低版本IE浏览器和不兼容css3规则的浏览器。

你说的背景整张显示,我之前项目遇到过这样的需求。我是直接用脚本写的。

实现思路是用图片绝对定位在网站最底层,z-index属性设置成负值。用脚本判断窗口大小,在每次窗口大小发生改变时监听事件捕获长宽,赋值给这张“地图”。