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

发布于：2025-02-11 ⋅ 阅读:(90) ⋅ 点赞:(0)

8.1 水平顶部导航栏

8.1.1 简单水平导航栏的设计与实现
8.1.1.1导航栏的创建
<nav>标签是 HIML5 新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用<nav>标签在页面上创建导航栏菜单区域。
例如，在<nav>的首尾标签之间使用无序列表<ul>标签配合列表选项<>创建菜单选项其中选项内容使用超链接的形式，链接地址当前设置为空链接，用户可根据实际情况改成具体的 URL地址。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<center>简单水平菜单导航栏</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 列表样式的设计
此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS在
2.列表样式的设计
<head>标签中进行声明，对列表样式进行改变。例如，使用 list-style-type 属性去掉默认标记。为了预防不同的浏览器会出现预设值,设置 margin 和 padding属性为0，避免最终布局效果可能产生的误差;为了使列表元素能够在同一行显示，为<li>ll列表选项定义浮动效果

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				float: left;
			}
			
		</style>
	</head>
	<body>
		<center>简单水平菜单导航栏</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 超链接样式的设计

利用 CSS 为超链接重新设置样式，例如，对超链接的a:link 和a:visited 进行设置，表示超链接未被访问和已访问状态。然后将其 display属性设置为 block，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

  1. <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				float: left;
			}
			a:link,a:visited{
				display: block;
				width: 80px;
				font-weight: 700;
				background-color: greenyellow;
				color: red;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			
		</style>
	</head>
	<body>
		<center>简单水平菜单导航栏</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>

  2. 8.1.1.4 鼠标事件

    利用CSS为a:hover 和a:active 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。

  3. <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			ul{
				margin: 0;
				padding: 0;
				list-style-type: none;
			}
			li{
				float: left;
			}
			a:link,a:visited{
				display: block;
				width: 80px;
				font-weight: 700;
				background-color: greenyellow;
				color: red;
				padding: 10px;
				text-align: center;
				text-decoration: none;
			}
			a:hover,a:active{
				background-color: darkblue;
				color: white;
			}
		</style>
	</head>
	<body>
		<center>简单水平菜单导航栏</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>

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

    8.1.2.1导航栏的创建

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

  5. <!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			*{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
		</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>

  6. 8.1.2.2 列表样式的设计
    戴时会带有<ul>元素的实心点标记，及<ol>元素的阿拉伯序号，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。
    同样，使用 list-style-type 属性去掉默认标记，设置margin 和 padding属性为0，为<li>列表选项定义浮动效果，设置text-decoration属性none。这里使用通配符“*”整体设置

  7. <!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			*{
				list-style-type: none;
				text-decoration: none;
				margin: 0;
				padding: 0;
			}
			
			ul li{
				float: left;
			}
			ul li ol li{
				float: none;
			}
		</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. 8.1.2.3 二级菜单的隐藏和显示设计
    为了使有序列表的二级菜单隐藏起来，需要设置 display属性为 none。

    为了鼠标悬停一级菜单时可以显示二级菜单，需要设置有序列表的display属性为block 。
    为了二级菜单能在从属的一级菜单正下方显示，需要设置二级菜单的绝对定位及一级菜单的相对定位。

  9. <!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			ul li ol{
				background-color: lightcyan;
				position: absolute;
				left: 0;
				display: none;	/* 将二级菜单隐藏 */
			}
			ul li{
				float: left;
				position: relative;
				list-style-type: none;
			}
			ul li:hover ol{
				display: block;	
			}
		</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>

  10. 8.1.2.4 DIV样式的设计
    可以对内容所处的div样式进行设置，包括宽度、高度、边框和对齐方式。


    8.1.2.5 超链接样式的设计
    利用 CSS 为列表超链接重新设置样式，例如，对超链接的a:link和a:visited 进行设置，表示超链接未被访问和已访问状态。然后将其 display属性设置为 block，使得超链接成为块级元素，这样才可以为超链接设置80像素的宽度。

  11. <!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			*{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				padding: 10px;
				width: 70px;
			}
			ul li{
				float: left;
			}
			ul li a{
				background-color: red;
				color: aliceblue;
			}
			ul li ol li a{
				background-color: aliceblue;
				color: red;
			}
			ul li ol li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			
		</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>

  12. 8.1.2.6 鼠标事件

    用CSS为无序列表选项li:hover和有序列表的a:hover进行样式设置，表示鼠标悬停状态时的样式变化

  13. <!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
			*{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				text-decoration: none;
				text-align: center;
				display: block;
				padding: 10px;
				width: 70px;
			}
			ul li{
				float: left;
			}
			ul li a{
				background-color: red;
				color: aliceblue;
			}
			ul li ol li a{
				background-color: aliceblue;
				color: red;
			}
			ul li ol li{
				float: none;
			}
			ul li ol{
				display: none;
			}
			ul li:hover ol{
				display: block;
			}
			ul li a:hover,ul li a:visited{
				border-bottom: #2af solid 5px;
				font-weight: 800;
			}
			ul li ol a:hover,ul li ol li a:visited{
				background-color: red;
				color: aliceblue;
				border-bottom: none;
			}
		</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>

  14. 8.2 纵向侧边导航栏

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

    8.2.1.1导航栏的创建
    普通的纵向导航同样可以使用超链接和列表元素来实现，只需要将文字链接设置成块级元素。区别于水平导航栏，纵向导航栏不需要设置列表选项<li>的浮动属性。
    在<nav>的首尾标签之间使用<div>标签创建菜单范围，结合无序列表<>标签和列表选项/i>标签创建菜单选项。这里的超链接地址暂时设置为空链接，用户可根据实际情况改成具体的 URL地址。

  15. <!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</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>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			#nav{
				width: 150px;
				border: 1px solid red;
				background-color: lightcyan;
			}
			.tit{
				padding: 10px;
				text-align: center;
				
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</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 列表样式的设计

此时列表选项还带有<u>元素的默认实心圆点样式，需要使用list-style-type 属性去掉默认标记，设置 margin 和 padding 的属性值。并同时给列表选项添加背景颜色，使大小标题容易区分。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			#nav{
				width: 150px;
				background-color: #eeeeee;
			}
			.tit{
				padding: 10px;
				text-align: center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				display: block;
				width: 150px;
				line-height: 40px;
				color: #00cc33;
				background-color: #eeeeee;
				text-align: center;
				text-decoration: none;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</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 超链接样式的设计
利用CSS为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:aetive 进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体 CSS样式的设置。

​
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>第八章 利用CSS制作导航菜单</title>
		<style>
			#nav{
				width: 150px;
				background-color: #eeeeee;
			}
			.tit{
				padding: 10px;
				text-align: center;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				display: block;
				width: 150px;
				line-height: 40px;
				text-align: center;
				text-decoration: none;
			}
			a:link,a:visited{
				color: #00cc33;
				background-color: #eeeeee;
			}
			a:hover,a:active{
				color: #eeeeee;
				background-color: #00cc33;
			}
		</style>
	</head>
	<body>
		<nav>
			<div id="nav">
				<h3 class="tit">所有商品分类</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 导航栏的创建

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

<!--示例程序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>

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布