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>
