首页2.设计一个具有三个选项的菜单程序,当单击每个选项时分别跳转到三个不同的页面。

2.设计一个具有三个选项的菜单程序,当单击每个选项时分别跳转到三个不同的页面。

时间: 2024-05-05 16:21:37 浏览: 136

以下是一个简单的菜单程序，具有三个选项，单击每个选项时分别跳转到三个不同的页面： ``` <!DOCTYPE html> <html> <head> <title>菜单</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style> body { font-family: Arial, sans-serif; margin: 0; padding: 0; } .menu { background-color: #333; color: #fff; display: flex; justify-content: space-around; align-items: center; height: 50px; } .menu a { color: #fff; text-decoration: none; padding: 10px; } .page { margin: 50px; } .page h1 { font-size: 36px; margin-bottom: 20px; } .page p { font-size: 18px; line-height: 1.5; } </style> </head> <body> <div class="menu"> <a href="#page1">选项1</a> <a href="#page2">选项2</a> <a href="#page3">选项3</a> </div> <div id="page1" class="page"> <h1>页面1</h1> <p>这是页面1的内容。</p> </div> <div id="page2" class="page"> <h1>页面2</h1> <p>这是页面2的内容。</p> </div> <div id="page3" class="page"> <h1>页面3</h1> <p>这是页面3的内容。</p> </div> </body> </html> ``` 在这个程序中，我们使用了 HTML 和 CSS 来创建菜单和页面。菜单使用了一个 `div` 元素，并使用 CSS 来设置背景颜色、文本颜色和布局。每个菜单项都是一个 `a` 元素，它们链接到各自的页面。页面使用了一个 `div` 元素，并使用 CSS 来设置页面的布局和样式。通过在链接中使用 `#` 符号和页面的 ID，我们可以让每个菜单项链接到正确的页面。

阅读全文