CSS 编程基础 | 网页开发

简介

在这个实验中，我们将探索 CSS 编程的基础知识。本实验的目的是帮助你扎实理解 CSS 语法、选择器、属性和值。通过完成本实验，你将能够为 HTML 元素设置样式并创建视觉上吸引人的网页。

这是一个实验（Guided Lab），提供逐步指导来帮助你学习和实践。请仔细按照说明完成每个步骤，获得实际操作经验。根据历史数据，这是一个初级级别的实验，完成率为 100%。获得了学习者 100% 的好评率。

汉堡按钮

虚拟机中已经提供了 index.html 和 style.css。

要创建一个在悬停时转换为关闭按钮的汉堡菜单，请按照以下步骤操作：

使用一个 .hamburger-menu 容器 div，其中包含顶部、底部和中间的条。
将容器设置为 display: flex 并使用 flex-flow: column wrap。
使用 justify-content: space-between 在条之间添加间距。
使用 transform: rotate() 将顶部和底部的条旋转 45 度，并使用 opacity: 0 在悬停时使中间的条渐变消失。
使用 transform-origin: left 使条围绕左点旋转。

以下是相应的 HTML 代码：

<div class="hamburger-menu">
  <div class="bar top"></div>
  <div class="bar middle"></div>
  <div class="bar bottom"></div>
</div>

以下是 CSS 代码：

.hamburger-menu {
  display: flex;
  flex-flow: column wrap;
  justify-content: space-between;
  height: 2.5rem;
  width: 2.5rem;
  cursor: pointer;
}

.hamburger-menu.bar {
  height: 5px;
  background: black;
  border-radius: 5px;
  margin: 3px 0px;
  transform-origin: left;
  transition: all 0.5s;
}

.hamburger-menu:hover.top {
  transform: rotate(45deg);
}

.hamburger-menu:hover.middle {
  opacity: 0;
}

.hamburger-menu:hover.bottom {
  transform: rotate(-45deg);
}

请点击右下角的“Go Live”以在端口 8080 上运行网络服务。然后，你可以刷新“Web 8080”标签页来预览网页。

总结

恭喜你！你已经完成了汉堡按钮实验。你可以在 LabEx 中练习更多实验来提升你的技能。

网页样式设计的 CSS 基础

简介

汉堡按钮

总结