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

html nav css布局案例

2019年11月30日 作者：佚名

颠末激进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/">web首页</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，自然看以上代码就会一眼就会明白案例剖明常识点，天然看看以上案例就把握了。


相关链接