實(shí)現(xiàn)這個(gè)功能有很多種方法，這里我選一種個(gè)人認(rèn)為比較簡(jiǎn)單的方法建立三個(gè)網(wǎng)頁(yè)，一個(gè)作為主頁(yè)面，另外兩個(gè)子頁(yè)面作為切換頁(yè)面嵌入主頁(yè)面，子頁(yè)面也可以用文字替代用jQuery方法來(lái)切換頁(yè)面，語(yǔ)言比較簡(jiǎn)單網(wǎng)上搜一下看看就懂了 下面附上代碼 lt！DOCTYPE htmllthtmllthead ltmeta charset=quotUTF8quot；一直以來(lái)，我們習(xí)慣于使用形如ltdiv id=quotnavquot或ltul id=quotnavquot這樣的代碼來(lái)寫頁(yè)面的導(dǎo)航在HTML5中，我們可以直接將導(dǎo)航鏈接列表放到ltnav標(biāo)簽中l(wèi)tnav ltul ltlilta href=quotindexhtmlquotHomeltaltli ltlilta href=quotaboutquotAboutltaltli ltlilta href=quotblogquotBloglt；只需要做好樣式，隱藏顯示就好了；Nav元素可以用作頁(yè)面導(dǎo)航的鏈接組，在導(dǎo)航鏈接組里面有很多的鏈接，點(diǎn)擊每個(gè)鏈接可以鏈接到其他頁(yè)面或者當(dāng)前頁(yè)面的其他部分，并不是所有的鏈接組都要被放在nav元素里面，我們只需要把最主要的基本的重要的放在nav元素里面即可；HTML5讓導(dǎo)航欄固定頂部不動(dòng)且不遮擋住下面的DIV方法如下1，首先在html中，添加良好的導(dǎo)航內(nèi)容2，后者是網(wǎng)頁(yè)的具體內(nèi)容，這里的代碼比較簡(jiǎn)單3，在樣式中，首先在菜單中定義一些樣式4，此時(shí)，在運(yùn)行頁(yè)面時(shí)，滾動(dòng)條滾動(dòng)后導(dǎo)航將消失5，為了將導(dǎo)航欄固定在頂部，可以添加樣式位置固定最高0。

可以通過(guò)更改#document片段的CSS來(lái)實(shí)現(xiàn)這一點(diǎn)，這些是DOM1規(guī)范，所有瀏覽器都支持以下解決方案是特定于webkit的 videowebkitmediacontrolsfullscreenbutton display videowebkitmediacontrolsplaybutton videowebkitmediacontrolstimeline videowebkitmedia；建議使用FF，Safari，舉個(gè)例子lt！doctype html lthtml lthead lttitleHTML5+CSS3+JavaScriptlttitle ltmeta；二語(yǔ)義元素類型 HTML5引入了一系列語(yǔ)義元素，包括header頭部信息footer底部信息nav導(dǎo)航欄article文章內(nèi)容塊section區(qū)域分隔符aside邊緣內(nèi)容details詳細(xì)內(nèi)容信息塊figure帶圖形信息的圖文單元等這些元素能夠幫助開(kāi)發(fā)者更清晰準(zhǔn)確地描述頁(yè)面結(jié)構(gòu)和內(nèi)容含義。

事實(shí)上，底部導(dǎo)航的廣泛應(yīng)用不是在pc端，而是在移動(dòng)端 在pc中，底部導(dǎo)航通常采用固定的方式這種導(dǎo)航可以降低用戶的成本，但是對(duì)于結(jié)構(gòu)復(fù)雜的網(wǎng)站，二級(jí)或者三級(jí)導(dǎo)航的網(wǎng)站就不太適合了其次，把導(dǎo)航放在底部，對(duì)于用戶的使用習(xí)慣來(lái)說(shuō)不是特別好用戶的眼睛從上到下從做到右瀏覽這種設(shè)計(jì)挑戰(zhàn)了用戶的使用習(xí)慣 所以；在HTML5頁(yè)面中，經(jīng)常使用ltnav標(biāo)簽來(lái)充當(dāng)導(dǎo)航的結(jié)構(gòu)化標(biāo)簽ltnav標(biāo)簽用于定義頁(yè)面的導(dǎo)航部分，通常包含導(dǎo)航鏈接或?qū)Ш讲藛嗡峁┝艘环N語(yǔ)義化的方式來(lái)標(biāo)記頁(yè)面的導(dǎo)航內(nèi)容，使得搜索引擎和輔助技術(shù)能夠更好地理解和處理導(dǎo)航部分的內(nèi)容示例代碼htmlCopy codeltnav ltul ltlilta href=quot#quot首頁(yè)lt；HTML5怎么把導(dǎo)航固定在底部的步驟如下css的定位樣式屬性來(lái)實(shí)現(xiàn)會(huì)用到css中的positionfixed屬性，結(jié)合來(lái)實(shí)現(xiàn)ltstylefootmenuwidth100%height60pxbackground#000positionfixedbottom0**距離底部為0*left0zindex1ltstyleltdiv class=quotfootmenuquotlt！導(dǎo)航具體。

3 橫向滑動(dòng)的列表導(dǎo)航lt 將垂直布局變?yōu)闄M向，分類展示，既方便查看又展示更多信息，但也考驗(yàn)了內(nèi)容的組織和用戶操作習(xí)慣列表導(dǎo)航的進(jìn)化lt 加入了功能按鈕或滑動(dòng)選項(xiàng)，空間利用更佳，但過(guò)多重復(fù)的功能可能會(huì)讓用戶感到困惑5 底部TabBarlt 固定在底部的標(biāo)志性導(dǎo)航，直觀易找，利于快速切換，但內(nèi)容；如何設(shè)置html導(dǎo)航欄1用Dreamweaver創(chuàng)建一個(gè)新的HTML文件2先按ctrls保存，以防突然斷電，數(shù)據(jù)丟失3將title修改為htmlcss，實(shí)現(xiàn)橫向?qū)Ш?創(chuàng)建一個(gè)新的divid“A”并添加ulli標(biāo)簽5在li中添加所需的文本，并調(diào)整文本間距按F12預(yù)覽，如下圖所示6首先去掉字體前面的小黑點(diǎn)代碼如下7。

設(shè)置固定定位，定位到窗口頂部HTMLltdiv id=quotfixquot這是一個(gè)固定定位的divltdiv CSSfixposition fixed background blackcolor #fff。

html5 導(dǎo)航路線效果調(diào)用核心代碼ltscript type=quottextjavascriptquot 默認(rèn)地理位置設(shè)置為上海市浦東新區(qū)var x=12149，y=3171 windowonload = function ifnavigatorgeolocation showPosition documentgetElementByIdquotst。