CSS&JavaScript 第三章：CSS应用_javascript、css与dom基础 (实验)(3) css应用-优快云博客

本文链接：https://blog.youkuaiyun.com/Impt_gofly/article/details/102911489

本文详细介绍了使用CSS进行菜单设计的步骤，包括列表项的创建、样式调整及JavaScript的运用。并通过实例展示了如何创建一个导向菜单条，使当前菜单项背景变为浅蓝色。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

CSS用于菜单设计

菜单的设计步骤：
（1）以列表项的形式写出菜单的内容，列表项中包含有链接。
（2）然后，通过样式表的定义改变菜单的表现形式，如去掉列表项符号，在菜单之间加上分割线，为菜单项加上背景色或图片等。
（3）如果需要，加上JavaScript程序,以便更好的控制菜单。

简单的导向菜单条

制作一个简单的导向菜单条。例如在这里插入图片描述
其中，“主页内容”的链接将打开home的网页；“搜索引擎”的链接将打开search的网页；“联系我们”的链接将打开contact的网页；上述3个网页中都包含有该菜单条，但是当前所在菜单项背景为浅蓝色。
程序文件名：
home.html
search.html
contact.html
menu.css
步骤如下：

"""
此为home.html内容
"""

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>主页</title>
	<link rel="stylesheet" href="menu.css" type="text/css"> // 链接到css外部样式表
</head>
<body>
	<div>
		<ul>
			<li class="first"><a href="home.html" class="home">主页内容</a></li>
			<li><a href="search.html" class="search">搜索引擎</a></li>
			<li><a href="contact.html" class="contact">联系我们</a></li>
		</ul>
	</div>
	<div>
		<p>这是“主页内容”</p>
	</div>
</body>
</html>

"""此为search.htm的额内容"""
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>search</title>
</head>
<body id="search">
	<div id="menu">
		<ul>
			<li class="first"><a href="ch3_10_home.htm" class="home">主页内容</a></li>
			<li><a href="ch3_10_search.htm" class="search">搜索引擎</a></li>
			<li><a href="ch3_10_contact.htm" class="contact">联系我们</a></li>
		</ul>	
	
	</div>
	<div id="search">
		<p>
			这是“搜索引擎”的内容；
		</p>

	</div>

</body>
</html>

"""此为contact.htm的内容"""
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>contact</title>
</head>
<body id="contact">
	<div id="menu">
		<ul>
			<li class="first"><a href="ch3_10_home.htm" class="home">主页内容</a></li>
			<li><a href="ch3_10_search.htm" class="search">搜索引擎</a></li>
			<li><a href="ch3_10_contact.htm" class="contact">联系我们</a></li>
		</ul>	
	
	</div>
	<div id="contact">
		<p>
			这是“联系我们”内容！
		</p>
	</div>
</body>
</html>

"""此为menu.css内容"""
#menu ul{
	margin: 0;
	radding: 0;

}

#menu li{

	padding: 0;
	margin: 0;
	list-style:none;	/*取消列表项符号	*/
	float: left;		/*横向排列*/

}
#menu  li a{

	display: block;		/*块状显示，以便背景色充满*/
	margin: 0 1px 0 0;
	padding: 4px 10px;
	width: 80px;
	background: #5970B2;
	color: #fff;
	text-align: center;
	text-decoration: none;

}

#menu li a:hover{

	background: #49A3ff;

}
#content{

	clear:both;	/*清楚横向排列*/
	margin: 10px;
}

#home a.home, #search a.search,#contact a.contact{

	background: #49A3ff;
	text-decoration: none;	/*取消下划线*/

	cursor: default;		/*取消链接光标*/
}