HTML+CSS制作导航栏

我不是女神ヾ 2024-02-22 09:21 13阅读 0赞

## 一.效果展示 ##

1.1效果展示

![5a265be7407d49bc968708b1421c6c7a.png][]

## 二.项目代码 ##

### 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布局后，可以通过以下几个属性来控制项目的排列和对齐方式：

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

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

*  none：元素不可见且不占据空间，相当于遮罩层的效果。
 *  table：将元素解析为表格，在表格中按照单元格方式排列。
 *  table-row：将元素解析为表格行。
 *  table-cell：将元素解析为表格单元格。

除了上述常见的display属性值，还有一些其他的值，如grid、list-item、run-in等，可以根据需要选择使用。

当鼠标悬浮在列表项上时，使用了

*  `display: none来隐藏下拉菜单；`
 *  `display: block`显示下拉菜单；

下拉菜单中的列表项和链接样式可以自行修改。

##### 2.2.4 text-align #####

text-align是一个CSS属性，用于指定文本在其包含元素中的水平对齐方式。它可以应用于任何元素，包括段落、标题、表格单元格等。

text-align属性的可用值包括：

*  left：文本左对齐；
 *  center：文本居中对齐；
 *  right：文本右对齐；
 *  justify：文本两端对齐。

##### 2.2.5 盒子模型 #####

盒子模型描述了一个 HTML 元素的可视化表示。每个 HTML 元素就像一个矩形的盒子，由四个部分组成：内容区域、内边距（padding）、边框（border）和外边距（margin）。

*  内容区域（Content）：指元素的实际内容，比如文本、图像等。
 *  内边距（Padding）：指内容区域和边框之间的空间，可以设置上下左右四个方向的内边距。
 *  边框（Border）：包围着内容和内边距的线，可以设置宽度、样式、颜色等属性。
 *  外边距（Margin）：包围着边框之外的空间，可以设置上下左右四个方向的外边距。

##### 2.2.6 Float #####

float\`是 CSS 的一个属性，用于控制元素在页面中的浮动位置。当对一个元素设置 \`float\` 属性时，该元素会脱离文档流，向左或向右浮动，直到遇到父元素边缘或者另一个被浮动了的元素为止。

常见的应用场景包括图片与文字的排列、多列布局等。在实现这些布局时，需要将显示在页面上的元素设置为浮动状态，让其他元素绕过它显示。

[5a265be7407d49bc968708b1421c6c7a.png]: https://image.dandelioncloud.cn/pgy_files/images/2024/02/22/51e788788c0249c9af6d8e7407f78915.png