使用CSS+HTML完成导航栏

最新推荐文章于 2024-10-15 22:21:38 发布

劫鲸

最新推荐文章于 2024-10-15 22:21:38 发布

阅读量180

点赞数 3

文章标签： css html 前端

本文链接：https://blog.csdn.net/2302_76907945/article/details/137977798

版权

本文详细描述了如何使用HTML和CSS来构建一个响应式的导航栏，包括头部链接、子菜单的折叠与显示以及样式调整，展示了创建网站顶部导航栏的基本结构和美化方法。

摘要由CSDN通过智能技术生成

1.HTML


<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<link rel="stylesheet" type="text/css" href="../css/style.css"/>
		<title></title>
	</head>
	<body>
		<nav id="navbar">
			<ul>
				<li><a href="#">网站首页</a></li>
				<li>
					<a href="#">学院概况</a>
					<ul>
						<li><a href="#">学院简介</a></li>
						<li><a href="#">学院荣誉</a></li>
						<li class="a"><a href="#">国家级示范性软件学院</a></li>
						<li class="a"><a href="#">高技能人才培训基地</a></li>
			            <li><a href="#">办公电话</a></li>
						<li><a href="#">联系方式</a></li>
						<li><a href="#">视频宣传</a></li>
					</ul>
					</li>
				<li>
					<a href="#">新闻中心</a>
					<ul>
						<li><a href="#">学校要闻</a></li>
						<li><a href="#">系部动态</a></li>
						<li><a href="#">通知公告</a></li>
					</ul>
					</li>
				<li><a href="#">机构设置</a></li>
				<li>
					<a href="#">教学科研</a>
					<ul>
						<li><a href="#">教务管理系统</a></li>
						<li><a href="#">精品课程</a></li>
						<li><a href="#">教学辅助平台</a></li>
						<li><a href="#">网络教学平台</a></li>
					</ul>
					</li>
				<li><a href="#">团学在线</a></li>
				<li>
					<a href="#">招生就业</a>
					<ul>
						<li><a href="#">招生信息网</a></li>
						<li><a href="#">就业信息网</a></li>
						<li><a href="#">空中乘务</a></li>
					</ul>
					</li>
				<li>
					<a href="#">公共服务</a>
					<ul>
					<li><a href="#">图书馆</a></li>
					<li><a href="#">信息公开</a></li>
					<li><a href="#">建行缴费</a></li>
					</ul>
				</li>
				<li><a href="#">信息公开</a></li>
				<li><a href="#">统一信息门户</a></li>
			</ul>
		</nav>
	</body>
</html>

2.CSS


body,ul,li{
	margin:0;
	padding:0;
	list-style: none;
}
body{
	background: url("../img/bodybg.jpg");/* ..是退出css文件夹在img文件夹里寻找到bodybg这张图片 */
	font-family: '微软雅黑';
	
}
 
.a{
	white-space: nowrap;
}
#navbar{
	width:100%;
	height:42px;
	background:rgb(28, 75, 169);
	
}
#navbar ul{
	background:rgb(28, 75, 169);
	width:1500px;
	margin: 0 auto;/* 水平居中 */
}
#navbar ul li{/* 父子选择器.这里设置的是ul里的li （一级菜单），如 网站首页、学院概况*/
	width:150px;
	height:42px;
	padding-left: 0;
	display: inline-block;
	text-align: center;
}
#navbar>ul>li{/* 子代选择器，这里的li就是一级菜单，只让一级菜单水平，二级菜单垂直 */
	float:left;/* 浮动:让元素依次水平 */
}
#navbar a{
	text-decoration: none;/* 去掉下划线 */
	/* text-decoration: underline; 下划线*/
	/* text-decoration: overline;线在上面 */
	color: #fff;/* 字体颜色为白色 */
	text-align: center;
	line-height: 42px;/*行高*/
	font-size: 14px;
	
}
#navbar a:hover{/* 伪类选择器 ，设置鼠标悬停时的样式*/
	text-decoration: underline;
	color:orange;
}
#navbar li ul{/* 父子选择器,设置的是li里的ul（二级菜单），如学校要闻、系统概述 */
	display: none;/* 隐藏元素 */
	 width: 120px;
	 text-align: center;
	 float: left;
	/* text-align: left; */
}
#navbar>ul>li:hover ul{/*hover的不是li，而是li的孩子ul （通过li选择到孩子里的ul） */
	display:block;
	width: 160px;
	font-size: 6px;
	/* 显示元素 */
}

效果展示