現在位置:主頁 > SEO技術分享 > HTML5nav標簽HTMLNavCSS布局教程

HTML5nav標簽HTMLNavCSS布局教程

阿里瑞SEO2020年06月10日SEO技術分享

簡介HTML5 nav標簽 HTML Nav CSS布局教程 Html 5新增標簽nav教程篇與nav+css布局教程篇,HTML5 nav元素標簽 HTML...

HTML5 <nav>標簽 HTML Nav CSS布局教程

  Html 5新增標簽nav教程篇與nav+css布局教程篇,HTML5 nav元素標簽 HTML5新增nav標簽。

  DIVCSS5對html 5 footer標簽透徹介紹到html footer css布局案例演示讓想學習html5的朋友真正認識html footer應用與布局技巧。

  首先nav也是在html5中新增的元素標簽。同時和其它新增標簽一樣,nav在傳統html5以前版本Html布局中作為導航條相關常用命名來使用。

  比如:

  <div class=”nav”>網站導航內容</div>

  或

  <div id=”nav”>網站導航內容</div>

  在html5中特地將以前常用命名nav作為一個新標簽元素。此標簽常用于導航處布局。

  一、html nav標簽語法與結構 - TOP

  1、基本語法

  <nav>內容</nav>

  2、nav加id

  <nav id=”abc”>內容</nav>

  3、nav加class

  <nav class=”abc”>內容</nav>

  4、nav標簽快速理解掌握

  Nav是與導航相關的,所以一般用于網站導航布局。同時完全就像使用div標簽、span標簽一樣來使用<nav>標簽可添加id或class,而與div標簽又有不同處是,此標簽一般只用于導航相關地方使用,所以在一個html網頁布局中可能就使用在導航條處,或與導航條相關的地方布局使用。

  5、nav配合什么標簽使用

  DIVCSS5在以前文章教程中介紹過一般導航條使用ul li標簽布局,使用一般布局中nav標簽與ul li標簽配合使用。

  小案例如下:

  1)、傳統html布局

  <div id=”nav”>

  <ul>

  <li>首頁</li>

  <li>欄目名稱</li>

  <li>聯系我們</li>

  </ul>

  </div>

  2)、nav標簽后

  <nav>

  <ul>

  <li>首頁</li>

  <li>欄目名稱</li>

  <li>聯系我們</li>

  </ul>

  </nav>

  由以上HTML布局到HTML5轉換其實很容易理解html nav標簽使用,以及配合ul li布局導航條技巧。

  二、兼容性提示 - TOP

  因為<nav></nav>標簽是html 5新增的標簽,而在IE8及以下IE瀏覽器(IE8、IE7、IE6)不支持,所以根據需求選擇布局HTML。

  三、html nav css布局案例 - TOP

  通過傳統div布局與nav布局進行對比學習,從而從html css布局中掌握nav語法與用法。

  以下DIVCSS5通過三個布局實踐讓大家掌握nav布局,分別:

  1)、傳統div+ul+li布局導航樣式;

  2)、nav+ul+li布局導航樣式;

  3)再在nav+ul+li布局的基礎上對nav設置class css樣式

  通過以上案例讓大家明白nav一般配合ul li或直接用于布局導航相關的布局,同時nav就像div那樣使用可以直接設置css也可以加class或id 。

  具體案例如下:

  1、傳統div css布局與NAV css布局完整HTML源代碼

  <!DOCTYPE html>

  <html>

  <head>

  <meta charset="utf-8" />

  <title>nav布局 在線演示 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}

  /* 對class=nav設置黑色邊框,鼠標滑過超鏈接文字為紅色 */

  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設置紅色邊框,超鏈接位置為紅色 */

  nav.bg{ background:#CCC}

  nav.bg li a{ color:#090}

  /* 對nav設置class=bg,設置背景為灰色,超鏈接位置為綠色 */

  </style>

  </head>

  <body>

  <p>傳統 div ul li布局導航條效果</p>

  <div class="nav">

  <ul>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/">網站首頁</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/jianzhan/">網站搭建</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mingcijieshi/">名詞解釋</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/ask/">SEO問答</a></li>

  </ul>

  </div>

  <p>html5 nav ul li布局導航條沒有對nav加id和class 同時設置nav li a超鏈接文字字體顏色為紅色字和紅色框效果</p>

  <nav>

  <ul>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/">網站首頁</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/jianzhan/">網站搭建</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mingcijieshi/">名詞解釋</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/ask/">SEO問答</a></li>

  </ul>

  </nav>

  <p>html5 nav ul li布局另外加class=bg設置背景為灰黑色,超鏈接文字字體顏色為綠色</p>

  <nav class="bg">

  <ul>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/">網站首頁</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/jianzhan/">網站搭建</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mingcijieshi/">名詞解釋</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href=https://www.yuntask.com/expert/blog/"http:/moonseo.cn/ask/">SEO問答</a></li>

  </ul>

  </nav>

  </body>

  </html>

  以上使用傳統div+ul+li+css布局導航類布局,然后使用nav+ul+li+css布局,同時再在nav的基礎上對nav設置class改變其布局對比效果。

評論

說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!