第8章利用CSS制作导航菜单

云芙2024-11-13 10:47

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现

<nav>标签是HTML5新增的文档结构标签，用于标即导航栏，以便后续与网站的其他其内容整合，使用常用<nav>标签在页面上创建导航栏菜单区域。

8.1.1.1导航栏的创建

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			
		</style>
	</head>
	<body>
		<center>
			<h1>简单水平菜单导航栏</h1>
		</center>
		<hr>
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1.2 列表样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			li{
				float:left;
			}
			ul{
				list-style-type: none;
			}
		</style>
	</head>
	<body>
		<center>
			<h1>简单水平菜单导航栏</h1>
		</center>
		<hr>
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1.3 超链接样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			li{
				float:left;
			}
			ul{
				list-style-type: none;
			}
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding:10px;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<center>
			<h1>简单水平菜单导航栏</h1>
		</center>
		<hr>
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.1.4 鼠标事件

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			li{
				float:left;
			}
			ul{
				list-style-type: none;
			}
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				padding:10px;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #ff0000;
				color: #ffffff;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: #ff0000;
			}
		</style>
	</head>
	<body>
		<center>
			<h1>简单水平菜单导航栏</h1>
		</center>
		<hr>
		<nav>
			<ul>
				<li><a href="#">前端</a></li>
				<li><a href="#">后台</a></li>
				<li><a href="#">移动应用</a></li>
				<li><a href="#">数据库</a></li>
				<li><a href="#">操作系统</a></li>
				<li><a href="#">服务器</a></li>
			</ul>
		</nav>
	</body>
</html>

8.1.2 下拉子菜单导航栏的设计与实现

8.1.2.1导航栏的创建

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.2 列表样式的设计

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.3 二级菜单的隐藏和显示设计

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.4 DIV样式的设计

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.5 超链接样式的设计

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #ffffff;
			}
				
			ul li ol li a{
				background-color: #ffffff;
				color: #ff0000;
			}
			/* 8.1.2.6 鼠标事件 */
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.1.2.6 鼠标事件

html 复制代码 
<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			
			/* 8.1.2.1导航栏的创建 */
			/* 8.1.2.2 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
			/* 8.1.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			/* 8.1.2.4 DIV样式的设计 + 8.1.2.5 超链接样式的设计 */
			a{
				text-decoration: none;
				display: block;
				width: 100px;
				text-align: center;
				padding: 10px;
			}
			ul li a{
				background-color: #ff0000;
				color: #ffffff;
			}
				
			ul li ol li a{
				background-color: #ffffff;
				color: #ff0000;
			}
			/* 8.1.2.6 鼠标事件 */
			ul li a:hover,ul li a:active{
				border-bottom: #aaccff solid 5px;
			}
			ul li ol li a:hover,ul li ol li a{
				border-bottom: none;
				background-color: #ff0000
				color:#eeeeee;
			}
		</style>
	</head>
	<body>
		<center>
			<h3>下拉子菜单导航栏</h3>
		</center>
		<hr>
		<nav>
			<div id="nav">
				<ul>
					<li><a href="#">前端</a>
						<ol>
							<li><a href="#">HTML5</a></li>
							<li><a href="#">CSS</a></li>
							<li><a href="#">Javascript</a></li>
						</ol>
					</li>
					<li><a href="#">后台</a>
						<ol>
							<li><a href="#">Java</a></li>
							<li><a href="#">PHP</a></li>
							<li><a href="#">Python</a></li>
						</ol>
					</li>
					<li><a href="#">移动应用</a>
						<ol>
							<li><a href="#">Android</a></li>
							<li><a href="#">IOS</a></li>
						</ol>
					</li>
					<li><a href="#">数据库</a>
						<ol>
							<li><a href="#">MySql</a></li>
							<li><a href="#">SqlServer</a></li>
						</ol>
					</li>
					<li><a href="#">操作系统</a>
						<ol>
							<li><a href="#">Linux</a></li>
							<li><a href="#">Unix</a></li>
							<li><a href="#">Windows</a></li>
						</ol>
					</li>
					<li><a href="#">服务器</a>
						<ol>
							<li><a href="#">Tomcat</a></li>
							<li><a href="#">WebSphere</a></li>
							<li><a href="#">WebLogicc</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2 纵向侧边导航栏

