前端历程(三)---页面小练习之导航栏加下拉菜单

最新推荐文章于 2024-05-29 12:36:50 发布

Betray.

最新推荐文章于 2024-05-29 12:36:50 发布

阅读量1.8k

点赞数 9

分类专栏：前端文章标签： display 导航条下拉菜单

本文链接：https://blog.csdn.net/Betray2/article/details/84073343

版权

前端专栏收录该内容

7 篇文章 0 订阅

订阅专栏

前言

预备环节完成后就要开始练习写一些小页面或是小东西，首先是做一个简单的导航栏及下拉菜单的小练习。在此之前也会先介绍一下一个比较好用的css属性。

display：flex

display，display属性设置一个元素应如何显示。隐藏一个元素可以通过把display属性设置为"none"，且隐藏的元素不会占用任何空间。

display:block – 显示为块级元素
display:inline – 显示为内联元素
display:inline-block – 显示为内联块元素，表现为同行显示并可修改宽高内外边距等属性

块级元素，占用了全部宽度，在前后都是换行符。比如：div，p，h1，ul，li等。

总是独占一行，表现为另起一行开始，而且其后的元素也必须另起一行显示;
宽度(width)、高度(height)、内边距(padding)和外边距(margin)都可控制;

内联元素，只需要必要的宽度，不强制换行。比如：span，a，input，select等。

和相邻的内联元素在同一行;
宽度(width)、高度(height)、内边距的top/bottom(padding-top/padding-bottom)和外边距的top/bottom(margin-top/margin-bottom)都不可改变，就是里面文字或图片的大小;

现在我们进入正题：Flex是Flexible Box的缩写，意为"弹性布局"，用来为盒状模型提供最大的灵活性，设为Flex布局以后，子元素的float、clear和vertical-align属性将失效。

flex-direction　　容器内项目的排列方向(默认横向排列)
flex-wrap　　容器内项目换行方式
flex-flow　　以上两个属性的简写方式
justify-content　　项目在主轴上的对齐方式
align-items　　项目在交叉轴上如何对齐
align-content　　定义了多根轴线的对齐方式。如果项目只有一根轴线，该属性不起作用。

推荐一个display：flex讲解比较细致的一篇文章：https://www.cnblogs.com/xuyuntao/articles/6391728.html

导航栏加下拉菜单

如果不用display：flex也可以使用float属性也可以让菜单并排显示。这里习惯了使用div标签，也可以换成ul和li标签进行排布。

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>index</title>
	<style>
		* {
			margin: 0;
			padding: 0;
		}
				
		#menu {
			display: flex;
			margin: 20vh 10vw;
			height: 5vh;
			background-color: #222222;
		}
	
		.title {
			display: block;
			width: 10vw;
			padding: 1vh;
			text-align: center;
			color: #FFFFFF;
			text-decoration: none;
		}
	
		.con {
			position: absolute;
			display: none;
			background-color: #222222;
		}
	
		.con a {
			display: block;
			padding: 1vh;
			width: 10vw;
			text-align: center;
			color: #FFFFFF;
			text-decoration: none;
		}
	
		.con a:hover {
			background-color: #474747;
		}
	
		.title:hover {
			background-color: #474747;
		}
	
		.down:hover .con {
			display: block;
		}
	</style>
</head>
<body>
	<div id="menu">
		<div class="down">
			<a href="#" class="title">菜单一</a>
			<div class="con">
				<a href="#">内容1</a>
				<a href="#">内容2</a>
				<a href="#">内容3</a>
				<a href="#">内容4</a>
			</div>
		</div>
		<div class="down">
			<a href="#" class="title">菜单二</a>
			<div class="con">
				<a href="#">内容1</a>
				<a href="#">内容2</a>
				<a href="#">内容3</a>
				<a href="#">内容4</a>
			</div>
		</div>
		<div class="down">
			<a href="#" class="title">菜单三</a>
			<div class="con">
				<a href="#">内容1</a>
				<a href="#">内容2</a>
				<a href="#">内容3</a>
				<a href="#">内容4</a>
			</div>
		</div>
	</div>
</body>
</html>

效果如下：
在这里插入图片描述

Betray.

关注

9
点赞
踩
14

收藏

觉得还不错? 一键收藏
1
评论
前端历程(三)---页面小练习之导航栏加下拉菜单

前言预备环节完成后就要开始练习写一些小页面或是小东西，首先是做一个简单的导航栏及下拉菜单的小练习。在此之前也会先介绍一下一个比较好用的css属性。display：flexdisplay，display属性设置一个元素应如何显示。隐藏一个元素可以通过把display属性设置为&quot;none&quot;，且隐藏的元素不会占用任何空间。display:block – 显示为块级元素display:i...
复制链接

扫一扫

专栏目录