cqcst/Course
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

add(web.test4): 新增 web 课实验四

Browse Source
This commit is contained in:
zhilv
2025-11-11 09:54:38 +08:00
parent 491489686d
commit 4f0ed2b446
3 changed files with 102 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
Web/README.md
View File

@@ -14,5 +14,6 @@
├── images # 图片资源 ├── images # 图片资源
├── test1 # 实验一 ├── test1 # 实验一
├── test2 # 实验二 ├── test2 # 实验二
└── test3 # 实验三 ├── test3 # 实验三
└── test4 # 实验四
``` ```

41
Web/test4/index.html Normal file
View File

@@ -0,0 +1,41 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="public/mainMenu.css">
<title>主页</title>
</head>
<body>
<ul class="main-menu">
<li>
<a href="#">菜单1</a>
<div></div>
<ul class="sub-menu">
<li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li>
<li><a href="#">子菜单1-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单2</a>
<ul class="sub-menu">
<li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li>
<li><a href="#">子菜单2-3</a></li>
</ul>
</li>
<li>
<a href="#">菜单3</a>
<ul class="sub-menu">
<li><a href="#">子菜单3-1</a></li>
<li><a href="#">子菜单3-2</a></li>
<li><a href="#">子菜单3-3</a></li>
</ul>
</li>
</ul>
</body>
</html>

59
Web/test4/public/mainMenu.css Normal file
View File

@@ -0,0 +1,59 @@
* {
margin: 0;
padding: 0;
font-size: 24px;
box-sizing: border-box;
}
ul li {
list-style: none;
}
.sub-menu {
display: none;
}
ul > li:hover .sub-menu {
display: block;
}
a {
text-decoration: none;
color: inherit;
}
.main-menu li {
background: #c22fef;
color: aliceblue;
border-radius: 2px;
text-align: center;
}
.main-menu > li {
width: 200px;
border: 1px solid #77049a;
margin: 1px 3px;
}
li:hover {
background: #a93aca;
}
div {
border: 15px solid red;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
display: inline-block;
position: absolute;
right: 2px;
opacity: 0;
}
.main-menu li {
position: relative;
}
ul > li:hover div {
opacity: 1;
}