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

最新推荐文章于 2026-01-05 14:50:19 发布
原创 最新推荐文章于 2026-01-05 14:50:19 发布 · 638 阅读 · 13 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端 #javascript #开发语言

8.1 水平顶部导航栏

水平菜单导航栏是网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航适用性强，几乎所有类型的网站都可以使用，设计难度较低。
如果导航过于普通，无法容纳复杂的信息结构，就需要在内容块较多的情况下，结下拉子导航使用。


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


8.1.1.1导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				
			}
		</style>
	</head>
	<body>
	<center>
		<h3>简单水平菜单栏</h3>
	</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>
		</ul>
	</nav>
	</body>
</html>

8.1.1.2 列表样式的设计

此时会带有<ul>元素的默认样式，即每个列表选项前面有实心点标记，可以利用CSS在<head>标签中进行声明，对列表样式进行改变。

​​​​<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				
			}
			a{
				width: 80px;
				display: block;
				text-align: center;
				padding: 10px;
			}
		</style>
	</head>
	<body>
	<center>
		<h3>简单水平菜单栏</h3>
	</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>
		</ul>
	</nav>
	</body>
</html>


8.1.1.3 超链接样式的设计

利用CSS 为超链接重新设置样式，例如，对超链接的a:link和a:visited进行设置,超链接未被访间和已访问状态。然后将其display属性设置为block，使得超链接成为块级素，

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				
			}
			a{
				width: 80px;
				display: block;
				text-align: center;
				padding: 10px;
				text-decoration: none;
			}
	
		</style>
	</head>
	<body>
	<center>
		<h3>简单水平菜单栏</h3>
	</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>
		</ul>
	</nav>
	</body>
</html>


8.1.1.4 鼠标事件

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style>
			ul{
				list-style-type: none;
			}
			li{
				float: left;
				
			}
			a{
				width: 80px;
				display: block;
				text-align: center;
				padding: 10px;
				text-decoration: none;
			}
			a:link,a:active{
				background-color: #ffff00;
				color: #ffffff;
			}
			a:hover,a:active{
				background-color: #ffffff;
				color: ff0000;
			}
		</style>
	</head>
	<body>
	<center>
		<h3>简单水平菜单栏</h3>
	</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>
		</ul>
	</nav>
	</body>
</html>


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

下拉子菜单导航是网站设计中常见的子导航设计，一般适用于多级别、内容庞杂的网站。这种导航模式可以让整个网站设计更加整洁有序，现下大热的汉堡包导航也是采用这种隐藏式的导航设计。


8.1.2.1导航栏的创建

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
		
		
		</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 列表样式的设计

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
		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;
		}
		</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>

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


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

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


8.1.2.4 DIV样式的设计

完成以上关键步骤后，对内容所处的 div样式进行设置，包括宽度、高度、边框和对齐方式厓摒


8.1.2.5 超链接样式的设计

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
		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;
		}
		a{
			text-decoration: none;
			text-align: center;
			width: 80px;
			padding: 10px;
			display: block;
		}
		ul li a{
			background-color: #ff0000;
			color: #dddddd;
		}
		ul li ol li a{
			background-color: #dddddd;
			color: #ff0000;
		}
		</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 鼠标事件

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

