前端项目1-01：下拉菜单

航Hang*

已于 2025-05-12 22:10:48 修改

阅读量329

点赞数 5

分类专栏： webstorm前端项目文章标签：前端 html5 css3 webstorm

于 2025-04-10 09:19:28 首次发布

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文链接：https://blog.youkuaiyun.com/2401_82750246/article/details/147109065

版权

webstorm前端项目专栏收录该内容

3 篇文章

订阅专栏

目录

一.代码显示

二.效果图：

三.代码解析

1.文档声明与 HTML 结构

4.CSS样式部分

使用工具：webstorm

编程语言：html5+css3

一.代码显示

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    ul,li{
      padding: 0;
      margin: 0;
      list-style: none;
    }
    body{
      margin: 0;
      width: 100vw;
      height: 100vh;
      background: linear-gradient(to right, #f8b2cf , #a2eaea);
    }
    .box{
      display: flex;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    .nav{
      width: 1000px;
      height: 65px;
      background-color: #6bcad0;
      display: flex;
    }
    .nav a{
      display: flex;
      justify-content: center;
      align-items: center;
      height: 100%;
      color: #fff;
      font-size: 18px;
    }
    .nav>.item{
      width: 20%;
      height: 100%;
      position: relative;
      transition: .4s;
    }
    .list{
      position: absolute;
      top:65px;
      width: 100%;
      overflow: hidden;
      max-height: 0px;
      transition: .4s;
      border-radius: 0 0 10px 10px;
      background-color: #ea7592;
    }
    .itemTwo{
      height: 65px;
      transition: .4s;
    }
    .nav>.item:hover{
      background-color: #ea7592;
    }
    .nav>.item:hover>.list{
      max-height: 500px;
    }
    a{
      text-decoration: none;
    }
    .itemTwo:hover{
      background-color: rgba(255,255,255,.3);
    }
  </style>
</head>
<body>
<div class="box">
  <ul class="nav">
    <li class="item">
      <a href="#">人工智能</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">python</a></li>
        <li class="itemTwo"><a href="#">java</a></li>
      </ul>
    </li>
    <li class="item">
      <a href="#">前端技术</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">HTML语言</a></li>
        <li class="itemTwo"><a href="#">CSS语言</a></li>
        <li class="itemTwo"><a href="#">JS语言</a></li>
      </ul>
    </li>
    <li class="item">
      <a href="#">数据库技术</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">sqlserver</a></li>
        <li class="itemTwo"><a href="#">Mysql</a></li>
      </ul>
    </li>
    <li class="item">
      <a href="#">后端技术</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">java语言</a></li>
        <li class="itemTwo"><a href="#">c#语言</a></li>
        <li class="itemTwo"><a href="#">c++语言</a></li>
      </ul>
    </li>
    <li class="item">
      <a href="#">开发框架</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">vue框架</a></li>
        <li class="itemTwo"><a href="#">React框架</a></li>
        <li class="itemTwo"><a href="#">spring框架</a></li>
      </ul>
    </li>
  </ul>
</div>
</body>
</html>

二.效果图：

三.代码解析

1.文档声明与 HTML 结构

<!DOCTYPE html>
<html lang="en">

<!DOCTYPE html>：这是文档类型声明，告知浏览器当前文档使用的是 HTML5 标准。
<html lang="en">：HTML 文档的根标签，lang="en" 表明文档的语言为英语。

2.头部部分

<head>
  <meta charset="UTF-8">
  <title>Title</title>

<meta charset="UTF-8">：指定文档的字符编码为 UTF - 8，确保文档能正确显示各种语言字符。
<title>Title</title>：设置浏览器标签页上显示的页面标题。

3.主体部分

<body>
<div class="box">
  <ul class="nav">
    <li class="item">
      <a href="#">人工智能</a>
      <ul class="list">
        <li class="itemTwo"><a href="#">python</a></li>
        <li class="itemTwo"><a href="#">java</a></li>
      </ul>
    </li>
    <!-- 其他导航项类似 -->
  </ul>
</div>
</body>

<body> 标签包含了页面的可见内容。
<div class="box"> 是一个容器，用于将导航栏居中显示。
<ul class="nav"> 是一个无序列表，作为导航栏的容器。
<li class="item"> 是导航栏中的每个导航项，包含一个链接和一个下拉列表。
<a href="#"> 是导航项的链接，href="#" 表示点击后不进行跳转。
<ul class="list"> 是下拉列表的容器，包含多个 <li class="itemTwo"> 列表项。
<li class="itemTwo"> 是下拉列表中的每个列表项，包含一个链接。

4.CSS样式部分

ul,li{
  padding: 0;
  margin: 0;
  list-style: none;
}

这部分样式针对所有的 <ul> 和 <li> 元素。padding: 0 和 margin: 0 移除了它们默认的内边距和外边距，list-style: none 去掉了列表项前面的默认标记。
```
body{
  margin: 0;
  width: 100vw;
  height: 100vh;
  background: linear-gradient(to right, #f8b2cf , #a2eaea);
}
```
对 <body> 元素进行样式设置。margin: 0 移除了默认的外边距。width: 100vw 和 height: 100vh 使 <body> 元素的宽度和高度分别占满整个浏览器窗口的宽度和高度。background: linear-gradient(to right, #f8b2cf , #a2eaea) 创建了一个从左到右的线性渐变背景，颜色从 #f8b2cf 过渡到 #a2eaea。
```
.box{
  display: flex;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
```
.box 是一个类选择器。display: flex 将该元素设置为弹性容器，方便其子元素的布局。position: fixed 使元素固定在浏览器窗口的某个位置，不随页面滚动而移动。top: 50% 和 left: 50% 将元素的左上角定位到浏览器窗口的中心位置。transform: translate(-50%, -50%) 再将元素向左上方移动自身宽度和高度的一半，从而实现元素在窗口中水平和垂直居中。

.nav{
  width: 1000px;
  height: 65px;
  background-color: #6bcad0;
  display: flex;
}

.nav 类定义了导航栏的样式。width: 1000px 和 height: 65px 设置了导航栏的宽度和高度。background-color: #6bcad0 为导航栏设置了背景颜色。display: flex 将导航栏设置为弹性容器，方便其子元素的布局。

.nav a{
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
  color: #fff;
  font-size: 18px;
}

.nav a 选择器针对 .nav 类下的所有 <a> 元素。display: flex 将链接元素设置为弹性容器。justify-content: center 和 align-items: center 使链接文本在元素内水平和垂直居中。height: 100% 使链接元素的高度与父元素相同。color: #fff 设置链接文本的颜色为白色，font-size: 18px 设置字体大小为 18 像素。

.nav>.item{
  width: 20%;
  height: 100%;
  position: relative;
  transition: .4s;
}

.nav>.item 选择器选择 .nav 类下的直接子元素 <li> 且类名为 .item 的元素。width: 20% 使每个导航项宽度占导航栏宽度的 20%。height: 100% 使导航项高度与导航栏高度相同。position: relative 为其子元素的绝对定位提供参考。transition: .4s 为该元素的属性变化添加了 0.4 秒的过渡效果。

.list{
  position: absolute;
  top:65px;
  width: 100%;
  overflow: hidden;
  max-height: 0px;
  transition: .4s;
  border-radius: 0 0 10px 10px;
  background-color: #ea7592;
}

.list 类定义了下拉列表的样式。position: absolute 使下拉列表相对于其父元素（.item）进行绝对定位。top: 65px 将下拉列表定位在导航项下方 65 像素处。width: 100% 使下拉列表宽度与导航项宽度相同。overflow: hidden 隐藏溢出的内容。max-height: 0px 初始时将下拉列表的最大高度设置为 0，使其不可见。transition: .4s 为下拉列表的属性变化添加了 0.4 秒的过渡效果。border-radius: 0 0 10px 10px 为下拉列表的底部添加了 10 像素的圆角。background-color: #ea7592 为下拉列表设置了背景颜色。

.itemTwo{
  height: 65px;
  transition: .4s;
}

.itemTwo 类定义了下拉列表中每个列表项的样式。height: 65px 设置列表项的高度为 65 像素。transition: .4s 为列表项的属性变化添加了 0.4 秒的过渡效果。

.nav>.item:hover{
  background-color: #ea7592;
}

.nav>.item:hover 选择器在鼠标悬停在 .nav 类下的直接子元素 <li> 且类名为 .item 的元素上时生效。background-color: #ea7592 将鼠标悬停时导航项的背景颜色更改为 #ea7592。

.nav>.item:hover>.list{
  max-height: 500px;
}

.nav>.item:hover>.list 选择器在鼠标悬停在 .nav 类下的直接子元素 <li> 且类名为 .item 的元素上时，将其子元素 .list 的最大高度设置为 500 像素，从而使下拉列表展开。

a{
  text-decoration: none;
}

这部分样式针对所有的 <a> 元素，text-decoration: none 移除了链接的下划线。

.itemTwo:hover{
  background-color: rgba(255,255,255,.3);
}

.itemTwo:hover 选择器在鼠标悬停在类名为 .itemTwo 的元素上时生效。background-color: rgba(255,255,255,.3) 将鼠标悬停时列表项的背景颜色更改为半透明的白色。

评论

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

打赏作者

航Hang* 你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20

扫码支付：¥1

获取中

扫码支付

您的余额不足，请更换扫码支付或充值

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。