课程代码

2025-12-03 23:08:39 +08:00
commit 290f629d2c
63 changed files with 7065 additions and 0 deletions
--- a/web_test/test4/index.html
+++ b/web_test/test4/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>主页</title>
+    <link rel="stylesheet" href="./public/mainMenu.css">
+</head>
+
+<body>
+    <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>
+    <div></div>
+</body>
+
+
+<body>
+  <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>
+  <div></div>
+</body>
+
+</html>
--- a/web_test/test4/public/mainMenu.css
+++ b/web_test/test4/public/mainMenu.css
@@ -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;
+}