一级导航

（新学者如有不懂可以去参看我博客里其他的相关随笔）

* { margin: 0; padding: 0; }消除网页默认的margin值和padding值

.nav { width: 1280px; height: 60px; border: 1px solid red; margin: 70px auto; }

给div设置宽高和边界线

ul li { list-style: none; }去除无序列表前面的点

ul li a{float: left;        向左浮动width: 320px;       块320像素height: 60px;       高60像素text-align: center; 文字居中line-height: 60px;  字高60像素font-weight: bold;  字体加粗display: block;     显示为块类型text-decoration: none;   去除下划线background-color: green; 背景颜色为绿色color: black;            字体颜色为黑色}这里定义a标签的属性

ul li a:hover {background-color: black;color: white;}当鼠标悬浮于a标签上时背景和字体发生的变化

    ul li a:active {background-color: red;color: orange;}当鼠标点击a标签上时背景和字体发生的变化

##以下是一级导航完整代码

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>一级导航网页链接导航</title>
<style>* {margin: 0;padding: 0;}.nav {width: 1280px;height: 60px;border: 1px solid red;margin: 70px auto;}ul li {list-style: none;}ul li a{float: left;width: 320px;height: 60px;text-align: center;line-height: 60px;font-weight: bold;display: block;text-decoration: none;background-color: green;color: black;}ul li a:hover {background-color: black;color: white;}ul li a:active {background-color: red;color: orange;}
</style>
</head>
<body>
<div class="nav"><ul><li><a href="http://www.baidu.com">百度</a></li><li><a href="http://www.yandex.com">yandex</a></li><li><a href="http://www.hao123.com">hao123</a></li><li><a href="http://www.w3cschool.cn/">w3c</a></li></ul>
</div>
</body>
</html>

二级导航

.nv ul li:hover ul表示定义（class=nv属性下ul ul下的li
在li上进行hover 操作时产生的ul ）的css属性值！

这是二级导航的重要css代码

.nv ul li ul {position: absolute; 绝对定位display: none;  隐藏块类型}.nv ul li ul li {  float: none; 消除浮动}.nv ul li ul li a { background:pink;color: black;}.nv ul li:hover ul { display:block; 显示块}

