首页利用vscode编写html代码实现手风琴菜单

利用vscode编写html代码实现手风琴菜单

时间: 2023-07-26 15:49:49 浏览: 157

好的，以下是一个简单的手风琴菜单的 HTML 和 CSS 代码，可在 VS Code 中编写和运行。 HTML 代码： ```html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>手风琴菜单</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="accordion"> <div class="accordion-item"> <div class="accordion-header">菜单项 1</div> <div class="accordion-content"> <p>这是菜单项 1 的内容</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">菜单项 2</div> <div class="accordion-content"> <p>这是菜单项 2 的内容</p> </div> </div> <div class="accordion-item"> <div class="accordion-header">菜单项 3</div> <div class="accordion-content"> <p>这是菜单项 3 的内容</p> </div> </div> </div> </body> </html> ``` CSS 代码： ```css .accordion { display: flex; flex-direction: column; } .accordion-item { border: 1px solid #ddd; margin-bottom: 10px; } .accordion-header { background-color: #f1f1f1; padding: 10px; cursor: pointer; } .accordion-content { display: none; padding: 10px; } .accordion-item.active .accordion-content { display: block; } ``` 解释： - 使用 `flex` 布局实现竖直方向排列的手风琴菜单，每个菜单项之间增加了一定的间距。 - 每个菜单项包含一个标题和内容区域。 - 标题使用 `cursor: pointer` 让鼠标放上去时变成手指形状，表示可以点击。 - 内容区域默认不显示，只有在菜单项处于激活状态时才显示出来。 - 菜单项的激活状态使用 `.active` 类来控制，点击标题时切换该类。在 VS Code 中创建一个名为 `index.html` 的文件，将上面的 HTML 和 CSS 代码复制粘贴进去并保存。然后在浏览器中打开该文件即可看到手风琴菜单的效果。

阅读全文