您現在的位置: 网站首頁 / 網站建設 / 正文

HTML5 <nav>标签 HTML Nav CSS布局教程

作者: admin 发布: 2015-6-7 11:24:23 分类: 網站建設 閱讀: 次 查看評論

  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="http://moonseo.cn/">网站首頁</a></li>

  <li><a href="http://moonseo.cn/jianzhan/">网站搭建</a></li>

  <li><a href="http://moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href="http://moonseo.cn/mingcijieshi/">名词解释</a></li>

  <li><a href="http://moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href="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="http://moonseo.cn/">网站首頁</a></li>

  <li><a href="http://moonseo.cn/jianzhan/">网站搭建</a></li>

  <li><a href="http://moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href="http://moonseo.cn/mingcijieshi/">名词解释</a></li>

  <li><a href="http://moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href="http://moonseo.cn/ask/">SEO問答</a></li>

  </ul>

  </nav>

  <p>html5 nav ul li布局另外加class=bg设置背景为灰黑色,超链接文字字体颜色为绿色</p>

  <nav class="bg">

  <ul>

  <li><a href="http://moonseo.cn/">网站首頁</a></li>

  <li><a href="http://moonseo.cn/jianzhan/">网站搭建</a></li>

  <li><a href="http://moonseo.cn/kongjian/">空間服務器</a></li>

  <li><a href="http://moonseo.cn/mingcijieshi/">名词解释</a></li>

  <li><a href="http://moonseo.cn/mobanzhizuo/">模板制作</a></li>

  <li><a href="http://moonseo.cn/ask/">SEO問答</a></li>

  </ul>

  </nav>

  </body>

  </html>

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

  特别说明:可能对于不会div css布局来说,可能看到以上代码比较困难,根本的解决方法就是学习div+css,自然看以上代码就会一眼就会明白案例表达知识点,自然看看以上案例就掌握了。

  2、DIVCSS5實例布局截圖

  传统div css布局导航条与nav布局导航条、对nav加class三个布局浏览器效果截图

  傳統div布局導航條與nav布局導航條、對nav加class三個布局浏覽器效果截圖

  3、在線演示

  查看案例 注意要看到nav布局(生效)效果需要在支持HTML5浏览器浏览观察,推荐使用谷歌浏览器进行浏览观察nav布局效果。

  四、divcss总结 - TOP

  Nav是新增的html標簽,只要html中使用nav標簽,這樣的html布局就變成使用html5布局的網頁,但html5新增標簽局限性,低版本IE浏覽器不支持(如果低版本浏覽器浏覽新增html5標簽,對應布局將失效,設置CSS樣式也是無效的),所以謹慎選擇使用。一般傳統網頁通常不會使用html5新增布局,所以注意選擇使用。智能手機浏覽網頁、平板電腦浏覽的網頁可以適當使用html5新增標簽或新增CSS3樣式布局。

  來源:SEO搜尋引擎優化 - SEO自學網 轉載注明出處!

? 上一篇下一篇 ?   本文關鍵詞: HTML  

評論列表:

站長SEO學院
第一節:百度搜索引擎工作原理
第二節:建設對搜索引擎友好的站點
第三節:如何進行網站內容建設
第四節:整體優化、結構優化、網頁優化
第五節:移動搜索-明確移動搜索優化標准
百度SEO資料文檔
百度搜索引擎優化指南2.0
百度移動搜索優化指南2.0
網站分析白皮書(站長版)
移動站點該如何優化
建設對百度友好的站點
百度搜索引擎網頁質量白皮書
石榴算法-綠蘿算法-冰桶算法
新搜索時代下的優化策略
更多百度SEO資料文檔
站長推薦
DIV+CSS布局實例教程-Web標准
网站SEO優化常见问题汇总
SEO優化推广方案该如何写
SEO優化方案步骤
影響網站關鍵詞排名因素總結
影響谷歌搜索引擎排名的因素調查
手機移動端站點適配優化
最近發表