HTML5 <nav>標簽(qiān) HTML nav CSS布(bù)局教程(chéng)
Html 5新(xīn)增標(biāo)簽(qiān)nav教程篇(piān)與(yǔ)nav+css布局教程篇，HTML5 nav元素(sù)標(biāo)簽 HTML5新增nav標簽。
DIVCSS5對html 5 footer標(biāo)簽透徹介(jiè)紹到html footer css布局案(àn)例演示(shì)讓想學(xué)習(xí)html5的(dí)朋(péng)友真(zhēn)正認識html footer應(yīng)用與布局(jú)技(jì)巧。
首先nav也是(shì)在html5中(zhōng)新增的(dí)元素(sù)標(biāo)簽(qiān)。同(tóng)時(shí)和其它(tā)新(xīn)增(zēng)標簽(qiān)一(yī)樣(yàng)，nav在(zài)傳統html5以前版本(běn)Html布局(jú)中(zhōng)作為導(dǎo)航條(tiáo)相關常用命(mìng)名(míng)來(lái)使用。
比如：
<div class=”nav”>網站(zhàn)導航內容</div>
或
<div id=”nav”>網站(zhàn)導航內容</div>
在(zài)html5中特(tè)地(dì)將以前常用(yòng)命名(míng)nav作(zuò)為(wéi)一個(gè)新標簽元素(sù)。此標簽(qiān)常用(yòng)於導航處布局(jú)。
一(yī)，html nav標(biāo)簽(qiān)語法與(yǔ)結(jié)構(gòu) - TOP
1，基(jī)本語(yǔ)法
<nav>內(nèi)容</nav>
2，nav加(jiā)id
<nav id=”abc”>內容(róng)</nav>
3，nav加(jiā)class
<nav class=”abc”>內容</nav>
4，nav標(biāo)簽快(kuài)速理(lǐ)解掌握
Nav是與導(dǎo)航相關(guān)的，所以一般用於網(wǎng)站(zhàn)導(dǎo)航(háng)布局。同時完全就(jiù)像使用div標(biāo)簽(qiān)，span標(biāo)簽一(yī)樣(yàng)來使(shǐ)用(yòng)<nav>標(biāo)簽可添加(jiā)id或(huò)class，而與div標(biāo)簽又(yòu)有不(bù)同處是，此(cǐ)標簽(qiān)一(yī)般隻用於導航(háng)相關地(dì)方(fāng)使用(yòng)，所(suǒ)以在一個html網頁(yè)布局中(zhōng)可(kě)能就使(shǐ)用在(zài)導航條處(chǔ)，或與(yǔ)導航條(tiáo)相關(guān)的地方(fāng)布局使(shǐ)用。
5，nav配合什(shí)麼標(biāo)簽(qiān)使(shǐ)用
DIVCSS5在(zài)以前文章教(jiào)程中(zhōng)介(jiè)紹過(guò)一般(bān)導(dǎo)航(háng)條使(shǐ)用ul li標簽(qiān)布局，使用(yòng)一般(bān)布局(jú)中nav標簽(qiān)與ul li標(biāo)簽(qiān)配合(hé)使用。
小案(àn)例如下：
1），傳統html布(bù)局
<div id=”nav”>
<ul>
<li>首頁(yè)</li>
<li>欄目名稱(chēng)</li>
<li>聯係我們(mén)</li>
</ul>
</div>
2），nav標簽後(hòu)
<nav>
<ul>
<li>首頁(yè)</li>
<li>欄(lán)目(mù)名稱</li>
<li>聯係我們(mén)</li>
</ul>
</nav>
由(yóu)以上HTML布(bù)局(jú)到HTML5轉換(huàn)其實很容易理解(jiě)html nav標簽(qiān)使用，以及(jí)配合ul li布局(jú)導航條(tiáo)技(jì)巧(qiǎo)。
二，兼容(róng)性提示(shì) - TOP
因(yīn)為<nav></nav>標(biāo)簽(qiān)是html 5新(xīn)增(zēng)的標(biāo)簽，而在IE8及以(yǐ)下(xià)IE瀏覽(lǎn)器(qì)（IE8，IE7，IE6）不支(zhī)持，所以根據(jù)需求(qiú)選(xuǎn)擇布(bù)局HTML。
三，html nav css布局案例 - TOP
通過傳統(tǒng)div布(bù)局與(yǔ)nav布局(jú)進(jìn)行對比學習，從(cóng)而從(cóng)html css布局中(zhōng)掌(zhǎng)握nav語(yǔ)法(fǎ)與(yǔ)用法(fǎ)。
以(yǐ)下DIVCSS5通(tōng)過三(sān)個(gè)布(bù)局實(shí)踐(jiàn)讓大(dà)家掌握(wò)nav布局(jú)，分別：
1），傳(chuán)統(tǒng)div+ul+li布(bù)局導航(háng)樣(yàng)式；
2），nav+ul+li布局導航(háng)樣式；
3）再在nav+ul+li布局(jú)的(dí)基礎上對nav設置(zhì)class css樣(yàng)式
通過以(yǐ)上(shàng)案例(lì)讓(ràng)大家(jiā)明白nav一般(bān)配合ul li或直(zhí)接(jiē)用(yòng)於(yú)布局(jú)導航相關的(dí)布局，同(tóng)時nav就(jiù)像div那樣(yàng)使用(yòng)可以(yǐ)直(zhí)接設置css也可以加(jiā)class或(huò)id 。
具體(tǐ)案例如(rú)下：
1，傳統div css布局(jú)與NAV css布局(jú)完(wán)整(zhěng)HTML源代(dài)碼(mǎ)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>nav布(bù)局 在(zài)綫(xiàn)演示(shì) DIVCSS5</title>
<style>
ul,li{ padding:0; margin:0;list-style:none}
.nav{border:1px solid #000; width:510px; overflow:hidden}
.nav li{ line-height:22px; float:left; padding:0 5px;}
.nav li a:hover{ color:#F00}
/* 對(duì)class=nav設(shè)置黑(hēi)色(sè)邊框，鼠標(biāo)滑過超鏈(liàn)接(jiē)文字為紅色 */
nav{ border:1px solid #F00; width:520px; overflow:hidden}
nav li{line-height:22px; float:left; padding:0 6px;}
nav li a{ color:#F00}
/* 對nav設置(zhì)紅色邊框，超(chāo)鏈(liàn)接位置為紅(hóng)色(sè) */
nav.bg{ background:#CCC}
nav.bg li a{ color:#090}
/* 對nav設(shè)置class=bg，設(shè)置(zhì)背(bèi)景為(wéi)灰色(sè)，超鏈接(jiē)位置(zhì)為(wéi)綠色 */
</style>
</head>
<body>
<p>傳統 div ul li布(bù)局導(dǎo)航(háng)條效(xiào)果(guǒ)</p>
<div class="nav">
<ul>
<li><a href="http://www.100181.com/">網(wǎng)站(zhàn)首(shǒu)頁</a></li>
<li><a href="http://www.100181.com/class-8.html">網站建設(shè)</a></li>
<li><a href="http://www.100181.com/class-11.html">SEO優化(huà)</a></li>
<li><a href="http://www.100181.com/class-12.html">SEO術(shù)語</a></li>
<li><a href="http://www.100181.com/class-13.html">SEO教程</a></li>
<li><a href="http://www.100181.com/class-17.html">SEO問答</a></li>
</ul>
</div>
<p>html5 nav ul li布(bù)局導航條沒(méi)有對nav加id和class 同(tóng)時設置(zhì)nav li a超(chāo)鏈(liàn)接文字字(zì)體顏色(sè)為紅色(sè)字和紅色(sè)框(kuàng)效果</p>
<nav>
<ul>
<li><a href="http://www.100181.com/">網站首頁</a></li>
<li><a href="http://www.100181.com/class-8.html">網站建(jiàn)設(shè)</a></li>
<li><a href="http://www.100181.com/class-11.html">SEO優化</a></li>
<li><a href="http://www.100181.com/class-12.html">SEO術(shù)語(yǔ)</a></li>
<li><a href="http://www.100181.com/class-13.html">SEO教(jiào)程(chéng)</a></li>
<li><a href="http://www.100181.com/class-17.html">SEO問答(dá)</a></li>
</ul>
</nav>
<p>html5 nav ul li布局另(lìng)外加class=bg設置(zhì)背景為灰黑色,超(chāo)鏈接文字字體(tǐ)顏(yán)色(sè)為(wéi)綠(lǜ)色(sè)</p>
<nav class="bg">
<ul>
<li><a href="http://www.100181.com/">網站(zhàn)首(shǒu)頁(yè)</a></li>
<li><a href="http://www.100181.com/class-8.html">網站(zhàn)建設</a></li>
<li><a href="http://www.100181.com/class-11.html">SEO優化</a></li>
<li><a href="http://www.100181.com/class-12.html">SEO術語(yǔ)</a></li>
<li><a href="http://www.100181.com/class-13.html">SEO教(jiào)程</a></li>
<li><a href="http://www.100181.com/class-17.html">SEO問(wèn)答(dá)</a></li>
</ul>
</nav>
</body>
</html>
以(yǐ)上(shàng)使用(yòng)傳統div+ul+li+css布局導(dǎo)航類布局，然後使用nav+ul+li+css布(bù)局，同(tóng)時再(zài)在(zài)nav的基礎(chǔ)上對(duì)nav設(shè)置class改(gǎi)變其布局對(duì)比(bǐ)效(xiào)果(guǒ)。
特(tè)別(bié)說明(míng)：可能對於不會div css布(bù)局(jú)來說(shuō)，可能(néng)看(kàn)到以上(shàng)代(dài)碼比(bǐ)較困(kùn)難，根(gēn)本的(dí)解(jiě)決方法就是學習div+css，自然(rán)看(kàn)以上代碼(mǎ)就(jiù)會一(yī)眼(yǎn)就會明(míng)白案例(lì)表達(dá)知識點(diǎn)，自然(rán)看看以(yǐ)上案例(lì)就(jiù)掌握了(liǎo)。
2，DIVCSS5實(shí)例布局截(jié)圖(tú)
傳(chuán)統(tǒng)div css布(bù)局(jú)導航(háng)條(tiáo)與nav布(bù)局導航條，對nav加(jiā)class三(sān)個布(bù)局瀏覽(lǎn)器(qì)效果截圖(tú)
傳(chuán)統(tǒng)div布局導航條與(yǔ)nav布(bù)局導航條(tiáo)，對nav加(jiā)class三個布(bù)局(jú)瀏覽(lǎn)器效果截(jié)圖(tú)
3，在(zài)綫演示(shì)
查(chá)看(kàn)案(àn)例(lì) 注(zhù)意要看到(dào)nav布局（生效(xiào)）效果(guǒ)需要在支持HTML5瀏覽器(qì)瀏覽(lǎn)觀(guān)察，推薦(jiàn)使(shǐ)用穀(gǔ)歌(gē)瀏覽器(qì)進行瀏(liú)覽觀察(chá)nav布(bù)局效(xiào)果。
四，divcss總(zǒng)結(jié) - TOP
Nav是(shì)新增的(dí)html標簽(qiān)，隻(zhī)要(yào)html中使用(yòng)nav標簽(qiān)，這樣的html布(bù)局就變成(chéng)使(shǐ)用html5布(bù)局(jú)的(dí)網頁(yè)，但html5新(xīn)增(zēng)標簽(qiān)局(jú)限性(xìng)，低版本(běn)IE瀏(liú)覽器不支(zhī)持（如果(guǒ)低版(bǎn)本瀏覽(lǎn)器(qì)瀏覽新增(zēng)html5標簽(qiān)，對應布(bù)局(jú)將失效(xiào)，設置CSS樣式也是無效的），所以謹慎(shèn)選(xuǎn)擇(zé)使(shǐ)用。一(yī)般傳(chuán)統(tǒng)網頁通常不(bù)會使(shǐ)用html5新增布局(jú)，所以(yǐ)注意(yì)選擇使(shǐ)用。智(zhì)能手機(jī)瀏(liú)覽網頁，平(píng)板電腦瀏(liú)覽(lǎn)的(dí)網頁可以適(shì)當使用(yòng)html5新(xīn)增(zēng)標簽或(huò)新增(zēng)CSS3樣式(shì)布(bù)局。
轉(zhuǎn)載請保留原文(wén)地址: https://antelcom.cn/show-464.html