8.2.1 简单纵向导航栏的设计与实现

8.2.1.1导航栏的创建

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>

8.2.1.2 DIV样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				tect-align:center;
			}
		</style>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>

8.2.1.3 列表样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				tect-align:center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}

		</style>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>

8.2.1.4 超链接样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				tect-align:center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-align: center;
				text-decoration: none;
				display: block;
				width: 150px;
				line-height: 30px;
			}
		</style>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				tect-align:center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-align: center;
				text-decoration: none;
				display: block;
				width: 150px;
				line-height: 30px;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #33cc00;
			}
			a:hover,a:active{
				background-color: #33cc00;
				color: #eeeeee;
			}
		</style>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>
html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			div{
				background-color: #33cc00;
				width: 150px;
				padding: 10px;
			}
			h3{
				color: #eeeeee;
				tect-align:center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-align: center;
				text-decoration: none;
				display: block;
				width: 150px;
				line-height: 30px;
			}
			a:link,a:visited{
				background-color: #eeeeee;
				color: #33cc00;
			}
			a:hover,a:active{
				/* background-color: #33cc00; 
				 color: #eeeeee; */
				background-image: url(img/bg.JPG);
			}
		</style>
	</head>
	<body>
			<nav>
				<div id="nav">
					<h3>所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品</a></li>
					<li><a href="#">手机数码</a></li>
					<li><a href="#">家用电器</a></li>
					<li><a href="#">厨卫工具</a></li>
					<li><a href="#">汽车用品</a></li>
					<li><a href="#">运动器材</a></li>
					</ul>
				</div>
			</nav>
	</body>
</html>

8.2.2 出式子菜单导航栏的设计与实现

8.2.2.1 导航栏的创建

html 复制代码 
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2.2.2 DIV样式的设计

html 复制代码 
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			div{
			background-color: #33cc00;
			width: 150px;
			padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.2.2.3 二级菜单的隐藏和显示设计

html 复制代码 
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}

8.2.2.4 列表样式的设计

html 复制代码 
<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			div{
			background-color: #33cc00;
			width: 150px;
			padding: 10px;
			}
			h3{
				color: #eeeeee;
				text-align: center;
				}
					/* 8.2.2.4 列表样式的设计 */
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
				}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</h3>
				<ul>
					<li><a href="#">家居用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">收纳箱</a></li>
							<li><a href="#">雨伞雨具</a></li>
							<li><a href="#">家务清洁</a></li>
							<li><a href="#">茶具</a></li>
							<li><a href="#">环保袋</a></li>
						</ol>
					</li>
					<li><a href="#">手机数码<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">电脑主机</a></li>
							<li><a href="#">鼠标键盘</a></li>
							<li><a href="#">无人机</a></li>
							<li><a href="#">数码相机</a></li>
						</ol>
					</li>
					<li><a href="#">家用电器<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">吸尘器</a></li>
							<li><a href="#">电饭煲</a></li>
							<li><a href="#">冰箱</a></li>
						</ol>
					</li>
					<li><a href="#">厨卫工具<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">消毒柜</a></li>
							<li><a href="#">抽油烟机</a></li>
							<li><a href="#">碗柜</a></li>
							<li><a href="#">花洒笼头</a></li>
							<li><a href="#">洗手台</a></li>
						</ol>
					</li>
					<li><a href="#">汽车用品<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">打蜡服务</a></li>
							<li><a href="#">超级试驾</a></li>
							<li><a href="#">导航仪</a></li>
							<li><a href="#">机油</a></li>
						</ol>
					</li>
					<li><a href="#">运动器材<img src="img/more.JPG" align="right" /></a>
						<ol>
							<li><a href="#">跑鞋</a></li>
							<li><a href="#">帐篷</a></li>
							<li><a href="#">山地车</a></li>
						</ol>
					</li>
				</ul>
			</div>
		</nav>
	</body>
