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

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

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

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

設(shè)置固定定位，定位到窗口頂部HTMLltdiv id=quotfixquot這是一個固定定位的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。