<!--示例程序8.2-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>下拉子导航栏的制作</title>
		<style type="text/css">
		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;
		}
		a{
			text-decoration: none;
			text-align: center;
			width: 80px;
			padding: 10px;
			display: block;
		}
		ul li a{
			background-color: #ff0000;
			color: #dddddd;
		}
		ul li ol li a{
			background-color: #dddddd;
			color: #ff0000;
		}
		ul li a:hover,ul li a:visited{
			border-bottom: #22aaff solid 5px;
			font-weight: 900;
		}
		ul li ol li a:hover,ul li ol li a:visited{
			background-color: #ff0000;
			color: #dddddd;
			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>


8.2 纵向侧边导航栏

侧边菜单导航栏是网站设计中应用频率仅次于水平导航栏的导航设计，一般放置在首页的左上角，普遍使用文字链接作为导航项，可以容纳很多链接。
如果导航菜单太长会增加用户的浏览难度，因此，侧边导航栏通常会跟出式子导航结合使用，商城网站建设大多应用这种复合的导航设计


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


8.2.1.1导航栏的创建

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所有商品分类</title>
		<style type="text/css">
	
			
		</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.2 DIV样式的设计

对导航栏所处的 div 样式进行设置，包括宽度、边框和背景，同时对大标题文字的CSS进行设置，包括高度、行高、颜色和对齐方式。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所有商品分类</title>
		<style type="text/css">
			#nav{
				width: 150px;
				border: 1px solid red;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				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>


8.2.1.3 列表样式的设计

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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所有商品分类</title>
		<style type="text/css">
			#nav{
				width: 150px;
				border: 1px solid red;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				width: 150px;
				
				display: block;
				text-decoration: none;
				line-height: 40px;
				color: #00cc33;
				text-align: center;
				background-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>


8.2.1.4 超链接样式的设计

利用CSS 为超链接重新设置样式，对超链接的a:link和a:visited 进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体 CSS样式的设置。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>所有商品分类</title>
		<style type="text/css">
			#nav{
				width: 150px;
				border: 1px solid red;
				background-color: lightgreen;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			a{
				width: 150px;
				display: block;
				text-decoration: none;
				line-height: 40px;
				color: #00cc33;
				text-align: center;
				background-color: #eeeeee;
				
			}
			a:link, a:visited{
				background-color: #eeeeee;
				color: #00cc33;
			}
			a:hover, a:active{
				background-color: #00cc33;
				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>


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

出式子菜单导航跟下拉子菜单导航一样，是网站设计中常见的子导航设计，只是出式子菜单多用于侧边纵向导航栏。这种子菜单适用于多级别、内容庞杂的网站，可以让整个网站设计更加整洁有序。


8.2.2.1 导航栏的创建

在<nav>的首尾标签之间，使用<div>标签创建菜单范围，结合无序列表<u>和有序列表<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>


8.2.2.2 DIV样式的设计

同8.2.1节的第二步骤(2.DIV 样式的设计)的方法一样。对导航栏所处的 div 和文字的 CSS 样式进行设置后，运行效果如图8-17 所示。
由图8-17可见，列表已经去掉了实心点标记和数字，整个div宽度为150像素，边框为1像素的红色实线，背景颜色为淡绿色,“所有商品分类”大标题为16像素的白色字体,并相对 div 居中对齐。

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			#nav{
				width: 150px;
				padding: 10px;
				background-color:#00cc33;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			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>


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

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

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			#nav{
				width: 150px;
				padding: 10px;
				background-color:#00cc33;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				position: relative;
			}
			ul li ol {
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li:hover ol {
				display: block;
			}
			
		</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.4 列表样式的设计

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


8.2.2.5 超链接样式的设计

利用CSS为超链接重新设置样式，对超链接的a:link和a:visited进行设置，表示超链接未被访问和已访问状态。同时，利用CSS为a:hover和a:active进行样式设置，表示鼠标悬停和活动链接状态时的样式变化。并且，将display属性设置为block，使得超链接成为块级元素，以及字体CSS样式的设置

<!--示例程序8.4-->
<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>出式子导航栏的制作</title>
		<style type="text/css">
			#nav{
				width: 150px;
				padding: 10px;
				background-color:#00cc33;
			}
			h3{
				text-align: center;
				color: #eeeeee;
			}
			ul,ol{
				list-style-type: none;
				margin: 0;
				padding: 0;
			}
			ul li{
				position: relative;
			}
			ul li ol {
				display: none;
				position: absolute;
				left: 150px;
				top: -1px;
			}
			ul li:hover ol {
				display: block;
			}
		a{
			text-decoration: none;
			text-align: center;
            display: block;
			width: 150px;
			line-height: 30px;
			border: 1px solid black;
			background-color: #ffffff;
			color: #00cc33;
			
		}	
		
		ul li a:hover,ul li a:active{
			background:url(img/bg2.JPG);
		}
		ul li ol li a:hover,ul li ol li a:active{
			background-color: #00cc33;
			color: #ffffff;
			background-image: none;
		}
		</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.3 底部固定导航栏

底部导航，顾名思义是放在页脚部位，是网站设计中一种辅助导航。底部导航应用性不是很广，比较常出现在一些活动或个性化的网站当中。并且，底部导航被广泛使用的并不是在PC端中，而是在移动端。如果在PC端中采用底部导航的形式，一般都是采用固定的方式。
底部导航可以减少用户的使用成本，但对于结构复杂有二级或三级导航的网站，就不是很合适。而且，用户浏览的习惯都是从上到下、从左往右的，将导航放置底部，这样的设计比较挑战用户的使用习惯。所以，很多网站在设计的时候首页导航会放在底部，其后的导航就会固定到顶部。


8.3.1 导航栏的创建

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


8.3.2 列表样式的设计

此时会带有<ul>元素的默认实心点标记，可以利用list-style-type 属性去掉，同时设置margin和padding属性。列表选项设置foat属性，让列表元素能够在同一行显示

<!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>
		<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>
	</body>
</html>


8.3.3 菜单固定底部的设计

为了美化文字内容的外观，可以设置div的高度、宽度、背景、边框和文本对齐方式等。为了使导航菜单始终处于页面的最上层，需要设置z-index属性的优先值。为了使导航菜单固定于页面底部，需要设置位置属性positon 和各个方向的位置值。

<!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;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #0000ff;
				color:#ffff00 ;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}
			
			.fix-footer{
				position: fixed;
				bottom: 0;
			
			}
		</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.4 超链接样式的设计

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

<!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;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #0000ff;
				color:#ffff00 ;
			}
			
		</style>
	</head>
	<body>
		<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>
	</body>
