颠末激进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}
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.bg{ bac公斤round:#CCC}
nav.bg li a{ color:#090}
</style>
</head>
<body>
<p>古板 div ul li结构导航条成绩</p>
<div class="nav">
<ul>
<li><a href="//">站点首页</a></li>
<li><a href="//">HTML教程</a></li>
<li><a href="//">HTML入门</a></li>
<li><a href="//">HTML5教程</a></li>
<li><a href="//">CSS教程</a></li>
<li><a href="//">CSS入门</a></li>
</ul>
</div>
<p>html5 nav ul li机关导航条不有对nav加id与class 同时设置装备摆设nav li a超链接文字字体颜色为赤色字与血色框成绩</p>
<nav>
<ul>
<li><a href="//">站点首页</a></li>
<li><a href="//">HTML教程</a></li>
<li><a href="//">HTML入门</a></li>
<li><a href="//">HTML5教程</a></li>
<li><a href="//">CSS教程</a></li>
<li><a href="//">CSS入门</a></li>
</ul>
</nav>
<p>html5 nav ul li组织其他加class=bg配置靠山为灰黑色，超链接文字字体色彩为绿色</p>
<nav class="bg">
<ul>
<li><a href="//">站点首页</a></li>
<li><a href="//">HTML教程</a></li>
<li><a href="//">HTML入门</a></li>
<li><a href="//">HTML5教程</a></li>
<li><a href="//">CSS教程</a></li>
<li><a href="//">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三个结构阅读器效果截图
如果您觉得本文的内容对您的学习有所帮助：
关键字：
jquery