以下是二级导航的全部代码（含部分解释）

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>二级导航</title>
<style>* {margin: 0;padding: 0;}ul li {list-style: none;}.nv {width: 1000px;height: 60px;margin: 20px auto;border: 1px solid #ccc;overflow: hidden; 溢出隐藏}.nv ul li {float: left;width: 250px;height: 60px;}.nv ul li a {font-weight: bold;text-decoration: none;text-align: center;line-height: 60px;display: block;background-color: purple;color: red;}.nv ul li a:hover {background-color: orange;color: #ccc; #ccc表示灰色}.nv ul li a:active {background-color: red;color: green;}.nv ul li ul {position: absolute; 绝对定位display: none;  隐藏块类型}.nv ul li ul li {  float: none; 消除浮动}.nv ul li ul li a { background:pink;color: black;}.nv ul li:hover ul { display:block; 显示块}
</style>
</head>
<body>
<div class="nv"><ul><li><a href="##">一级1</a><ul><li><a href="#">二级1.1</a></li><li><a href="#">二级1.2</a></li><li><a href="#">二级1.3</a></li><li><a href="#">二级1.4</a></li></ul></li><li><a href="##">一级2</a><ul><li><a href="#">二级2.1</a></li><li><a href="#">二级2.2</a></li><li><a href="#">二级2.3</a></li><li><a href="#">二级2.4</a></li></ul></li><li><a href="##">一级3</a><ul><li><a href="#">二级3.1</a></li><li><a href="#">二级3.2</a></li><li><a href="#">二级3.3</a></li><li><a href="#">二级3.4</a></li></ul></li><li><a href="##">一级4</a><ul><li><a href="#">二级4.1</a></li><li><a href="#">二级4.2</a></li><li><a href="#">二级4.3</a></li><li><a href="#">二级4.4</a></li></ul></li></ul>
</div>
</body>
</html>

三级导航

这是三级导航的重要代码和二级导航有相似

.nav ul li:hover ul li ul {display: none;position: absolute;left: 200px;top: 0px;}.nav ul li ul li ul li {float: none;}.nav ul li ul li ul li a {background-color: green;color: black;/*  top: 0;left: 200px;*/}.nav ul li:hover ul li:hover ul {display: block;}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>三级导航</title>
<style>* {margin: 0;padding: 0;}.nav {width: 600px;height: 60px;margin: 40px auto;border: 1px solid #ccc;}a {text-decoration: none;}ul li {list-style: none;}.nav ul li {width: 200px;height: 60px;float: left;position: relative;}.nav ul li a {display: block;line-height: 60px;text-align: center;background-color: red;color: green;}.nav ul li a:hover {background-color: orange;color: white;}.nav ul li ul {position: absolute;display: none;}.nav ul li ul li {float: none;}.nav ul li ul li a {background-color: red;color: blue;}.nav ul li:hover ul {display: block;}.nav ul li:hover ul li ul {display: none;position: absolute;left: 200px;top: 0px;}.nav ul li ul li ul li {float: none;}.nav ul li ul li ul li a {background-color: green;color: black;/*  top: 0;left: 200px;*/}.nav ul li:hover ul li:hover ul {display: block;}</style>
</head>
<body>
<div class="nav"><ul><li><a href="#">导航1</a><ul><li><a href="#">导航2.1</a><ul><li><a href="#">导航</a></li><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2.2</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2.3</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li><li><a href="#">导航</a></li></ul></li></ul></li></ul><ul><li><a href="#">导航1</a><ul><li><a href="#">导航2</a><ul><li><a href="#">导航</a></li><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li><li><a href="#">导航</a></li></ul></li></ul></li></ul><ul><li><a href="#">导航1</a><ul><li><a href="#">导航2</a><ul><li><a href="#">导航</a></li><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航</a></li><li><a href="#">导航3</a></li></ul></li><li><a href="#">导航2</a><ul><li><a href="#">导航3</a></li><li><a href="#">导航3</a></li><li><a href="#">导航</a></li></ul></li></ul></li></ul>
</div>
</body>
</html>

欢迎广大IT爱好者评论！

新学者如有不懂可以去参看我博客里其他的相关随笔

转载于:https://www.cnblogs.com/kasl007/p/7087084.html

一级导航，二级导航，三级导航介绍相关推荐

网络安全NISP证书一级、二级、三级介绍
介绍国家信息安全水平测试(NISP)是中国信息安全测评中心测试.颁证,国家实行网络空间安全人才培养基地经营管理,并授权网安世纪科技有限公司为NISP资格证书管理处. NISP验证分成一级.二级.三 ...
dropdownlist三级联动怎么实现_简单三步，轻松搞定一级、二级、三级下拉菜单
工作中,为了录入数据方便,数据规范,我们经常采用下拉菜单来制作规范模板,今天,技巧君和大家分享一下一级.二级和三级联动下拉菜单制作方法,文末有示例文件下载方法哦! 下拉菜单示例一级下拉菜单一级下拉 ...
承装承修承试电力资质一级、二级、三级、四级、五级怎么办理？
许可证分为承装.承修.承试三个类别. 取得承装类许可证的,可以从事电力设施的安装活动,取得承修类许可证的,可以从事电力设施的维修活动,取得承试类许可证的,可以从事电力设施的试验活动 . 承装类承装(修 ...
计算机会计二级科目,(完整版)会计科目一览表(一级科目二级科目三级科目)..pdf...
会计科目一览表会计科目一览表序号序号编号科目编号科目一级科目二级科目三级科目一级科目二级科目三级科目一.资产类一.资产类现金 1 现金 1 1001 1001 ...
html右侧可隐藏导航栏,HTMLCSS----练习隐藏导航栏（三级导航）
无标题文档 *{margin:0px;padding:0px;}#aa{height:40px;width:90px;top:80px;left:200px;background-color:#339 ...
分销系统开发|一级分销二级分销三级分销区别解析
分销系统开发|分销系统模式由于能够在低成本的情况下让团队快速裂变,以及迅速提升产品销量等特点,成为了许多商家都在运用的商业销售方式.今天就在这里具体说一下,分销模式中的一级分销.二级分销和三级分销都有 ...
html设置一级标题二级标题格式怎么弄,word排版什么叫一级标题二级标题三级标题以此下去...
标题,是标明文章.作品等内容的简短语句,一般分为总标题.副标题.分标题.而一级标题和二级标题和以此下去的标题代表的是一个序号,而且字体大小不一样.以下是详细介绍: 1.标题,是标明文章.作品等内容的简 ...
有关数据库的一级、二级、三级封锁协议
一级封锁协议一级封锁协议是指,事务T在修改数据R之前必须先对其加X锁,直到事务结束才释放.事务结束包括正常结束(COMMIT)和非正常结束(ROLLBACK). 一级封锁协议可防止丢失修改,并保证事 ...
国家信息系统安全等级保护基本要求——等保一级、二级、三级、四级内容
在这里分享下国家信息系统安全等级保护基本要求--等保一级.等保二级.等保三级.等保四级内容,以备查阅及编写单位自用信息安全要求. <信息系统安全等级保护基本要求> 中华人民共和国国家标准G ...
全局基址一级基址二级基址三级基址的关系
第一步.计算机内存一般分为四级存储.(印象里好像是四级) 第二步.在最底下的,往往是游戏的全局基址(决定用户界面以及一些细节等)和一些响应用户操作而对应实施的命令第三步.该是传递基址了.现在网游的基 ...

一级导航，二级导航，三级导航介绍