</html>


8.3.5 鼠标事件

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

<!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;
			}
			a{
				display: block;
				width: 80px;
				padding: 10px;
				text-decoration: none;
				text-align: center;
			}
			a:link,a:visited{
				background-color: #0000ff;
				color:#ffff00 ;
			}
			a:hover,a:active{
				background-color: #ffff00;
				color: #0000ff;
			}
		</style>
	</head>
	<body>
		<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>
	</body>
</html>


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

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>优名养生馆</title>
		
		<style type="text/css">
			@import url("js/new_file.css")
		</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="index.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>


body{
				background-image: url(img/bg.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-bg.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-size: 20px;
				color: brown;
				text-decoration: none;
				font-weight: bold;
			}
			.footer a:hover{
				background-color: darkgray;
				border-left: 2px solid white;
				border-right: 2px solid white;
				font-size: 16px;
				color: red;
			}

2.

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>优名养生馆</title>
		<style type="text/css">
			@import url("2.css");
		</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>运动养生</li>
								<li>四季养生</li>
								<li>健康检测</li>
							</ul>
						</tr>
						<tr>中医养生</tr>
						<tr>
							<ul>
							<li>经络养生</li>
							<li>特质养生</li>
							<li>特色疗法</li>
							</ul>
						</tr>
					</table>
				</div>
			</nav>
			<div class="main">
				<img src="../img/main.jpg" align="left">
				<p>&nbsp;&nbsp;古人云:善养生者,上养神智、中养形态、下养筋骨。</p >
				<p>&nbsp;&nbsp;养生不是简单的体育锻炼、也不是吃一顿营养餐、打一套太极拳。养生是以调阴阳、和气血、保精神为原则,运用调神、导引吐纳、四时调摄、食养、药养、节欲、服气辟谷等多种方法,以期达到保养、调养、颐养生命,实现人类健康、长寿的目的。</p >
				<p>&nbsp;&nbsp;养生,是养护保养生命,以达长寿。养生是指有目的的通过各种手段护养人体生命的行为,即根据人体生命过程的活动规律所进行的物质与精神的身心护养活动。既包括生理层面的养生,注重身体机能的维护和康复;也包括心理层面的养生,腔调内在精神的平衡和祥和。按照层次划分,生理层面的养生包括养颜、养体、养老:心理层面的养生包括养心、养性、养神。</p >
			</div>
			<hr />
			<div class="footer">版权所有&copy;优名养生馆</div>
		</div>
	</body>
</html>
body{
	background-image: url("../img/bg.jpg");
}
.all{
	margin: 0px auto;
	width: 900px;
}
.top{
	width: 900px;
	height: 225px;
	background-image: url("../img/top-bg.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-bg.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;
}

 

第八章 利用CSS制作导航栏
2301_81876587的博客
11-11 1297
响应式设计是指网页能够根据不同设备屏幕尺寸和分辨率自适应调整布局和样式，以确保在手机、平板和桌面等设备上都能提供良好的用户体验。
css制作动态按钮导航栏,巧妙使用checkbox制作纯css动态导航栏
weixin_42394206的博客
08-03 3136
前提：很多时候、我们的网页都需要一个垂直的导航栏、可以分类、有分类、自然就有展开、关闭的功能、你还在使用jquery操作dom来制作吗？那你就out了！方案：使用checkbox 的 checked 属性、巧妙地制作导航栏结果：我们主要制作成这样这样的的导航栏：首先、我们写出相对的html 由于时间问题、svg没有处理到类中、所以这里给出svg的空标签、大家如果想看效果、可以到我的git里面fo...
html+css实现页面顶部导航栏
caterpie_771881的博客
11-03 1万+
利用html+css制作下拉式的导航栏
第八章 利用css制作导航菜单
2402_87145810的博客
11-13 1051
8.1 水平顶部导航栏水平菜单导航栏式网站设计中应用范围最广的导航设计，一般放置在页面的顶部。水平导航实用性强，几乎所有的类型的网站都可以使用，设计难度较低如果导航过于普通，无法容纳复杂的信息结构，就需要在内容模块较多的情况下，结合下拉子导航使用8.1.1 简单水平导航栏的设计与实现1.导航栏的创建<nav>标签是HTML5新增的文档结构标签，用于标记导航栏，以便后续与网站的其他内容整合，所以常用 <nav>标签在页面上创建导航栏菜单区域。
第八章 利用CSS制作导航栏菜单
whitesandcnm的博客
09-26 4327
水平顶部导航栏（Horizontal Top Navigation Bar）是网页设计中常用的一种导航栏布局，通常位于页面的顶部，以水平的方式排列导航选项。这种布局便于用户快速访问网站的主要部分。常见的设计元素包括菜单项、图标、搜索框、以及用户信息等。
【CSS】实现导航栏（图标+文字）
m0_49442965的博客
11-08 1307
-----------------------这是一条分割线------------------------------------------------blog.csdnimg.cn/ecf7d05b908e4128a0cafe99dd52bd8d.png#pic_center)------------------------这是一条分割线------------------------------------------------li元素就算是清除了样式，原来那个小黑点占据的位置依旧还在。
前端学习———用css实现顶部导航条及下拉框
qq_63606575的博客
03-06 4542
css实现顶部导航条及下拉框一、原理二、HTML三、CSS1.设置外部容器样式2.设置内部容器样式3.设置导航条中的元素4.设置下拉框元素5.设置父元素6.效果展示 一、原理 1. 设置外部盒子来充当导航条 2. 设置内部盒子来盛放导航条中元素 3. 导航条中元素使用无序列表并去掉下划线及小圆点，使其浮动以达到水平摆放的效果 4. 鼠标移入时显示下拉框（隐藏元素），则鼠标移入的元素和下拉框元素为兄弟关系，而且两者必须要有相同的父元素 5. 隐藏的元素使用决定定位，兄弟元素使用相对定位，使隐藏的元素相
蓝色CSS3二级导航菜单特效代码
03-20
【蓝色CSS3二级导航菜单特效代码】是一种网页设计技术，主要应用于创建美观且功能丰富的网站导航栏。在网页设计中，导航菜单起着至关重要的作用，它帮助用户快速浏览和定位网站的不同部分。这个特效代码利用了CSS3的...
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
m0_71491195的博客
07-20 1万+
css导航栏固定顶部两种情况,及绝对定位，相对定位，固定定位和粘性定位的特性及区别
页面顶部导航栏css样式布局
galaxyfanqi的博客
11-05 2062
css样式布局
CSS3固定顶部定位滚动导航.zip
07-04
CSS3固定顶部定位滚动导航适用于手机端网站，效果很常见，但很实用。
CSS3固定顶部定位滚动导航特效代码
03-20
CSS3固定顶部定位滚动导航适用于手机端网站，效果很常见，但很实用。
CSS+HTML 顶部导航栏实现
热门推荐
man_zuo的博客
09-20 17万+
导航栏的实现、固定顶部导航栏、二级菜单实现 效果图： 代码实现： &amp;lt;html&amp;gt; &amp;lt;head&amp;gt; &amp;lt;style type=&quot;text/css&quot;&amp;gt; .top{ /* 设置宽度高度背景颜色 */ height: 50px; width:100
CSS 导航栏
冷月醉雪的博客
05-25 1万+
垂直 水平   导航栏    熟练使用导航栏，对于任何网站都非常重要。    使用CSS你尅转换成好看的导航栏而不是枯燥的HTML菜单。 导航栏=链接列表    作为标准的HTML基础一个导航栏是必须的。    导航栏基本上是一个链接链接，所以使用&lt;ul&gt;和&lt;li&gt;元素非常有意义： &lt;!DOCTYPE html&gt; &lt;html&g...
div+css 顶部导航效果
Sunnyyou2011
05-29 1236
实现导航效果  #mydiv{   margin:2px,4px,2px,4px;   padding:2px,0px,2px,0px;   border: #fff 1px solid;   background: #dfdfdf;   height:25px;   text-align:center;  }  #mydiv ul{   display:inline;
纯CSS代码制作跟随滚动的顶部导航栏,无JS代码
前端一线搬运工的博客
04-23 1万+
以有妖气为例,让顶部导航栏固定滚动在页面上.1.效果如下:初始化↓↓↓滚动效果↓↓↓2.实现思路--需求:  顶部只有一个且只需要移动一个导航栏实现思路:  给导航栏添加固定定位(fixed),这时候脱离了标准流浮动起来了;--问题:  底下的盒子会往上跑占据导航栏原来的位置解决办法:  给导航栏下面的盒子添加顶部内边距(padding-top),值等于导航栏的高度.3.css代码.top-nav...
使用css让导航栏在页面顶端固定
weixin_51264427的博客
08-06 2245
在导航栏上给个固定定位：position: fixed； 由于固定定位是脱离标准流的，所以，它所固定的位置会遮住了下方内容的一部分。 解决方法：内容部分设置margin-top，具体的值为导航的高度。 此时内容部分不会被遮住，但导航并非位于网页顶端。解决方法：对导航设置top:0。 导航部分 position: fixed; top: 0; 内容部分 margin-top: 导航高度px; ...
Vue 3 组件通信全方案详解：Props/Emit、provide/inject、事件总线替代与组合式函数封装
小二丶的博客
01-05 935
本文系统梳理Vue3中7种组件通信方式，重点剖析props/emits、provide/inject、v-model等核心方案，并通过实战案例演示应用场景。文章包含完整TypeScript代码实现、性能对比数据及5个常见反模式避坑指南。主要内容包括：父子组件通信（props/emits）、跨层级通信（provide/inject）、双向绑定（v-model）、逻辑复用（Composables）以及全局状态管理（Pinia）。
前端使用 clip-path + linear-gradient 实现矩形对角线渐变分区
最新发布
m0_46893049的博客
01-05 154
需要 overflow: hidden 防止溢出。clip-path 不支持 IE。上层：另一个线性渐变 +底层：一个线性渐变背景。控制对角线方向和位置。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值