zoukankan html css js c++ java

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

一级导航

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

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

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

给div设置宽高和边界线

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

ul li a{
		float: left;        向左浮动
		 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标签上时背景和字体发生的变化 ##以下是一级导航完整代码 ---- 一级导航网页链接导航

****** #二级导航 **.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 {
		 1000px;
		height: 60px;
		margin: 20px auto;
		border: 1px solid #ccc;
		overflow: hidden; 溢出隐藏
	}
	.nv ul li {
		float: left;
		 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 {
		 600px;
		height: 60px;
		margin: 40px auto;
		border: 1px solid #ccc;
		
	}
	a {
		text-decoration: none;
	}
	ul li {
		list-style: none;
	}
	.nav ul li {
		 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爱好者评论！

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

查看全文

相关阅读:
window.top.location
JS 退出系统并跳转到登录界面的实现代码
 CSS position 属性
 在网页中插入时间自动更新
 CKeditor 配置使用
 使用JspSmart文件上传
 复制的web工程为什么不能部署到tomcat
JDBC 4 PreparedStatement 与Statement 的区别
 每周会商自动化
 晚上的亲子时光

原文地址：https://www.cnblogs.com/kasl007/p/7087084.html