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

html-css019

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>

我刚开始也在找这个问题的答案，现在解决了，为后面学习的人栽棵树吧。

实现这个功能有很多种方法，这里我选一种个人认为比较简单的方法：

建立三个网页，一个作为主页面，另外两个子页面作为切换页面嵌入主页面，子页面也可以用文字替代。

用jQuery方法来切换页面，语言比较简单网上搜一下看看就懂了

下面附上代码

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>标题</title>

    <!--jQuery 百度CDN库-->

    <script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>

    <script>

        // jQuery代码

        $(document).ready(function () {

            $("#b1").click(function () {

                $("#tab_1").show()// 显示

                $("#tab_2").hide()// 隐藏

            })

            $("#b2").click(function () {

                $("#tab_1").hide()

                $("#tab_2").show()

            })

        })

    </script>

</head>

<body>

<div>

    <h1>标题一</h1>

</div>

<div>

    <div>

        <ul>

            <li><button id="b1">菜单1</button></li>

            <li><button id="b2">菜单2</button></li>

        </ul>

    </div>

    <div>

        <div id="tab_1">

            子页面1

        </div>

        <div id="tab_2" style="display: none">

            子页面2

        </div>

    </div>

</div>

</body>

</html>