css横向导航菜单（当前页菜单背景高亮显示）

最新推荐文章于 2022-02-21 10:01:07 发布

Learner

最新推荐文章于 2022-02-21 10:01:07 发布

阅读量2.2k

点赞数

分类专栏： css学习文章标签： css menu xhtml string float html

本文链接：https://blog.youkuaiyun.com/unddone8373229/article/details/7366539

版权

本文介绍如何使用CSS创建一款横向导航菜单，并在当前页面时实现背景高亮效果。通过设置适当的样式和浮动属性，使得菜单项在网页中水平排列，同时利用字符串匹配来突出显示当前选中的菜单项。

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

效果图：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
</head>
<style type="text/css">
li{
	display:inline;
}
li a{
	float:left;
	display:block;
	text-decoration:none;
	width:100px;
	text-align:center;
	color:#FFF;
	padding:10px;
	border-right:1px solid #FFF;
}
.menu01{
	background-color:#C63;
}
.menu02{
	background-color:#000;
}
</style>

<body οnlοad="changeMenu(1)">
	<ul>
		<li><a href="#"  οnclick="changeMenu(1)" id=&