小导航栏--css项目这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。代码思路先给了整个

这是我参与「掘金日新计划 · 4 月更文挑战」的第19天，点击查看活动详情。

代码思路

先给了整个图设置了背景样式（包括颜色，格式等），再在网页上画出了一个盒子，对盒子的部分进行均分，写上想要的几个板块，比如点赞，转发，评论，收藏。之后要对这几个板块的样式进行设计，最后做出鼠标浮动到模块上，就可以有下拉框的样式。

知识点展示

html：ul,li,span css:元素选择器，justify-content，background-image: linear-gradient颜色渐变，opacity透明度,translate透明度

效果展示

代码展示

<html lang="en">

	<head>
		<meta charset="UTF-8">
		<style>
			* {
				margin: 0;
				padding: 0;
				list-style: none;
				font-size: 20px;
				color: #fff;
			}

			body {
				height: 100vh;
				display: flex;
				align-items: center;
				justify-content: center;
				/* 背景颜色的改变 */
				background-image: linear-gradient(to left, #C4FCEF, #00C9A7);
			}

			.box {
				display: flex;
				justify-content: center;
			}

			.button,
			/* 中间框的更改 */
			.middle {
				background-color: #50536e;
				width: 200px;
				height: 70px;
				text-align: center;
				line-height: 70px;
				transition: .1s;
			}

			.middle::before {
				content: '';
				display: block;
				width: 90px;
				height: 90px;
				/* 喜闻乐见的画圆环节 */
				
				transform: translate(25px, -25px);
				border: 10px solid #fff;
			}

			.information {
				width: 220px;
				background-color: #845EC2;
				transform: translate(-20px, -200px);
				border-radius: 10px;
				padding: 20px 0;
				opacity: 0;
				line-height: 1;
				height: 0;
				transition: .3s;
				

			}
                        做出当鼠标浮动上去，就可以出现样式的特效
			.button:hover {
				background-color: #845EC2;
			}

			.button li:hover {
				background-color: #FBEAFF;
			}

			.button ul li {
				height: 0;
				transition: .2s;
				opacity: 0;
				background-color: #FBEAFF;
			}

			.button:hover li {
				height: 65px;
				opacity: 1;
			}

			.middle:hover .information {
				opacity: 1;
				line-height: 65px;
				transform: translate(-20px, -10px);
				height: auto;
			}
		</style>
	</head>

	<body>
		<ul class="box">
			<li class="button">
				<span>点赞</span>
				<ul>

					<li>要点赞哦</li>
				</ul>
			</li>
			<li class="button">
				<span>转发</span>
				<ul>

					<li>要转发哦</li>
				</ul>
			</li>
			<li class="middle">
				<ul class="information">
					<li>猜猜我是谁</li>
				</ul>
			</li>
			<li class="button">
				<span>评论</span>
				<ul>
					<li>要评论哦</li>
				</ul>
			</li>
			<li class="button">
				<span>收藏</span>
				<ul>
					<li>要点赞哦</li>
				</ul>
			</li>
		</ul>
	</body>

</html>

总结一下啊，整个项目比较简单，注意几个css语法就欧克了