CSS/JavaScript导航栏

最新推荐文章于 2023-07-04 11:04:04 发布

原创最新推荐文章于 2023-07-04 11:04:04 发布 · 446 阅读

7 ·

CC 4.0 BY-SA版权

文章标签：

#CSS

CSS 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍使用CSS和JavaScript创建网页导航栏的过程，包括样式设计和交互效果实现，适合初学者学习。

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

网页导航栏制作

导航栏在网页中是最基本的方法，虽然用的知识不是很多，但是初学者必不可少的部分，下面我将演示我写的导航栏样式，不是多美，望包涵。
1.1 导航栏效果图
在这里插入图片描述
1.2 CSS方式书写导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#nav{				
				height: 54px;
				width: 918px;
				margin: 10px auto;
				background-color: springgreen;
			}
			ul{
				list-style-type: none;			
			}
			  li{
				float: left;
				border: 1px solid red;				
			}
			.m{
				background-color: red;
			}
			a{
				display: block;
				text-decoration: none;
				line-height: 32px;
				text-align: center;
				font-size: 20px;	
				padding: 10px;
			}
			li a:hover{
				background-color: red;
				font-weight: bold;
			}
		</style>
	</head>
	<body>
		<div id="nav">		
				<ul >
					<li class="m"><a href="javascript:;">学院首页</a>
					</li>
					<li >	
						<a href="javascript:;">学校概况</a>	
					</li>
					<li >
						<a href="javascript:;">学校简介</a>
					</li>
					<li ><a href="javascript:;">现任领导</a>							
					</li>
					<li>
						<a href="javascript:;">校园风光</a> 
					</li>
					<li>
						<a href="javascript:;">国际交流</a>
					</li>
					<li >
						<a href="javascript:;">社会教育</a>
					</li>
					<li >
						<a href="javascript:;">移动通信</a>
					</li>
					<li >
						<a href="javascript:;">信息社会</a>
					</li>
				</ul>		
		</div>
	</body>
</html>

1.3 javascript书写导航栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title></title>
		<style type="text/css">
			*{
				padding: 0;
				margin: 0;
			}
			#nav{				
				height: 54px;
				width: 918px;
				margin: 10px auto;
				background-color: springgreen;
			}
			ul{
				list-style-type: none;			
			}
			  li{
				float: left;
				border: 1px solid red;				
			}
			.m{
				background-color: red;
			}
			a{
				display: block;
				text-decoration: none;
				line-height: 32px;
				text-align: center;
				font-size: 20px;	
				padding: 10px;
			}
			li a:hover{
				background-color: red;
				font-weight: bold;
			}
		</style>
		<script type="text/javascript">
			window.οnlοad=function()
			{
				var nav=document.getElementById("nav");
				var li=nav.getElementsByTagName("li");
				for(var i=0;i<li.length;i++)
				{
					li[i].index=i;
					//鼠标移动到导航栏
					li[i].οnmοusemοve=function()
					{
						//说明是那个导航栏被选中
						num=this.index;
						for(var i=0;i<li.length;i++)
						{
							//去除样式
							li[i].className='';
						}
						//给鼠标移动时的样式
						li[num].className='m';
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="nav">		
				<ul >
					<li class="m"><a href="javascript:;">学院首页</a>
					</li>
					<li >	
						<a href="javascript:;">学校概况</a>	
					</li>
					<li >
						<a href="javascript:;">学校简介</a>
					</li>
					<li ><a href="javascript:;">现任领导</a>							
					</li>
					<li>
						<a href="javascript:;">校园风光</a> 
					</li>
					<li>
						<a href="javascript:;">国际交流</a>
					</li>
					<li >
						<a href="javascript:;">社会教育</a>
					</li>
					<li >
						<a href="javascript:;">移动通信</a>
					</li>
					<li >
						<a href="javascript:;">信息社会</a>
					</li>
				</ul>		
		</div>
	</body>
</html>

1.4 总结

在用css抒写导航栏时，导航栏第一个应该被突出表示，但是如果单独采用css的方式但是乌发实现，会出现第一个常亮，但是点击后面的时候，后面虽然会突出显示，但是第一个去不会消失，通过采用JavaScript的方式可以解决，大家可以自己尝试一下。
遇到的困难
1、用css的方式书写导航栏，会出现上述的问题，现在还没有解决。
2、采用JavaScript的方式时，对标签li设置class 类，但是在前面的style样式在的标签两者的颜色会出现覆盖的问题，我是单独拿出来写的，可以避免这种状况。
3.写程序时要有思路！！！