diff --git a/Web/README.md b/Web/README.md index 14c9702..c2132ff 100644 --- a/Web/README.md +++ b/Web/README.md @@ -14,5 +14,6 @@ ├── images # 图片资源 ├── test1 # 实验一 ├── test2 # 实验二 -└── test3 # 实验三 +├── test3 # 实验三 +└── test4 # 实验四 ``` diff --git a/Web/test4/index.html b/Web/test4/index.html new file mode 100644 index 0000000..442b63e --- /dev/null +++ b/Web/test4/index.html @@ -0,0 +1,41 @@ + + + + + + + + 主页 + + + + + + + \ No newline at end of file diff --git a/Web/test4/public/mainMenu.css b/Web/test4/public/mainMenu.css new file mode 100644 index 0000000..9fcb9e9 --- /dev/null +++ b/Web/test4/public/mainMenu.css @@ -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; +}