【HTML】模拟二级菜单【附源代码】

news/2024/9/13 22:29:53/ 标签: html, 前端

模拟二级菜单

在这里插入图片描述

HTML部分：

<!DOCTYPE html>: 声明文档类型为HTML5。
<html>: HTML文档的根元素。
<head>: 包含文档的元数据，如字符集、标题和样式。
- <meta charset="utf-8">: 设置文档的字符编码为UTF-8。
- <title>: 定义文档的标题，显示在浏览器标签页上。
- <style>: 包含 CSS 样式，用于定义网页的布局和外观。
<body>: 包含网页的所有内容。
- <div class="menu">: 一个容器，包含所有的菜单项。
  - <div class="item">: 菜单项，每个菜单项都有一个文本标题。
    - <div class="nav">: 二级菜单，包含链接和图片。
      - <a href=""><img src="" alt="" width="40">城市名称</a>: 超链接，包含图片和文本，点击后可以跳转到指定页面。这里为空，可自行补充。

CSS部分：

body 选择器: 设置整个页面的背景渐变，从天蓝色到白色。
a 选择器: 去除超链接的下划线。
.menu 类选择器: 设置主菜单的宽度、高度、背景颜色、边距和位置。
.menu .item 类选择器: 设置菜单项的高度、颜色、字体大小、行高、内边距和背景图片。
.menu .item:hover 伪类选择器: 当鼠标悬停在菜单项上时，改变背景颜色和背景图片。
.menu .item .nav 类选择器: 设置二级菜单的宽度、高度、背景颜色、边框、位置、内边距和显示方式（默认为隐藏）。
.item .nav a 类选择器: 设置二级菜单中链接的颜色和布局。
.item .nav a img 类选择器: 设置图片与文本的间隔。
.item .nav a:hover 伪类选择器: 当鼠标悬停在链接上时，改变文本颜色。
.item:hover .nav 伪类选择器: 当鼠标悬停在菜单项上时，显示二级菜单。
这个网页布局创建了一个具有二级菜单的主菜单，当用户将鼠标悬停在某个省份的菜单项上时，会显示该省份下的一系列城市链接。

源码

html"><!DOCTYPE html>
<html><head><meta charset="utf-8"><title>模拟二级菜单</title><style type="text/css">body {margin: 0;padding: 0;background-image: linear-gradient(to right, skyblue, #fff);}a {text-decoration: none;}.menu {width: 230px;height: 420px;padding: 20px 0;background-color: rgba(0, 0, 0, 0.5);margin: 50px 0 0 50px;position: relative;}.menu .item {height: 42px;/* border: 1px solid red; */color: #fff;font-size: 14px;line-height: 42px;padding-left: 30px;background: url('images/right-jiantou.png') no-repeat 200px 10px;cursor: pointer;}.menu .item:hover {background-color: #ff6700;background-image: url('images/right-jiantou2.png');}/* 右侧二级菜单 */.menu .item .nav {min-width: 250px;height: 460px;background-color: #fff;border: 1px solid #666;position: absolute;top: 0;left: 100%;box-sizing: border-box;/* 六行单元格平分整个区域 */display: grid;grid-template-rows: repeat(6, 1fr);grid-template-columns: 250px;/* 排列方式设置为先列后行 */grid-auto-flow: column;/* 设置隐式网格宽度 */grid-auto-columns: 250px;padding: 20px;/* 初始默认隐藏 */display: none;}.item .nav a {/* border: 1px solid red; */color: #000;display: flex;/* 垂直方向居中对齐,防止随父元素高度而被拉伸 */align-items: center;}.item .nav a img {margin-right: 10px;}.item .nav a:hover {color: #ff6700;}.item:hover .nav {display: grid;}
</style></head><body><div class="menu"><div class="item">安徽<div class="nav"><!-- href="" 这里可以存放自定义地址； img src="" 这里可以存放自定义图片 --><a href=""><img src="" alt="" width="40">合肥</a><a href=""><img src="" alt="" width="40">芜湖</a><a href=""><img src="" alt="" width="40">蚌埠</a><a href=""><img src="" alt="" width="40">阜阳</a><a href=""><img src="" alt="" width="40">滁州</a><a href=""><img src="" alt="" width="40">六安</a><a href=""><img src="" alt="" width="40">安庆</a><a href=""><img src="" alt="" width="40">池州</a><a href=""><img src="" alt="" width="40">宿州</a><a href=""><img src="" alt="" width="40">淮南</a></div></div><div class="item">江苏<div class="nav"><a href=""><img src="" alt="" width="40">南京</a><a href=""><img src="" alt="" width="40">南通</a><a href=""><img src="" alt="" width="40">苏州</a><a href=""><img src="" alt="" width="40">徐州</a><a href=""><img src="" alt="" width="40">常州</a><a href=""><img src="" alt="" width="40">无锡</a></div></div><div class="item">浙江<div class="nav"><a href=""><img src="" alt="" width="40">金华</a><a href=""><img src="" alt="" width="40">杭州</a><a href=""><img src="" alt="" width="40">余杭</a><a href=""><img src="" alt="" width="40">萧山</a></div></div><div class="item">河南</div><div class="item">山东</div><div class="item">山西</div></div></body>
</html>