Eeveid/studycode
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

课程代码

Browse Source
This commit is contained in:
zpooi
2025-12-03 23:08:39 +08:00
commit 290f629d2c
63 changed files with 7065 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

60
web_test/test5/index.html Normal file
View File

@@ -0,0 +1,60 @@
<!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/index.css">
<link rel="stylesheet" href="./public/mainMenu.css">
</head>
<body>
<!-- 页面容器 -->
<div class="container">
<header>
标题栏
</header>
<main class="clearfiexd">
<nav>
<ul class="main-menu">
<li><a href="#">菜单1</a>
<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>
</nav>
<div class="content">
<img src="../images/libai.png" alt="图片">
<div style="font-size: 0;">
<button>图片详情1</button>
<button>图片详情2</button>
<button>图片详情3</button>
</div>
</div>
</main>
<footer>&copy; 2025 FlexLayout 示例. 保留所有权利.</footer>
</div>
</body>
</html>

62
web_test/test5/public/index.css Normal file
View File

@@ -0,0 +1,62 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-size: 24px;
}
.container {
display: flex;
flex-direction: column;
height: 100vh;
}
header {
background-color: #9a9bb4;
height: 80px;
line-height: 80px;
text-align: center;
}
main {
background-color: blue;
flex: 1;
display: flex;
}
main nav {
background-color: #9a9bb4;
float: left;
}
.content {
background-color: #e8d5d5;
/* width: 500px; */
margin-left: auto;
text-align: center;
flex-direction: column;
flex: 1;
}
.clearfiexd::after {
content: "";
height: 0;
display: block;
clear: both;
visibility: hidden;
}
.content img {
width: 500px;
}
.content button {
margin-top: 20px;
margin-right: 20px;
padding: 5px;
}
footer {
text-align: center;
}

49
web_test/test5/public/mainMenu.css Normal file
View File

@@ -0,0 +1,49 @@
* {
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-color: #c22fef;
color: aliceblue;
border-radius: 2px;
text-align: center;
}
.main-menu>li {
width: 200px;
border: 1px solid #77049a;
margin: 1px 3px;
}
li:hover {
background-color: #a93aca;
}
/* div {
border: 20px solid red;
border-left-color: transparent;
border-right-color: transparent;
border-bottom-color: transparent;
display: inline-block;
} */