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

feat(web.test5): 新增 web 实验5

Browse Source
This commit is contained in:
zhilv
2025-11-18 10:23:41 +08:00
parent df8e704df5
commit 84b4770d5a
7 changed files with 201 additions and 8 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
Web/README.md
View File

@@ -12,8 +12,9 @@
```sh ```sh
. .
├── images # 图片资源 ├── images # 图片资源
├── test1 # 实验一 ├── test1 # 实验1
├── test2 # 实验二 ├── test2 # 实验2
├── test3 # 实验三 ├── test3 # 实验3
└── test4 # 实验四 ├── test4 # 实验4
└── test5 # 实验5
``` ```

BIN
Web/images/libai.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.2 MiB

4
Web/test4/index.html
View File

@@ -12,7 +12,7 @@
<ul class="main-menu"> <ul class="main-menu">
<li> <li>
<a href="#">菜单1</a> <a href="#">菜单1</a>
<div></div> <div class="sjx"></div>
<ul class="sub-menu"> <ul class="sub-menu">
<li><a href="#">子菜单1-1</a></li> <li><a href="#">子菜单1-1</a></li>
<li><a href="#">子菜单1-2</a></li> <li><a href="#">子菜单1-2</a></li>
@@ -21,6 +21,7 @@
</li> </li>
<li> <li>
<a href="#">菜单2</a> <a href="#">菜单2</a>
<div class="sjx"></div>
<ul class="sub-menu"> <ul class="sub-menu">
<li><a href="#">子菜单2-1</a></li> <li><a href="#">子菜单2-1</a></li>
<li><a href="#">子菜单2-2</a></li> <li><a href="#">子菜单2-2</a></li>
@@ -29,6 +30,7 @@
</li> </li>
<li> <li>
<a href="#">菜单3</a> <a href="#">菜单3</a>
<div class="sjx"></div>
<ul class="sub-menu"> <ul class="sub-menu">
<li><a href="#">子菜单3-1</a></li> <li><a href="#">子菜单3-1</a></li>
<li><a href="#">子菜单3-2</a></li> <li><a href="#">子菜单3-2</a></li>

9
Web/test4/public/mainMenu.css
View File

@@ -39,15 +39,18 @@ li:hover {
background: #a93aca; background: #a93aca;
} }
div { .sjx {
border: 15px solid red; border: 8px solid red;
border-bottom-color: transparent; border-bottom-color: transparent;
border-left-color: transparent; border-left-color: transparent;
border-right-color: transparent; border-right-color: transparent;
display: inline-block; display: inline-block;
justify-content: center;
position: absolute; position: absolute;
right: 2px;
opacity: 0; opacity: 0;
right: 10%;
transform: translateY(50%);
transition: opacity 0.1s;
} }
.main-menu li { .main-menu li {

63
Web/test5/index.html Normal file
View File

@@ -0,0 +1,63 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<link rel="stylesheet" href="./public/mainMenu.css">
<link rel="stylesheet" href="./public/index.css">
</head>
<body>
<div class="container">
<header>标题栏</header>
<div class="main clearfixed">
<nav>
<ul class="main-menu">
<li>
<a href="#">菜单1</a>
<div class="sjx"></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>
<div class="sjx"></div>
<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>
<div class="sjx"></div>
<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>
</nav>
<div class="content">
<img src="../images/libai.png" alt="图片">
<div style="font-size: 0;">
<button onclick="alert('图片详情1')">图片详情1</button>
<button onclick="alert('图片详情2')">图片详情2</button>
<button onclick="alert('图片详情3')">图片详情3</button>
</div>
</div>
</div>
<footer>
ICP备案号: <span id="icp"><a href="https://beian.miit.gov.cn/" target="_blank">渝ICP备2025071889号</a></span>
&nbsp;&nbsp;Copyright &copy; Zhilv
</footer>
</div>
</body>
</html>

69
Web/test5/public/index.css Normal file
View File

@@ -0,0 +1,69 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.container {
display: flex;
flex-direction: column;
min-height: 100vh;
}
header {
background-color: #000000b9;
height: 80px;
text-align: center;
line-height: 80px;
font-size: 32px;
color: white;
}
.main {
background-color: blue;
overflow: hidden;
flex: 1;
display: flex;
flex-direction: row;
}
.main nav {
background-color: cadetblue;
float: left;
width: 206px;
}
.main .content {
background-color: antiquewhite;
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.clearfixed::after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
.main img {
width: 580px;
border-radius: 10px;
}
.content button {
margin-top: 20px;
margin-right: 20px;
padding: 5px;
}
footer {
height: 40px;
background: gray;
text-align: center;
line-height: 40px;
}

55
Web/test5/public/mainMenu.css Normal file
View File

@@ -0,0 +1,55 @@
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;
}
.sjx {
border: 8px solid red;
border-bottom-color: transparent;
border-left-color: transparent;
border-right-color: transparent;
display: inline-block;
justify-content: center;
position: absolute;
opacity: 0;
right: 10%;
transform: translateY(50%);
transition: opacity 0.1s;
}
.main-menu li {
position: relative;
}
ul > li:hover div {
opacity: 1;
}