13518219792
content { width:960px; height:2024px; border:1px solid #000; margin:0 auto;}nav { width:100%; height:30px; margin:0 auto; background:#f00; position:fixed; bottom:0; text-align:center;}导航HTML5怎么把导航固定在底部？是只滑动内容，导航固
成都创新互联致力于互联网品牌建设与网络营销，包括成都网站设计、成都做网站、SEO优化、网络推广、整站优化营销策划推广、电子商务、移动互联网营销等。成都创新互联为不同类型的客户提供良好的互联网应用定制及解决方案，成都创新互联核心团队十多年专注互联网开发，积累了丰富的网站经验，为广大企业客户提供一站式企业网站建设服务，在网站建设行业内树立了良好口碑。
需要知道导航固定在底部是定位实现的；
结合所学的css的定位样式属性来实现；
会用到css中的position：fixed;属性，结合来实现。
style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距离底部为0*/left:0;z-index:1;}
/style
div class="foot-menu"
!---导航具体内容--
/div
语义化标签。
原来写一个页面。
比如有头部。和底部。我们都是定义一个div
只不过头部有一个class=header 尾部的div是class=footer
现在html5出现以后。主张语义化标签。
现在我们写样式的时候。选择器直接就写header就可以了。
不需要这么写 div.header
这样的好处是使得文档结构层次清晰。利于代码编写和开发。
还有搜索引擎优化等等的好处。
position:fixed 可以固定。
position:absolute也行。相对于fixed -》absolute不能随着页面的拉伸而定义在头部或你想定义的地方（即浏览器最大最小化固定的位置会不一样）
而fixed如果是定义紧贴头部的化，浏览器最大最小化都是在头部不会变形。
方法一：
思路：利用text-align属性将图片保持在底部，然后设置padding-top的值使其保持在底部。
结构如下：
div
img src="images/tt.gif" width="150" height="100" /
/div
CSS样式如下：
div {width:300px; height:150px; background-color:#CCC; border:#000 1px solid; text-align:center; padding-top:50px;}
运行结果如下：
释义：
图片的尺寸为150x100px，DIV的大小为300x200px；
background-color:#CCC; border:#000 1px solid;为DIV加个边框和背景色，便于观察效果。
text-align:center,实现图片的保持在底部；padding-top:50px，50px这个数值是经过计算得到的，padding-top的值具体算法如下：（DIV的高度 – 图片的高度）/2，但这里要注意，根据盒模型原理，我们还要将DIV原来的高度200减去padding-top的值，这样显示的才是正确的，否则DIV会变高。
方法二：
思路：只用padding属性，通过计算求得保持在底部
结构代码同上；
CSS样式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
备注：这里DIV的宽高计算都遵循盒模型原理，计算方法同上。
方法三：
思路：
利用图片的margin属性将图片保持在底部，利用DIV的padding属性将图片保持在底部。
结构代码同上；
CSS代码如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
备注：
Img是内联元素，要设置其margin属性使其保持在底部，就要将其转换为块元素display:block;然后利用margin:0 auto;实现图片的水平保持在底部；（有的设计师为图片再加个div标签，然后通过div标签的margin实现保持在底部
万维网的核心语言、标准通用标记语言下的一个应用超文本标记语言(HTML)的第五次重大修改(这是一项推荐标准、外语原文:W3C Recommendation、见本处参考资料原文内容:)。
2014年10月29日，万维网联盟宣布，经过接近8年的艰苦努力，该标准规范终于制定完成。
HTML5草案的前身名为 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接纳，并成立了新的 HTML 工作团队。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍处于完善之中。然而，大部分现代浏览器已经具备了某些 HTML5 支持。
2012年12月17日，万维网联盟（W3C）正式宣布凝结了大量网络工作者心血的HTML5规范已经正式定稿。根据W3C的发言稿称：“HTML5是开放的Web网络平台的奠基石。”
!doctype html
html lang="en"
head
meta charset="UTF-8"
meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
meta http-equiv="X-UA-Compatible" content="ie=edge"
titleTEST/title
style
h1{
margin: 0;
}
body{
margin: 0;
height: 100%;
background-color: #f3f3f3;
}
.header {
padding: 15px 0;
background-color: #fff;
border-bottom: 1px solid #ccc;
text-align: center;
width: 100%;
}
.fiexd .header{
position: fixed;
top: 0;
}
.fiexd ul{
margin-top: 84px;
}
/style
/head
body
ul
li
h2列表 1/h2
/li
li
h2列表 2/h2
/li
li
h2列表 3/h2
/li
li
h2列表 4/h2
/li
li
h2列表 5/h2
/li
li
h2列表 6/h2
/li
li
h2列表 7/h2
/li
li
h2列表 8/h2
/li
/ul
div class="header"h1我是一个标题/h1/div
ul
li
h2列表 1/h2
/li
li
h2列表 2/h2
/li
li
h2列表 3/h2
/li
li
h2列表 4/h2
/li
li
h2列表 5/h2
/li
li
h2列表 6/h2
/li
li
h2列表 7/h2
/li
li
h2列表 8/h2
/li
li
h2列表 9/h2
/li
li
h2列表 10/h2
/li
li
h2列表 11/h2
/li
li
h2列表 12/h2
/li
li
h2列表 13/h2
/li
li
h2列表 14/h2
/li
li
h2列表 15/h2
/li
/ul
script
var header = document.getElementsByClassName('header')[0];
var body = document.body;
window.onscroll = function () {
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
console.log(scrollTop);
if(scrollTop 100) {
body.className = 'fiexd';
} else {
body.className = '';
}
}
/script
/body
/html
HTML5怎么把导航固定在底部的步骤如下：
css的定位样式属性来实现；会用到css中的position：fixed;属性，结合来实现。
style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距离底部为0*/left:0;z-index:1;}/stylediv class="foot-menu"
!---导航具体内容--
/div
拓展资料
css3网页底部固定导航是一款纯css3实现的网页底部固定导航菜单。特性介绍：
1、边框特性
CSS3对网页中的边框进行了一些改进，主要包括支持圆角边框、多层边框、边框色彩与图片等。在CSS3中最常用的一个改进就是圆角边框，通过CSS3的属性可以快速实现圆角定义，同时还可以根据实际情况针对特定角进行圆角定义 。
2、多背景图
CSS3允许使用多个属性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一个元素上添加多层背景图片。
