首页 | 开发 | 网页 | html教程 | html入门

认识html footer应用与布局技巧

2019年11月30日 作者：佚名
 

起首nav也是在html5中新增的元素标签。同时和其它新增标签一样，nav在激进html5从前版本Html布局中作为导航条关系常用命名来运用。

比喻：

<div class=”nav”>web导航模式</div>

或

<div id=”nav”>网站导航内容</div>

在html5中特地将畴前经常运用命名nav作为一个新标签元素。此标签常用于导航处布局。

一、html nav标签语法与结构  

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配合什么标签应用
Thinkcss在从前文章教程中简介过通常导航条应用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构造导航条才具。

二、兼容性暗示  

由于<nav></nav>标签是html 5新增的标签，而在IE8及以下IE涉猎器（IE8、IE7、IE6）不支持，以是按照重要选择结构HTML。

三、html nav css组织案例  

颠末激进div构造与nav构造进行对比学习，从而从html css构造中把握nav语法与用法。

以下CSS5经由三个组织实践让人人驾御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机关 在线演示 CSS5</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{ bac公斤round:#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="//www.css5.com.cn/">站点首页</a></li> 
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li> 
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li> 
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li> 
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li> 
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li> 
</ul> 
</div> 
<p>html5 nav ul li机关导航条不有对nav加id与class 同时设置装备摆设nav li a超链接文字字体颜色为赤色字与血色框成绩</p> 
<nav> 
<ul> 
<li><a href="//www.css5.com.cn/">站点首页</a></li> 
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li> 
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li> 
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li>
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li> 
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li> 
</ul> 
</nav> 
<p>html5 nav ul li组织其他加class=bg配置靠山为灰黑色,超链接文字字体色彩为绿色</p> 
<nav class="bg"> 
<ul> 
<li><a href="//www.css5.com.cn/">站点首页</a></li> 
<li><a href="//www.css5.com.cn/html/">HTML教程</a></li> 
<li><a href="//www.css5.com.cn/htmlrumen/">HTML入门</a></li> 
<li><a href="//www.css5.com.cn/html5/">HTML5教程</a></li> 
<li><a href="//www.css5.com.cn/css/">CSS教程</a></li> 
<li><a href="//www.css5.com.cn/css/">CSS入门</a></li> 
</ul> 
</nav> 
</body> 
</html>

以上使用激进div+ul+li+css组织导航类构造，而后应用nav+ul+li+css布局，同时再在nav的基础底细上对nav设置class篡改其组织对比效果。

格外注明：概略对付不会div css组织来讲，可以看到以上代码相比坚苦，根本的计划方式便是学习div+css，天然看以上代码就会一眼就会了解案例表明常识点，人造看看以上案例就把握了。

2、CSS5实例组织截图

保守div构造导航条与nav机关导航条、对nav加class三个结构阅读器效果截图


相关链接