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;}導(dǎo)航HTML5怎么把導(dǎo)航固定在底部？是只滑動(dòng)內(nèi)容，導(dǎo)航固
成都創(chuàng)新互聯(lián)致力于互聯(lián)網(wǎng)品牌建設(shè)與網(wǎng)絡(luò)營(yíng)銷，包括成都網(wǎng)站設(shè)計(jì)、成都做網(wǎng)站、SEO優(yōu)化、網(wǎng)絡(luò)推廣、整站優(yōu)化營(yíng)銷策劃推廣、電子商務(wù)、移動(dòng)互聯(lián)網(wǎng)營(yíng)銷等。成都創(chuàng)新互聯(lián)為不同類型的客戶提供良好的互聯(lián)網(wǎng)應(yīng)用定制及解決方案，成都創(chuàng)新互聯(lián)核心團(tuán)隊(duì)十多年專注互聯(lián)網(wǎng)開(kāi)發(fā)，積累了豐富的網(wǎng)站經(jīng)驗(yàn)，為廣大企業(yè)客戶提供一站式企業(yè)網(wǎng)站建設(shè)服務(wù)，在網(wǎng)站建設(shè)行業(yè)內(nèi)樹(shù)立了良好口碑。
需要知道導(dǎo)航固定在底部是定位實(shí)現(xiàn)的；
結(jié)合所學(xué)的css的定位樣式屬性來(lái)實(shí)現(xiàn)；
會(huì)用到css中的position：fixed;屬性，結(jié)合來(lái)實(shí)現(xiàn)。
style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距離底部為0*/left:0;z-index:1;}
/style
div?class="foot-menu"
!---導(dǎo)航具體內(nèi)容--
/div
語(yǔ)義化標(biāo)簽。
原來(lái)寫(xiě)一個(gè)頁(yè)面。
比如有頭部。和底部。我們都是定義一個(gè)div
只不過(guò)頭部有一個(gè)class=header 尾部的div是class=footer
現(xiàn)在html5出現(xiàn)以后。主張語(yǔ)義化標(biāo)簽。
現(xiàn)在我們寫(xiě)樣式的時(shí)候。選擇器直接就寫(xiě)header就可以了。
不需要這么寫(xiě) div.header
這樣的好處是使得文檔結(jié)構(gòu)層次清晰。利于代碼編寫(xiě)和開(kāi)發(fā)。
還有搜索引擎優(yōu)化等等的好處。
position:fixed 可以固定。
position:absolute也行。相對(duì)于fixed -》absolute不能隨著頁(yè)面的拉伸而定義在頭部或你想定義的地方（即瀏覽器最大最小化固定的位置會(huì)不一樣）
而fixed如果是定義緊貼頭部的化，瀏覽器最大最小化都是在頭部不會(huì)變形。
方法一：
思路：利用text-align屬性將圖片保持在底部，然后設(shè)置padding-top的值使其保持在底部。
結(jié)構(gòu)如下：
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;}
運(yùn)行結(jié)果如下：
釋義：
圖片的尺寸為150x100px，DIV的大小為300x200px；
background-color:#CCC; border:#000 1px solid;為DIV加個(gè)邊框和背景色，便于觀察效果。
text-align:center,實(shí)現(xiàn)圖片的保持在底部；padding-top:50px，50px這個(gè)數(shù)值是經(jīng)過(guò)計(jì)算得到的，padding-top的值具體算法如下：（DIV的高度 – 圖片的高度）/2，但這里要注意，根據(jù)盒模型原理，我們還要將DIV原來(lái)的高度200減去padding-top的值，這樣顯示的才是正確的，否則DIV會(huì)變高。
方法二：
思路：只用padding屬性，通過(guò)計(jì)算求得保持在底部
結(jié)構(gòu)代碼同上；
CSS樣式如下：
div {width:225px; height:150px; background-color:#eee; border:#000 1px solid; padding-top:50px; padding-left:75px;}
備注：這里DIV的寬高計(jì)算都遵循盒模型原理，計(jì)算方法同上。
方法三：
思路：
利用圖片的margin屬性將圖片保持在底部，利用DIV的padding屬性將圖片保持在底部。
結(jié)構(gòu)代碼同上；
CSS代碼如下：
div {width:300px; height:150px; background-color:#eee; padding-top:50px; border:#000 1px solid;}
img {display:block; margin:0 auto;}
備注：
Img是內(nèi)聯(lián)元素，要設(shè)置其margin屬性使其保持在底部，就要將其轉(zhuǎn)換為塊元素display:block;然后利用margin:0 auto;實(shí)現(xiàn)圖片的水平保持在底部；（有的設(shè)計(jì)師為圖片再加個(gè)div標(biāo)簽，然后通過(guò)div標(biāo)簽的margin實(shí)現(xiàn)保持在底部
萬(wàn)維網(wǎng)的核心語(yǔ)言、標(biāo)準(zhǔn)通用標(biāo)記語(yǔ)言下的一個(gè)應(yīng)用超文本標(biāo)記語(yǔ)言(HTML)的第五次重大修改(這是一項(xiàng)推薦標(biāo)準(zhǔn)、外語(yǔ)原文:W3C Recommendation、見(jiàn)本處參考資料原文內(nèi)容:)。
2014年10月29日，萬(wàn)維網(wǎng)聯(lián)盟宣布，經(jīng)過(guò)接近8年的艱苦努力，該標(biāo)準(zhǔn)規(guī)范終于制定完成。
HTML5草案的前身名為 Web Applications 1.0，于2004年被WHATWG提出，于2007年被W3C接納，并成立了新的 HTML 工作團(tuán)隊(duì)。
HTML 5 的第一份正式草案已于2008年1月22日公布。HTML5 仍處于完善之中。然而，大部分現(xiàn)代瀏覽器已經(jīng)具備了某些 HTML5 支持。
2012年12月17日，萬(wàn)維網(wǎng)聯(lián)盟（W3C）正式宣布凝結(jié)了大量網(wǎng)絡(luò)工作者心血的HTML5規(guī)范已經(jīng)正式定稿。根據(jù)W3C的發(fā)言稿稱：“HTML5是開(kāi)放的Web網(wǎng)絡(luò)平臺(tái)的奠基石?！?/p>
!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我是一個(gè)標(biāo)題/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怎么把導(dǎo)航固定在底部的步驟如下：
css的定位樣式屬性來(lái)實(shí)現(xiàn)；會(huì)用到css中的position：fixed;屬性，結(jié)合來(lái)實(shí)現(xiàn)。
style.foot-menu{width:100%;height:60px;background:#000;position:fixed;bottom:0;/**距離底部為0*/left:0;z-index:1;}/stylediv?class="foot-menu"
!---導(dǎo)航具體內(nèi)容--
/div
拓展資料
css3網(wǎng)頁(yè)底部固定導(dǎo)航是一款純css3實(shí)現(xiàn)的網(wǎng)頁(yè)底部固定導(dǎo)航菜單。特性介紹：
1、邊框特性
CSS3對(duì)網(wǎng)頁(yè)中的邊框進(jìn)行了一些改進(jìn)，主要包括支持圓角邊框、多層邊框、邊框色彩與圖片等。在CSS3中最常用的一個(gè)改進(jìn)就是圓角邊框，通過(guò)CSS3的屬性可以快速實(shí)現(xiàn)圓角定義，同時(shí)還可以根據(jù)實(shí)際情況針對(duì)特定角進(jìn)行圓角定義 。
2、多背景圖
CSS3允許使用多個(gè)屬性(比如background-image、background-repeat、background-size、background-position、background-origin和background-clip等)在一個(gè)元素上添加多層背景圖片。
重慶分公司
重慶分公司
