HTML+CSS制作导航栏

嗯嗯=

已于 2023-10-30 21:59:14 修改

阅读量5.1k

点赞数 12

文章标签： css html css3

于 2023-10-13 17:08:46 首次发布

本文链接：https://blog.csdn.net/qq_64867440/article/details/133812993

版权

本文详细展示了HTML和CSS的代码片段，特别是如何创建一个响应式的导航栏，使用无序列表、li元素和CSShover效果来实现下拉菜单。还介绍了CSS的font-family、display、flexbox、text-align等关键属性的应用。

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

一.效果展示

1.1效果展示

二.项目代码

2.1HTML

<!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>

ul 和 li 是 HTML 中的列表标签，常用于制作无序列表和有序列表；

无序列表使用 ul 标签来定义，每个列表项使用 li 标签包裹；

这里的每个 li 标签表示一个无序列表项，浏览器默认会在列表项前面添加一个黑色实心圆点。如果需要改变实心圆点的样式，可以使用 CSS 的 list-style 属性；

2.1CSS

/* 导航条 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;
	/* 显示元素 */
}

2.2css用到的相关知识

`2.2.1` `font-family:`

是CSS属性之一，用于指定页面上元素的字体系列（也称为字体族或字体组）。字体系列通常由一个或多个字体名称组成，以逗号分隔。如果第一个字体不可用，浏览器将尝试使用下一个字体，以此类推，直到找到可用的字体。如果没有可用的字体，则使用用户机器上默认的字体。

2.2.2 :hover伪类：

下拉菜单的显示和隐藏可以使用 CSS 的 :hover 伪类来实现；

在使用:hover时需要注意以下几点：

该伪类通常应用于交互式元素上，如链接和按钮等。
它只在用户使用鼠标时生效，因此对于触摸设备上的用户来说，它是无效的。
当鼠标移开该元素时，hover样式将不再应用。
:hover不支持所有元素。例如，如果想要为div元素添加hover效果，必须确保该元素具有display属性，否则:hover将无法生效。

2.2.3display：

CSS中的display属性用于定义HTML元素的显示方式。通过设置不同的display属性值，可以控制元素的布局方式和显示状态。常见的display属性值包括：

1block：块状元素，会独占一行，可以设置宽度、高度、margin、padding，不能和其他块状元素共存。
inline：行内元素，不会独占一行，宽度和高度由内容决定，不能设置宽度、高度、margin-top和margin-bottom等。
inline-block：内联块状元素，可以设置宽度、高度、margin、padding等，会像行内元素一样排列，但也可以像块状元素一样设置宽高等属性。
flex：弹性盒子，通过设置flexbox布局，可以方便地实现元素的弹性排列和对齐。

flexbox布局：

Flexbox布局是一种CSS3中的新布局模式，它可以让元素在容器中自动对齐、填充、分配和调整空间，使布局更加灵活和适应不同屏幕和设备。

Flexbox布局中有两个主要的概念：容器和项目。容器是指应用了Flexbox布局的父元素，而项目则是指该容器中使用Flexbox布局的子元素。

在容器中应用了Flexbox布局后，可以通过以下几个属性来控制项目的排列和对齐方式：

flex-direction：指定了项目在容器中的排列方向，可选值为row、row-reverse、column、column-reverse。
justify-content：指定了项目在容器中沿主轴方向的对齐方式，可选值为flex-start、flex-end、center、space-between、space-around。
align-items：指定了项目在容器中沿交叉轴方向的对齐方式，可选值为flex-start、flex-end、center、baseline、stretch。
flex-wrap：指定了项目是否可以换行，可选值为nowrap、wrap、wrap-reverse。
align-content：当项目在容器中换行时，指定了各行之间的对齐方式，可选值为flex-start、flex-end、center、space-between、space-around、stretch。

通过这些属性的组合，可以实现各种复杂的自适应布局效果，使页面在不同屏幕和设备上展现出更好的适应性和美观性。