</html>
html 复制代码 
			/* 8.2.2.3 二级菜单的隐藏和显示设计 */
			ul li{
				position: relative;
			}
			ul li ol{
				position: absolute;
				left:150px;
				top:-1px;
				display: none;
			}
			ul li:hover ol{
				display: block;
			}

8.2.2.5 超链接样式的设计

html 复制代码 
/* 8.2.2.5 超链接样式的设计 */
			a{
				display: block;
				width: 150px;
				line-height: 30px;
				text-decoration: none;
				text-align: center;
				background-color: #eeeeee;
				color: #33cc00;
			}
html 复制代码 
ul li a:hover{
				background-image: url(img/bg2.JPG);
			}
				
			ul li ol li a:hover{
				background-color: #33cc00;
				color: #eeeeee;
				background-image: none;
			}

8.3 底部固定导航栏

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<ul>配合列表选项<li>标签创建菜单选项。其中选项内容使用超链接的形式，链接地址当前设置为空链接

8.3.1 导航栏的创建

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.2 列表样式的设计

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<style type="text/css">
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			li{
				float: left;
			}
		</style>
	</head>
	<body>
		<nav>
			<div class="fix-footer">
				<ul>
					<li><a href="#">首页</a></li>
					<li><a href="#">前端</a></li>
					<li><a href="#">后台</a></li>
					<li><a href="#">移动应用</a></li>
				</ul>
			</div>
		</nav>
	</body>
</html>

8.3.3 菜单固定底部的设计

html 复制代码 
	.fix-footer{
				position: fixed;
				bottom: 0;
			}

8.3.4 超链接样式的设计

html 复制代码 
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}

8.3.5 鼠标事件

html 复制代码 
a:link,a:visited{
				background-color: #0000ff;
				color: #ffff00;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}

8.4 综合案例------优名养生馆

8.4.1 封面页的设计与实现

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			body{
				background-image: url(img/bg3.jpg);
			}
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				width: 25%;
				float: left;
				line-height: 50px;
			}
			img{
				margin-top: 70px;
				margin-right: 40px;
			}
			.footer{
				height: 50px;
				width: 100%;
				background-image: url(img/footer-bg2.jpg);
				border-top: 3px solid gray;
				text-align: center;
				z-index: 9998;
				position: fixed;
				bottom: 0;
				left: 0;
			}
			.footer-top{
				height: 90px;
				width: 90px;
				text-align: center;
				line-height: 90px;
				z-index: 9999;
				position: fixed;
				bottom: 0;
				left: 45%;
			}
			.footer-top a{
				border-radius:90px;
				}
			.footer-top a:link,a:visited{
				display:block;
				font-size:20px;
				color:brown;
				text-decoration: none;
				font-weight:bold;
				border-top:3px solid gray;
				background-image: url(img/footer-top-bg1.jpg);
				}
				.footer-top a:hover{
				background-image:url(img/footer-top-bg2.jpg);
				color: white;
				}
				.footer a:link,a:visited{
				display:block;
				font-sine:20px;
				color: brown;
				text-decoration: none;
				foni-weight: bold;
				}
				.footer a:hover{
				background-color: darkgray;
				border-left:2px solid white;
				border-right: 2px solid white;
				font-size:16px;
				color: red;
				}
		</style>
	</head>
	<body>
	<div>
		<marquee direction="right" scrollamount="20">
		<img src="img/marquee1.jpg"/>
		<img src="img/marquee2.jpg" />
		<img src="img/marquee3.jpg" />
		</marquee>
	</div>
	<nav>
		<div class="footer-top">
			<a href="case2.html">进入官网</a>
		</div>
		<div class="footer">
		<ul>
			<li><a href="#">奇幻世界</a></li>
			<li><a href="#">主题风采</a></li>
			<li><a href="#">加盟相关</a></li>
			<li><a href="#">友情推荐</a></li>
		</ul>
		</div>
		</nav>
	</body>
</html>

8.4.2 主页的设计与实现

html 复制代码 
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>名优养生馆</title>
		<style>
				body{
					background-image: url(img/bg2.JPG jpg);
				}
				.all{
					margin: 0px auto;
					width: 900px;
				}
				.top{
					width:900px ;
					height:225px ;
					background-image :url(img/top-bg2.jpg);
				}
				.cent{
					width:320px ;
					margin-left: auto ;
					margin-right: auto;
					font-size:58px;
					font-family:"楷体";
					color:lemonchiffon;
					font-style: italic;
				}
				.nav{
					width: 200px;
					float: left;
					margin-top: 30px;
					font-size:20px;
					font-weight:bold;
					color: saddlebrown;
				}
				.main{
					width: 700px;
					height: 300px;
					float: left;
					margin-top: 10px ;
				}
				.footer{
					font-size : 14px;
					font-weight: bold;
					color: brown;
					text-align: center;
					clear: both;
					background-image: url(img/footer-bg2.jpg);
				}
				p{
					color: brown;
					font-size:16px;
				}
				img{
					margin: 15px;
				}
				ul{
					list-style-type: none;
				}
				li{
					height:22px;
				}
				a:link{
					font-size:16px;
					text-decoration: none;
					color: brown;
				}
				a:hover{
					background-color: burlywood;
					color: white;
				}
		</style>
	</head>
			<body>
			<div class="all">
				<div class="top">
					<br>
				    <div class="cent">优名养生馆</div>
			    </div>
				<nav>
				<div class="nav">
				    <table>
				        <tr>养生之道</tr>
				        <tr>
				            <ul>
				                <li><a href="#">运动养生</a></li>
				                <li><a href="#">四季养生</a></li>
				                <li><a href="#">健康检测</a></li>
				            </ul>
				        </tr>
				        <tr>中医养生</tr>
				        <tr>
				            <ul>
				                <li><a href="#">经络养生</a></li>
				                <li><a href="#">体质养生</a></li>
				                <li><a href="#">特色疗法</a></li>
				            </ul>
				        </tr>
				    </table>
				</div>
			</nav>
				<div class="main">
				<img src="img/main2.jpg" align="left"/>
				<p>&emsp;&emsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p>
				<p>&emsp;&emsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p>
				<p>&emsp;&emsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老;心理层面的养生包括养心、养性、养神。</p>
				</div>
				<hr />
				<div class="footer">版权所有&copy;优名养生馆</div>
			</div>
		</body>
</html>
相关推荐
高山我梦口香糖41 分钟前
[react] ＜NavLink＞自带激活属性
前端·javascript·react.js
撸码到无法自拔1 小时前
React：组件、状态与事件处理的完整指南
前端·javascript·react.js·前端框架·ecmascript
高山我梦口香糖1 小时前
[react]不能将类型“string | undefined”分配给类型“To”。 不能将类型“undefined”分配给类型“To”
前端·javascript·react.js
代码cv移动工程师1 小时前
HTML语法规范
前端·html
Elena_Lucky_baby1 小时前
实现路由懒加载的方式有哪些？
前端·javascript·vue.js
Domain-zhuo1 小时前
如何利用webpack来优化前端性能？
前端·webpack·前端框架·node.js·ecmascript
理想不理想v1 小时前
webpack如何自定义插件？示例
前端·webpack·node.js
小华同学ai2 小时前
ShowDoc：Star12.3k，福利项目，个人小团队的在线文档“简单、易用、轻量化”还专门针对API文档、技术文档做了优化
前端·程序员·github
王解2 小时前
Vue CLI 脚手架创建项目流程详解 （2）
前端·javascript·vue.js
刘大浪2 小时前
vue.js滑动到顶便锁定位置
前端·javascript·vue.js
热门推荐
01〔AI 绘画〕Stable Diffusion 之 解决绘制多人或面部很小的人物时面部崩坏问题 篇02YOLOv8训练好模型后，追加轮数继续训练、或者提前终止训练，缩减训练轮数03玄机平台应急响应—webshell查杀04SQL 主从数据库实时备份05HCIA-datacom数通题库和录播视频资料06Docker 夺命连环 15 问07VSCode插件 —— Cody AI （免费AI助手！）08校验 GPT-4 真实性的三个经典问题：快速区分 GPT-3.5 与 GPT-4，并提供免费测试网站09(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明10组基轨迹建模 GBTM的介绍与实现（Stata 或 R）